Semantic HTML5 markup CSS custom properties Flexbox CSS Grid

Community feedback

• 

  Thomas Hertog•825

  @thomashertogPosted over 1 year ago

  The design is a bit too much off to consider this one finished in my opinion. Most of it is colors and sizing, so you're on your way there.

  Other improvements I'd make on this

  HTML/accessibility

  • you have a lot of <div> containers of which i'm not sure whether they're all needed/adding some possibilities
  • There's a <header> and <footer> which is good but no <main>
  • <section> without associated header is just the same as a meaningless <div>

  CSS

  • mobile-first vs desktop-first is implemented inconsistently
  • a lot of px-values which are better in em/rem
  • you clearly know about some of the (which i consider) more advanced features of CSS Grid, however, you seem to be applying them in the wrong place/manner which causes weird composition (e.g. your footer at about 890px wide)

  Marked as helpful

  0

  ---

  

  SalahEddineMj•210

  @SalahEddineMjPosted over 1 year ago

  hello thank you for feedback i'm beginner in css could you help me how can i write a less code in the best way and be more professional in css features@thomashertog

  0

  

  Thomas Hertog•825

  @thomashertogPosted over 1 year ago

  I'd advise to re-attempt this challenge (not because this solutionis bad, but because there's more to be learnt if you start with a clean slate) and approach it this way

  1. make sure you get the HTML right. get the content in all the right semantic elements and already see if that makes sense when you open it in your browser (maybe do a quick test run with a screenreader as well)
  2. focus on getting the mobile layout right (preferrably by using flexbox and/or grid in the easiest/most maintainable way that still makes sense for the design). only add a <div> container if you need it for styling purposes
  3. add some media queries to adjust the design for larger screens

  @SalahEddineMj

  0