responsive sunnyside agency project Html, css , js

Community feedback

• 

  Pietrell•400

  @PiotrPlotastPosted about 1 year ago

  Hi, first of all congrats on completing the challange! I'll advice you:

  • Instead of <div class="header"> you could use <header> tag. It's part of semantic html(I see you know what it is).
  • instead of 2 different imgs for mobile and desktop view use <picture> tag element with srcset and media attributes. MDN article on picture element.
  • there's a bug on the website, when i click anywhere nav buttons dissapear, you should work on this issue -do not use px units as much and especially for anything related to font as it breaks accessibility(read about realtive units, the most important are em rem and less important ch). For instance font-size: 16px; should be font-size: 1rem; as it scales with users browser font size and px don't.
  • you could clean up unnecessary comments in your css because there's a lot of unused styles.
  • read about mobile first approach(trust me it's easier in the end)
  • socials icons should be links
  • read about aria-attributes for mobile nav menu

  Marked as helpful

  1

  ---

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted about 1 year ago

  @Pietrelll yeah i know the header tag i meant not to use rem or em too much in this project but thank you for your nice advice i forget to handle the disappearing of nav i made it for the mobile only

  1