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 landing page using CSS and Javascript

Fachi 60

@Fachi-r

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


The most challenging part was making the dropdown menu. On top of that switching from a navbar to a sidebar menu on mobile. It was a nice learning experience.

Anotger thing is that, it was a bit tricky to load the specific images for mobile and desktop correctly. I didn't know how to do it using Html, so I had to use Java script to check the screen size and switch the images accordingly.

Community feedback

Suleman 750

@legion40216

Posted

Regarding the different images for desktop and mobile, the recommend path was inserting the picture tag in html which comes with media query for changing images on different screen sizes, you should check it out.

Happy Coding

Marked as helpful

1

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