HTML, SCSS, JS - Mobile First

Solution retrospective
Its my second try at mobile-first. My thoughts on mobile-first method is that it feels like it makes the coding a lil less complicated (I might be wrong tho!)
Anyway, any feedback and suggestion is welcomed!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @brasspetals
Hi, Amon! Congrats on completing this challenge! 🎉 I definitely think mobile-first makes coding easier, and typically also makes the transitions between layouts looks smoother. 👍
Overall, good job on this one! You followed the design nicely, and I noticed you made some nice changes and tweaks since your initial screenshot. I know that hero image was tricky!
I do have a few suggestions:
- Your nav__button text gets lost when hovered on desktop. Although unlikely to happen on mobile due to touchscreens, the hover states for all your mobile nav links also get lost on hover as they’re the same purple as the background.
- You may also want to consider adding some max-widths to your paragraph tags. The ones on both the hero and the differences section get stretched out before hitting your tablet styles, as well as on large screens (1920px).
- Speaking of large screens, you might want to take a look at the hero section in particular and see if you can make some adjustments to stop the image from overflowing and covering up some of the “differences” section text.
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