Skip to content
Submitted about 1 year ago

Landing page using HTML, CSS & JavaScript

Emmanuel Agbonyeme•40
@Itz-Emmy
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

Community feedback

  • Better5afe•850
    @better5afePosted about 1 year ago

    Hi Emmanuel!

    Congratulations on completing the project! 🎉 I hope you had fun while making it.

    Please find some minor suggestions on what can be improved below:

    • Your HTML code is semantic and easy to read. The only thing that I would change is leaving alt attribute empty for images with icons only. It's not required in those situations.
    • Instead of importing the Google font inside the stylesheet, I would go for the option with linking it inside the <head> element. Importing fonts in most of the situation requires a lot of loading resources to be completly fetched.
    • When it comes to padding and margin, I would suggest using em and rem units to make the entire website more responsive.
    • On mobile viewports the app seems to be a little too wide - it is possible to scroll it horizontally.
    • If you open navigation on mobile viewport and then switch to desktop, the black overlay stays on the screen and you can't really interact with the app anymore.
    • For hover states, I would suggest adding some transition on the animated properties to give the website more snatched look.
    • Font for the dropdown lists seems to be a little bit too small on a desktop viewport.
    • Consider increasing the with of .hero-left element on a desktop viewport - the space in between left and right side is slighly too big.
    • You left one comment for the .hero class inside the CSS file 😛.
    • Speaking of CSS - consider using variables to store colors. It makes them easier to use and adjust their values throughout the code.

    Overall, the project is very solid, keep going! I hope you find this comment helpful.

    Happy Coding! 🎃👻

    Marked as helpful
    1
    Emmanuel Agbonyeme•40
    @Itz-EmmyPosted about 1 year ago

    @better5afe Hi. Thanks for the suggestions. They are very insightful. I will make sure to effect them.

    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