semantic tags, responsive, flex box, media query

Community feedback

• 

  Liam Frosteman Neogard•170

  @FrostemanNeogardPosted over 1 year ago

  First thing I noticed was the input fields by the score numbers. These should be plain uneditable text as this is not something a user would input, but rather something the software would output to display how well the user did on something such as an assessment.

  Another thing is the mobile layout. It is responsive, which is great! However, I think it differs from the design a little bit. On mobile, the site should take up the entire viewport, and there should be no rounded corners at the top of the component. This can be fixed by simply changing the border radius on the first section inside of your media query. Keep in mind that you'll need to put !important when changing the border radius since it is already defined in the main css.

  Two more small things; only the second section has a dropshadow, which looks a little odd due to it being slightly visible above the first component. To fix this, you can simply set the dropshadow to be over the entire <main> element instead. The second thing is using CSS variables. When using a color value in multiple places, it can easily get tedious when you want to change that color, since you'd have to manually update it everywhere you've used it. You can use CSS variables to get around this, that way you only need to change one value to have it be applied everywhere.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Ed-dyb Abdelilah•1,560

  @eddybproPosted over 1 year ago

  @FrostemanNeogard Thank you for your time, It's very helpful.

  1