Skip to content
Submitted about 1 year ago

fylo-landing-page | flexbox | Grid Css| responsive

Karishma kanhar•210
@karishmak77
A solution to the Fylo landing page with two column layout challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Italo Marcelo•980
    @MarceloDevd3

    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 helpful
  • Rupak Mukherjee•1,370
    @hannibal1631

    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!!

  • Tharun Raj•1,330
    @Code-Beaker

    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 😄

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