Submitted over 1 year ago

Landing page - Dropdown Navigation with HTML, CSS and JS

#bem

David• 8,000

@DavidMorgade

Preview site View code

This is a solution for...

Intro section with dropdown navigation

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello and welcome to my Intro-Section-Dropdown solution

This was the first challenge I submitted to FrontEndMentor, and also the first project I made without any kind of tutorial, just wanted to re-make it to practice a bit my CSS and Javascript after a long time just doing React.

Problems with this solution:

Accesibility errors because of nesting a tags inside ul when they should be wrapped on a li tag, noticed this when I finished the project, too lazy to change all the styles that I already did :(, but learnt a value lesson from this and reinforce my html semantics.
Getting the border of the 'Learn more' button was a pain, but I'm satisfied with the resutls.

Extra Features

Added an extra breakpoint from 768px to 1440px for Tablets
Border animations
Typewriter effect for the footer 'attribution'
Custom hambuguer menu that also has animations

Built with:

HTML, CSS and Javascript
Mobile First

Hope you like it!, as always open to any feedback for future projects.

Community feedback

somaye beiranvand• 220

@somaye-beiranvand

Posted over 1 year ago

Great job 😊👏 and I like the descriptions that you add to your projects, I learn alot from them

Just a small suggestion about your github profile:

If you put the name of files or folders in .gitignore file they won't be uploaded on github and you can save more space.

Hope my suggestion would be useful.

Marked as helpful

David• 8,000

@DavidMorgade

Posted over 1 year ago

@somaye-beiranvand Hello Somaye thanks a lot for your feedback!

Yeah I usually use gitignore to hide node_modules / build folder / pretierignore..

In this case I don't want to hide any of the uploaded files, since it is just an html/css/js solution , I don't have any kind of external dependency or file that I want to hide.

nouredine• 90

@elghaouat

Posted over 1 year ago

good job 👍

Please log in to post a comment

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