Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Intro section with dropdown navigation

#sass/scss#accessibility
Ahmad_Manaā€¢ 320

@UserAhmad2001

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


While doing the challenge i faced a few ups and downs

The issues being:

  • Couldn't make the main image change the src attribute when resizing the window.
  • main image overflows or turns too small when resizing the window.

The solutions:

  • I used the picture tag in my html, which works better than the img tag's srcset attribute for a responsive image.
  • used flex basis and width property to make the image look good on different screen sizes.

Community feedback

Elaineā€¢ 11,420

@elaineleung

Posted

Hi Ahmad Mana, great work! I also completed this challenge this week, and like you, I used the <picture> element in dealing with responsive images. Well done solving your problems :)

I can see in your report that you have a number of HTML and/or accessibility issues such as needing alt tags in images, so you might want to fix those. Also, your font isn't showing up; it's because the link you used is the font face's main link and not the server link, which should look something like https://fonts.googleapis.com/css2?family=Epilogue with the font weights attached. You'll need to click into the page for the font face and then select the font weights you need, then copy the link given and paste it into your code. Lastly, the hover style for the dropdown nav seems to be changing the entire nav instead of just the link I'm hovering on, so I think you need to put the hover: on your li instead of ul.

1

Ahmad_Manaā€¢ 320

@UserAhmad2001

Posted

@elaineleung Feedback noted Thanks for your comment, Elaine. :) I will make sure to fix them later.

Best regards Ahmad

1
Elaineā€¢ 11,420

@elaineleung

Posted

@UserAhmad2001 Oh, I forgot to mention that you can just add empty alt="" tags if the image isn't particularly important to the content, but you do need to have the alt tags somehow. Good luck!

1
Ahmad_Manaā€¢ 320

@UserAhmad2001

Posted

@elaineleung šŸ‘šŸ‘šŸ‘šŸ‘

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord