Skip to content
Submitted over 3 years ago

Landing page using HTML, CSS and JS

Kofi Nartey•650
@kofinartey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Insure landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi there. I had issues with using the same set of nav links for both mobile and desktop screen widths. To work around this, I wrote two different sets of nav links; one for mobile and the other for desktop and hid them accordingly. I know this is not standard procedure and I'd appreciate all the help I can find in refactoring my code.

Looking forward to receiving suggestions on other matters as well. Cheers

Community feedback

  • Michael Bishop•1,080
    @MikeBish13Posted over 3 years ago

    Hey, nice job overall.

    In terms of the nav links, I would consider using a ul for the list and then an li for each link, with an a tag inside each li - this is generally the standard way of creating a nav.

    In terms of responsiveness for mobile and desktop, have a think about you could potentially use position:absolute on the nav when you're in mobile view, and how this could be combined with some simple javascript toggling of display: block/none on the click of the hamburger, as you've already demonstrated.

    One general comment is that your media query breaks into mobile view a little bit too soon - I'd maybe consider lowering this to around the 700px mark.

    Hope this helps!

    Marked as helpful
    0
    Kofi Nartey•650
    @kofinarteyPosted over 3 years ago

    @MikeBish13 I really appreciate this.

    0
    Kofi Nartey•650
    @kofinarteyPosted over 3 years ago

    @MikeBish13 I really appreciate this.

    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