Colin's Order-Summary-Component

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted 12 months ago

  Hey,

  First of all, it looks great. I'm glad to hear you got some useful feedback and was able to tackle this challenge more easily! Some general tips - for this challenge and for the future ones:

  There is a very easy way to place everything in the center - even vertically:

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

  Or you can do the same with grid and place-items center, as you prefer. Giving the body a min-height will make sure your card is centered vertically. This way you won't need to rely on %-s for margins. Defining margins with % isn't super reliable anyway, you'd do better with em, rem.

  Getting units right: so apart from margins, generally it's best to use rem when you're uncertain what units you should use - like your card width (where you now use px). Px values shouldn't be used widely, apart from setting smaller things, like a border-radius or box-shadow.

  Alt texts: really nice to see you paid attention to this. Just a note: for decorative images, you can leave alts blank - like the music icon here.

  Semantic stuff: make sure to wrap everything in a main tag. Of course you can have other landmark elements, like header, footer, etc in your websites, but there very least you should use a main.

  All in all, really well done!

  Marked as helpful

  1

  ---

  

  Colin Meehan•40

  @ucolinmeePosted 12 months ago

  @FluffyKas Hi thank you so much for taking the time to review my project and giving feedback! This is exactly what I needed because I have been getting confused about what's the best practice when it comes to using %-s, px, em and rem, so I'll be sure to implement your tips into my next challenge.

  0