Colin's Order-Summary-Component

Community feedback

• 

  P

  Fluffy Kas•7,695

  @FluffyKasPosted about 1 year 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 about 1 year 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