Skip to content
Submitted about 2 years ago

Landing page - Dropdown Navigation with HTML, CSS and JS

David•8,000
@DavidMorgade
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro section with dropdown navigation
  • HTML
  • CSS
  • JS
2junior

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-beiranvandPosted about 2 years 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
    1
    David•8,000
    @DavidMorgadePosted about 2 years 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.

    1
  • nouredine•90
    @elghaouatPosted about 2 years ago

    good job 👍

    0

Please log in to post a comment

Log in with GitHub

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