Order summary component challenge - HTML and CSS

Community feedback

• 

  Nick•760

  @Nick331102

  Posted over 3 years ago

  Nice work. Good luck in your bootcamp

  12

  Marked as helpful
• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 years ago

  Hello

  Here is some ideas for improvements on this, most are really common beginner mistakes so don’t get discouraged. It’s good to pick these things up early 😊

  • headings must go in order. They are essential for giving structure to the document, nothing to do with styling. So annual plan needs to be a h2 here
  • no reason to have background image on an absolutely positioned div in the html. Just place the background image on the body, then swap that image in a media query for the desktop/mobile one
  • the grey box is definitely not an article. Div is fine, it has a heading and that’s all the structure you need semantically
  • what is it you expect proceed and cancel to do? Buttons are for actions, anchor tags for navigation. If these would take you to a next/previous page/step in a process they should be anchor tags
  • make sure all interactive elements have obvious focus-visible states to help keyboard users know where they are in the page. Usually this is not supplied by a designer and set globally for a site like a bold orange/blue outline
  • overall try to get a little closer to the design in terms of heading size, padding and the subtlety of the box shadow. You could do this challenge with no media queries (except the body background image), but I think the padding is slightly larger on desktop in the original designs.
  • never have font sizes in pixels. That’s important. Use rem most of the time, or em if you need to scale with the size of a parent (I can’t remember the last time that was necessary on a project though and only use em occasionally for padding)

  That’s all I can remember from looking quickly at code before, but hope it’s a helpful start. Good luck

  00