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 Dark Landing Page

@aaronpaulgz

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is welcome :D Thanks for your feedback

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hi, Aaron Gonzalez! 👋

Nice to see you complete another challenge! 😀 Good job on this one! 👏 Your solution looks good and is responsive! 🙌

I suggest,

  • Making sure the navigation in the header of the page doesn't become too stretched when the layout switches from desktop to tablet/mobile.
  • Taking a look at your solution report and trying to clear up some of the errors that are there. You should, for example, be adding headings to each <section> tag that you use to properly identify those sections of the page and make sure that the children of any <ul> tags are <li> tags. If you want to create a list of links, wrap the anchor tags inside <li> tags (not the other way around).
  • The text for some of the elements of the page (such as the testimonial cards near the bottom of the page) looks a little small. I suggest increasing their font-size a bit to make them easier to read. 😉

Hope those tips help. 🙂

Keep coding (and happy coding, too)! 😁

1

@aaronpaulgz

Posted

Thanks for all your incredible feedback. This help me a lot :D Thanks for everything :D

1
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

@aaronpaulgz

NP!

One more thing I was going to mention is that you don't have to transition every section of the page to a mobile-friendly layout at the same width (like 1199px, in this case). You could use multiple media queries to adjust elements and different screen widths to make your page respond even smoother. For instance, since certain sections take up less space (such as the features and CTA sections), you could use a media query at around 900px to transition them to a mobile-friendly layout at that point. That way, they'll be less empty space around them when the layout first changes, and I think the page will look a little nicer on desktop/tablet devices. 😉

Anyway, have fun coding! 🙂

Oh, and hey, if you found these comments helpful, an upvote would be appreciated! ;)

1

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