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

HTML, SaSS and JavaScript

@Daan78

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


If someone can give some tips about the navigation menu should be nice!

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Daniel, awesome work on this challenge! Your solution looks great! For mobile navigation, I'd recommend avoiding setting click listeners on non-interactive elements like the img element. This is because anyone navigating the site who can't click on the element won't be able to access the navigation.

A big part of building websites is creating accessible interfaces. Instead, you could use an anchor tag or button. For example, take a look at the mobile navigation for Frontend Mentor. I use a button to trigger the mobile menu, which can be accessed using both a mouse/trackpad and also the keyboard.

It's looking great though. Keep up the great work! 🙂

1

@Daan78

Posted

Hello Matt,

Thank you for your reply and compliment! :)

However, I used the images files within the images folder for the hamburger menu.

Normally, and that's maybe even more worse after I saw your reply, I draw the hamburger menu with span elements, so they can be animated in a lot of smooth ways. But as I understood, that isn't the best option either exept when I wrap the span elements within an anchor or button tag?

More worried for me is that I never seem to be able to create a dropdown vs desktop menu navigation whithout messing up my code, at least that's how it feels sometimes :)

0

P
Matt Studdert 13,611

@mattstuddert

Posted

@Daan78 it will come with practice and time, so I hope you're not getting too frustrated 🙂

Using the images provided in the challenge is great, but I would wrap them in an interactive element, like a button or a. Otherwise, you'll be creating an inaccessible menu toggle.

Creating a hamburger with your own code is also fine, but again, you'd want to wrap that code in an interactive element.

Keep it up! 👍

1

@Daan78

Posted

Thank you again.

Well, it seems that it worked out great now. I think this is the better way to do it. It even turned out to be a good reusable snipper too, as I look at it again :)

https://twitter.com/DanielHoppener/status/1229100012405129219

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