Project 11: SCSS, html, grid, media query, flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey awesome work on this one. Layout in desktop looks great, it is responsive and the mobile layout looks really great as well.

  Some suggestions would be:

  • body tag does not need the min-width: 100% since by default it is taking 100% of the width.
  • header does not need the width: 100% since the content inside it already give it its width as well the align-items: center since there is only 1 direct child inside it.
  • Always have a main element to wrap the main content of your page. A typical structure looks like:

  <header />
  <main />
  <footer />
  

  This way, all element that has content are inside landmark element.

  • alt values for the 3 icons should be left empty alt="" since it is only a decorative image, also add an aria-hidden="true" attribute on the img.
  • Use h3 on the heading tag for each of the icons. Why h3? Because if you look at the structure, the Supercharge your workflow uses h2 then it means the next heading tag must use h3 because when using heading tag, use it incrementally by 1 level. If you are going to use h4 make sure that h1, h2, h3 appears before it.

  FOOTER

  • List of links could use a nav element, since it looks like it is your website's navigational links.
  • Each a tag that wraps the social media icon should have either aria-label attribute or an sr-only element inside it. The text or value you will use should be the name of the social media. Example, on the facebook link, the a tag should have aria-label="facebook" this way users will know where this link would take them. You use this method when there is no text content inside the element.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Mainul Islam•160

  @Mainul-Islam-NirobPosted about 3 years ago

  @pikamart Thank you very much. It was really helpful for me. I will change my code according to your feedback. Thanks again 💚💚💚

  0
• 

  SHAHAB MALIK•345

  @Shahab-MalikkPosted about 3 years ago

  Hi Nice work implemented every thing well. Keep Coding

  0