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
Request failed with status code 502
Not Found

Submitted

A two column layout landing page:- mobile first & responsive

Zeek 430

@odkpatrick

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


HTML: Any tips to improve semantic use/improve accessibility.

CSS: Possible optimization

Any feedback & suggestions are welcome.

Community feedback

Alex 1,090

@AlexBueckig

Posted

Hi Patrick,

your solution looks great and everything scales nicely! 😃

Without having looked at you code what I immediately noticed is that it is hard to tell for users that your buttons are actually clickable. I'd recommend you to just add a cursor: pointer; to your button to indicate that you can actually click them. Maybe even a hover-state would look great and give the user further indications that these elements are actually clickable.

1

Zeek 430

@odkpatrick

Posted

@AlexBueckig Thanks a bunch, I'll update the repository.

I totally got overwhelmed with the amount of CSS while styling for desktop that by the time I got done with the positioning I assumed all was done.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

Hi Patrick, you've done an awesome job on this challenge! The only small tweaks I'd make with the HTML would be to make the .section-access-container and .pitch-container elements section elements and change the sections within to div elements. section is typically used as the outer layer of related content on the page.

As for your CSS, it looks really well structured. Keep up the great work!

0

Zeek 430

@odkpatrick

Posted

Thank you Matt, I'll get it done.

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