Responsive Newshomepage using CSS grid and Flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The logo should be outside ⚠️ the nav.

  • The logo and nav should be wrapped inside ⚠️ a header element.

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

  • 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

  • The main article should be wrapped ⚠️ in an article element.

  • 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

  • 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 button was created with the incorrect element ❌. When users click on the button they should directed to a different part of your site; the anchor element will allow this to happen.

  More Info:📚

  MDN The Anchor element

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

  • ⚠️ Always use variables, at minimum, for you colors. As it help keep things organized and easier to maintain.

  More Info: 📚

  MDN CSS Variables

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

  Happy Coding! 👾

  Marked as helpful

  1

  ---

  

  David OG•340

  @DavidOG03Posted almost 2 years ago

  @vcarames Thank you soo much for the information.

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @DavidOG03

  Glad I could help!

  1