Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

first project using HTML and CSS.

@tomerbourstein

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey all, my first project. Definitely not clean enough of code. If you have the time to look over and tell me what can be done better.

Thanks.

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey there,

Here's a list of things you could to improve:

  1. Your card looks super small and hard to read. Not sure why you set a width of 280px on your card and on your image, but this is the source of your problem. You should also center it.

  2. More semantic markup: instead of div you could use main for your box. I'd also avoid using class names that are referring to styles("bold900, etc"), try to be more descriptive of their content instead. And instead of a tags, you could use buttons where its appropriate.

  3. Background image: there are 2 separate background images for desktop and mobile devices, use them both with adding media queries. Also, I'd suggest using background-size: contain. I noticed you uploaded one of the background images in your css folder(not sure, why) and then both of them again in the images folder. Perhaps you should get rid of the incorrect one :)

  4. And finally: there's a box-shadow on the card itself that you missed.

I hope this helps, good luck! :)

Marked as helpful

0
Hafizan Adli 1,190

@hafizanadli

Posted

To position the card in the middle of the screen you can set body min-height to 100vh, and then centering box element using flex

body { min-height:100vh; display: flex; justify-content:center; align:items:center; }

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord