Skip to content
Submitted about 3 years ago

Responsive landing page using mobile first, sass

sass/scss
turtlecrab•550
@turtlecrab
A solution to the Agency landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Anna Leigh•5,135
    @brasspetals

    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

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