Design comparison
Solution retrospective
made this with love
What challenges did you encounter, and how did you overcome them?I'm kind of skeptical on doing the mobile first, so I still did desktop first and it took a lot of changes in media query is this ok? please please check my code and recommend a better way thank you!
What specific areas of your project would you like help with?Did you do mobile first? how did you do it?
Community feedback
- @R3ygoskiPosted 5 months ago
Hello Louise, congratulations on completing your project! It turned out identical to the proposed design—well done.
Regarding your question about mobile-first, I personally find this approach more practical nowadays. So, the best tip I can give you is to start by designing for mobile and, once you’re done, add a
@media
query —usually like this:@media (min-width: 768px)
— and then proceed with the desktop design.(Note: Instead of 768px, you can also use 1024px or even 1440px.)
Marked as helpful1 - @devis4wdPosted 5 months ago
Honestly, I'm still struggling too with the mobile-first approach. I still find the other way (desktop first) easier for building websites from scratch. I took this exercise as an attempt to get more familiar with it. On the other hand, consider this: If you stick to the mobile-first approach sometimes you'll be able to save some time and effort (cause desktop versions of websites are not always required nowadays). This is not true if you stick to the desktop-first approach ;)
Marked as helpful1@atheenaoteyzaPosted 5 months ago@devis4wd thanks I thought I was the only one struggling with it haha, maybe I'll attempt doing the mobile first too and hopefully would see how is it more efficient
1@devis4wdPosted 5 months ago@atheenaoteyza you're definitely not the only one who's struggling with that ;)
1
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