Skip to content
Submitted over 2 years ago

Responsive landing page using mobile first, sass

#sass/scss
turtlecrab•550
@turtlecrab
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

My first landing page, I really tried to make it very very close to the design in both desktop and mobile view, I think I did well. Tried Figma for the first time, just used the free jpegs inside it, and it went like a breeze! It's so much easier to measure all the stuff there than in Krita(which I used previously).

Questions:

  • What are the best practices of making a burger button and a menu? I think the method I used is fine, but maybe there are others?
  • I made the tip of the mobile menu and links' bold underlines with ::before css alchemy. Maybe there are better ways?
  • For widths between 375px and 1440px I used my judgements about how the design should respond, does it feel good?
  • I also set max-width of the whole page to 1700px, not sure, maybe should've set wider?

I'd also appreciate any feedback on html and css, I spent a bunch of time on this simple project and not sure whether it turned good or not, maybe I should've gone for simpler approach with fewer @media queries?

Community feedback

  • Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    Hi turtlecrab! You’ve done a great job making an essentially pixel-perfect solution! 🙌

    As for your questions:

    • For the hamburger menu, I would defintely change the .burger div to a button. While the ul is still visible for screenreaders (or it seems to be), the div is not focusable for keyboard users and will only open on click. Using a button will allow the menu to open both on click and when pressing "enter" or "space" if focused. Much more accessible.
    • I think ::before and/or ::after pseudo-elements were definitely the way to go for both the mobile menu menu triangle and the link underlines. Great job. 👍
    • I honestly think it responds great overall, which was definitely not easy for this project. The only thing I noticed is that the egg and glass images start getting cut off from 650px - 767px. Responsiveness is a little easier in this section if you put the images in the DOM (in an img or picture tag) rather than as a background image in an empty div. Another good option might be to make the height of the divs responsive using clamp().
    • I set my max-width even lower than yours. It looks good to me. 👍

    Again, nice job on this one!

    Marked as helpful
    0
    turtlecrab•550
    @turtlecrabPosted over 2 years ago

    @brasspetals Thanks for the great feedback! Good point on menu button, for some reason I thought that hamburger button is only relevant for mobile touch screens, which of course is not the only case. And clamp() is a great suggestion, I've seen other people using it, but never tried it myself, looks like it's a suitable tool for the problem you mentioned!

    1

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