Skip to content
Submitted over 3 years ago

Responsive web page using HTML, SASS, FLEXBOX, GRID and a bit of JS

Hanif•570
@1Hanif1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

This is my first project where I used SASS and it was really fun. Being able to split my css into separate scss files was amazing

Please check out my page especially my Hamburger menu and my Grid layout and drop your feed backs please 🙏

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Hanif Barbhuiya! 👋 Good job on this one! 🎉 Your solution responds well and overall looks good. Here's my suggestions:

    • Read about Sass 7-1 pattern to keep your file management orginazed.
    • You should set max-width only to content and let your images/background stretch full width of the page. I am looking at 1920x1080 monitor and it look bad when site is "cut" like this.
    • Change the alt attributes for the .logo, .header-arrow, item-one/two/three etc images, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.

    Good luck with that, have fun coding! 💪

    1
    Hanif•570
    @1Hanif1Posted over 3 years ago

    @tediko Thank you so much for your suggestions! I really appreciate it

    0
  • Alexis•215
    @alexis-ferreiraPosted over 3 years ago

    Hi, good job! The hover is missing on the links.

    0
    Hanif•570
    @1Hanif1Posted over 3 years ago

    @alexis-ferreira oh thanks! I forgot to put 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