Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo landing page with two column layout solution

Aldi Joko 410

@aldijoko

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


my difficulty for finish this challange, as usual my trouble when i want to design mobile there is any tips or trick how to start? should i design for desktop first or maybe start from mobile design first?

or tips for responsive that should i learn for understand

Community feedback

@SurajHadage

Posted

My suggestion to shorten your HTML is use nav separately, not inside header. One <img> & <ul> tags will be two flex items to justify space-between. Then use <header> tag, One <section> tag for leftside content & one <figure> tag for image. This way you have two child's two play with. After use <picture> tag for curve image, It will also shorten your CSS. Search for <picture> tag. Now your curve image is responsive. Then use <main> tag (the main challange). Take one <section> tag for left side & <figure> tag for main image. Make testimonial in a <div> tag.

<nav> <img></img> <ul> <li></li> <li></li> <li></li> </ul> </nav> <header> <section></section> <figure></figure> </header> <picture></picture> <main> <section> <h2> <p> <p> <div> </section> <figure></figure> </main> <aside></aside> <footer></footer> Now HTML code has shortened, fewer the HTML fewer the CSS.
0

Please log in to post a comment

Log in with GitHub
Discord logo

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