Responsive using Grid, Flex, Sass

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some recommendations for enhancing your code:

  • The header should be outside ⚠️ the main element in order to be semantically correct.

  • It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.

  • The logo’s alt tag description needs to be improved upon ⚠️; it should ALWAYS and only state the company’s name.

  • The nav toggle button should be built ⚠️ using a button element and it should have an aria-label, aria-expanded and aria-control.

  • The main article (The Bright Future of Web 3.0) should be wrapped ⚠️ inside an article element.

  • The "The Bright Future of Web 3.0?" Is not an h1 heading ❌, it is another article heading. It should be an h2 heading ✅ and there should be a visibly hidden h1 in the site.

  • The "new" section should be built using an unordered list element ⚠️ and have an aria-label.

  • The bottom section should be built ⚠️ using an ordered list and have a visually hidden h2 heading. It should also be wrapped in a section element not a footer.

  • The elements that are meant to be interactive are not⚠️. I suggest looking at the "active-states" design file to see which elements are meant to be interactive so that they can be built using the anchor element.

  More Info:📚

  MDN The Anchor element

  • NEVER ❌⚠️⚠️ do this as it creates accessibility issues for users and it is outdated, instead download a px to rem/ em converter in your code editor.

  html {
    font-size: 62.5%;
  }
  

  More Info:📚

  Should I change the default HTML font-size to 62.5%?

  • There is no need for several @media (min-width: 700px) ❌. Just create a single one and add the changes you want in it.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 👾

  Marked as helpful

  0
• 

  Nurio34•510

  @Nurio34Posted almost 2 years ago

  Thank you very much for all advices.

  1