Design comparison
Solution retrospective
I did a mobile first approach where I used flexbox for everything except the 4 images under 01, which was done with grid. My reasoning for this was that I imagined flexbox to be more suitable for the main layout than grid. For example, flexbox with the desktop hero image and description was easily achievable, where I used order to put the two images on both ends, and the text in the middle.
Next time I might try grid. Please let me know if you think grid is better for this layout, and why.
What challenges did you encounter, and how did you overcome them?The most challenge I went through was figuring out how to code out the footer image with the blue overlay. I solved it by using picture and source elements in html rather than css background-image (for responsive reasons), and adding a background-color in css for the footer selector.
I also had a bit of trouble planning out how to code the hero image for the desktop view, but I solved it by using display: none;
Please let me know if grid was a better choice for this challenge.
In addition, I feel like my media query may have a lot of redundancy. If there's better ways to code responsive sizing, please let me know. If there's any other area where I could use more work on or I should change, please let me know as well. Thanks for your time!
Community feedback
- @Dev-MV6Posted 7 months ago
Hi there 👋, great job on completing the challenge; your solution looks really good.
Regarding your question about whether it's better to use Grid instead of Flexbox for the general layout of the site, I'd say the way you approached it this time is totally valid and appropriate for this specific case. You could have also used Grid if you wanted, and it would have been totally okay as well; I think you can choose the one you feel more comfortable working with.
Personally, I don't like to use Grid when building simple layouts because Grid layouts usually require more configuration to achieve the same level of responsiveness and flexibility that Flexbox offers you by default (saving you some lines of code). So, I tend to leave Grid for more complex layouts.
I hope you find this helpful. Please let me know if you have any further questions; I'd be more than happy to help.
Marked as helpful0 - @alberto-rjPosted 7 months ago
👋 Hi, yinnie!
👏 Congratulations on investing your time and taking your frontend skills to the next level with the Meet landing page challenge.
I have a few suggestions that could help you improve your solution to this challenge:
Use the Lighthouse extension: If you don't already use it. It can help you with best practices, performance, accessibility and SEO for your next projects.
Your solution has contrast errors: Low-contrast text is difficult or impossible for many users to read. You could avoid these issues by using the Accessibility Insights for Web extension.
Your links are not crawlable: Search engines may use
hrefattributes on links to crawl websites. Ensure that thehrefattribute ofaelements links to an appropriate destination. In your case, you could avoid these issues by creating empty links, adding thehref="#"attribute for eachaelement.Avoid use images not appropriately-sized: Images that are appropriately-sized to save cellular data can improve the loading time of the page. Learn more here. Convert your images to next-gen formats, such as WebP or AVIF because those formats often provide better compression than PNG or JPEG. Learn more here. You can solve this problem here.
Keep learning, coding and sharing! 🌟
Happy coding! 🚀
0
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