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

@davidmurage

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


All Feedback

Community feedback

Better5afe 850

@better5afe

Posted

Hi David!

Firstly, congrats on completing this project! 🎉 I hope you had a lot of fun while making it.

Overall, it looks pretty solid, but you can find some tips on how you can make it even better:

  1. Box shadow - in my opinion, it's a little bit too dark for the dropdown menus. You can either make it a little bit lighter on your own, or you can use one of many box shadow generators to adjust the color and the shape and then add it to your project.
  2. Button border - if you hover on the primary-btn, the section spacing changes a little bit. It's because you are adding a border to it only on the hover event. Add a border: 1px solid var(--Almost-Black) to the primary-btn class and while the mouse is hovering over it, you only change the background color. The same this is happening to the Register button.
  3. Padding - I would increase the padding on the X axis on the mobile viewport. Currently, the content is a little bit too close to the edges.
  4. Nav animation - it looks good, however I would consider adding an animation when it appears and disappears. It would improve the user experience.
  5. Nav position - on mobile viewport, the navigation takes 100vh of space, however the application content takes more than that and therefore, the nav and the nav shadow a cut if you scroll lower. To fix it, you can experiment with postion: fixed; top: 0; right: 0; bottom: 0; left: 0; on the mobile resolution.

That's all from my side, I hope you find it helpful. The project is really good and once again - congrats!

Happy Coding! 👻🎃

0

@davidmurage

Posted

Thanks alot @better5afe for these tips.. I will try and implement them.

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