Design comparison
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
::beforecss 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-widthof 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
- @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
.burgerdiv to abutton. 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 helpful0@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 - For the hamburger menu, I would defintely change the
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