Design comparison
Solution retrospective
Using an image as a design guide can be really stressful, colors are not always what they seem to be
What challenges did you encounter, and how did you overcome them?em
and rem
units were confusing. I had to check them up
Mobile responsiveness, how best do you suggest I learn mobile-first approach?
Community feedback
- @kodan96Posted 6 months ago
hi there! ๐
The mobile-first approach is preferred by developers because usually mobile versions of websites has a simpler structure than the tablet / desktop / widescreen versions. Therefore, it's relatively easy to build this layout (compared to the other ones), since elements stack on each other vertically.
Modifying the mobile layout with
@media
queries is not that difficult, but you need to make sure you usemin-width
within your queries, otherwise they won't take effect or will override your mobile layout.You should also plan out the changes you wanna make on the page, and group your elements in a way that makes it possible to apply layout tools on them, making it easier for you to display them inline on wider screens.
Hope this was helpful ๐
Good luck and happy coding! ๐
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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