Frontend Mentor | Responsive landing page using mobile first, sass coding challenge solution

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

@brasspetals

Posted almost 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

turtlecrab• 550

@turtlecrab

Posted almost 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!

Responsive landing page using mobile first, sass

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community