Responsive News Homepage using Flexbox

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

• This <div class="wrapper"> is not necessary ❌.

• Do not ❌ do this <div class="shadow"></div> to create an overlay. Instead use a pseudo element to crest it.

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

• The logo should be outside ⚠️ the nav.

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

• This two are not necessary ❌:

<div class="main-container">
<div class="main-info">

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

• 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 main article requires the use of two illustrations 🎑 at different breakpoints ⚠️. The picture element will facilitate this.

Here is how it looks like implemented: EXAMPLE

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:📚

https://www.w3schools.com/html/html_images_picture.asp

• This <div class="tech-article"> is not needed ❌.

• 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.

• Numbers are never ❌ headings.

• 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

• For improved accessibility 📈 for your content, it is best practice ✅ to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

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

Happy Coding! 👾