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

Order Summary Card Component

Jen M 130

@jenmurph4610

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


More practice :) Ran into no issues getting this to come together at all. Really happy to finish one without any struggles! Would love to hear if there are any improvements anyone would suggest though.

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey Jen,

The end result looks lovely, so I'm only here to give you a few small suggestions that you might want to keep in mind for future projects:

  1. I'm sure you've heard this before: pixels aren't always the best choice of unit to use (in most cases, they aren't). There are mainly accessibility reasons behind this, if you have the time and interest, you can read about the topic in more detail here. Relative units (em, rem, etc) are a better alternative and rem is pretty easy to get started with, for example.

  2. While using IDs isn't very harmful in a small component project like this one, when you work in larger, more complex projects it will come back to bite you in the butt :) When you work with any sort of CSS, it's always a good idea to keep reusability in mind, it will help you work faster and make your code more readable and concise. IDs, since they're always unique, go against this basic principle so it's the best to avoid them, unless you have a good reason to use them. Go with classes!

  3. Background images are best added with CSS. You can just set them with the "background" property on the body (you can add multiple backgrounds even, comma separated, like a colour and an image) and then switch between the mobile and desktop version with media queries.

Marked as helpful

1

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