Responsive using Grid, Flex, Sass

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! 👾

Thank you very much for all advices.