Responsive Loopstudio landing page

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 1 year ago

  Hey there! 👋 Unfortunalty, there are a lot issues that I would not expect at this challenge level... I would highly recommend starting with an easier challenge.

  Here are some suggestions to help improve your code:

  • Your navigation needs to be rewritten⚠️. There should not be two separate codes for your navigation menu, there should only be one and you will use CSS to style it for mobile/desktop.

  • Since your logo is wrapped inside an anchor element, you need to include ⚠️ an aria-label stating the logo's name ("Loopstudios") and where it leads to ("Home").

  • The nav toggle should be the first thing inside of the nav to improve accessibility and it should⚠️ be a button not an anchor. It should also have aria-expanded, area-label and an aria-control.

  • Remove all the br elements you have added, they are being used incorrectly🚩.

  • The "Our Creations" heading should be an h2 not and h3. As for the card headings, they should all be h3.

  • For the card, instead of doing this [example provided at bottom of text], it far better to use the picture element.

  ❌:

   <a href="#" class="img-desktop"><img src="images/desktop/image-deep-earth.jpg" alt="#"></a>
  <a href="#" class="img-mobile"><img src="images/mobile/image-deep-earth.jpg" alt="#"></a>
  

  • In the card, the images should not❌ be the element that is interactive, it should be the text and you have the text "breakout" to make the entire card interactive.

  Here is a helpful article on how to achieve that https://piccalil.li/tutorial/create-a-semantic-break-out-button-to-make-an-entire-element-clickable/

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

  Happy Coding! 👾

  Marked as helpful

  0