Responsive News Homepage using Flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  Marked as helpful

  2

  ---

  

  Julie Crotzer•360

  @JCrotzerPosted almost 2 years ago

  @vcarames Thank you so much! I appreciate the feedback. Always looking to improve.

  0