fylo-landing-page | flexbox | Grid Css| responsive
Design comparison
Solution retrospective
I'm proud that I completed my challenge. It's not exactly the same, but I managed to get pretty close. I made the layout responsive for both phone and desktop, which feels like a big win. It wasn't easy, but figuring out the details and seeing it all come together was really rewarding. Now, I'm excited to tackle even more projects and keep improving.
What challenges did you encounter, and how did you overcome them?The challenge I encountered was making the layout, which was pretty difficult. But I managed to get it done and tried to match the given layout as closely as possible. It wasn't easy, but I'm glad I could pull it off. Figuring out the details and making everything fit together was a real test of my skills. Despite the hurdles, seeing the final responsive design for both phone and desktop was incredibly rewarding. Now, I feel more confident in taking on even tougher challenges in the future.
What specific areas of your project would you like help with?I still need help to make my layout exactly the same as the one given. If anyone can help me with it, I would be really grateful.
Community feedback
- @MarceloDevd3Posted 5 months ago
I think you made an awesome working with the sematics tags, but you could import you icons with this free framework, calls "Font Awesome" it's easier than use the <img> tag to import all your icons, but it's also a good way to finish your project, and with you CSS I'll let a tip about how you could fix I think that you problem is that you only create a midea query to @media (max-width: ) normally in my projects I used @media (min-width: ) I will let a link about it : https://www.youtube.com/watch?v=p3k_IrXLNRc, I hope that this tips would help you with you problem.
Marked as helpful0@karishmak77Posted 5 months ago@MarceloDevd3 Thanks for your suggestion! I'm really grateful and will do my best to follow it and I'm excited to see how things turn out.
0@karishmak77Posted 5 months ago@MarceloDevd3 Thanks for the video link you suggested! It helped me a lot. In that video mentioned that starting with a mobile approach makes it smoother when transitioning to the desktop, and I found that advice really insightful and also did the same thing my new challenge. I'm already seeing the benefits of this approach. Once again, thanks for your help i really appreciate it!
0 - @hannibal1631Posted 5 months ago
This looks fantastic. Some minor improvements can be done for sure. But you're making more challenging webpages, which is a milestone in itself. Keep playing with the font-sizes and navbar placements and it'll be perfect. Great job buddy!!
0 - @Code-BeakerPosted 5 months ago
Hi there, you've done a great work with this challenge! Congratulations 🎉
I have visited your website and it looks impressive. You've done your best to get your site to match the design. However, I noticed some little things that could be improved in your solution
- The font size is too small. It's almost unreadable for the navigation links in the navbar and the footer and also for the "See how Fylo works" link.
- Use CSS variables/custom properties to make your code cleaner and reusable.
- [Optional] For complex layouts like this, grid can be easier to use for all the containers.
- If the media queries confuse you, there is a new range syntax for creating media queries. Example: for screens below the width 650px,
@media (width < 650px) { ... }Learn more:
Hope this is helpful to you 😄
0@karishmak77Posted 5 months ago@Code-Beaker Your suggestion really helped me a lot. I wasn't confused at all using this (width < XX ) property, and it made a big difference. I even applied this property in my New challenge, and I'm excited to see how it turns out. I hope you’d like it!
1
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