Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using mobile first, sass

#sass/scss
turtlecrab• 550

@turtlecrab

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@brasspetals

Posted

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

@turtlecrab

Posted

@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
Discord logo

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