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 theme landing page

Kevin Canlasā€¢ 225

@kvncnls

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


Demolish my code!

Also, I couldn't figure out how to get the custom error message for the form. Could anyone help me with that? Thanks in advance!!

Community feedback

P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

Hey, there, Kevin Canlas! šŸ‘‹

Nice job on this challenge! šŸ‘ Your solution looks good and responds nicely! šŸ‘

In addition to emestabillo's helpful feedback, I just suggest adding a max-width to the header of the page so that it doesn't become too wide on extra-large screens. šŸ˜‰

You're doing great and improving with each challenge! šŸ™Œ

Keep coding (and happy coding, too)! šŸ˜

1

Kevin Canlasā€¢ 225

@kvncnls

Posted

@ApplePieGiraffe Thank you APG! I'll work on that!

0
P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey Kevin, looks pretty good! No responsive issues. Here are a few things I saw:

  • Missing anchor tags for navbar items

  • Buttons and links typically have hover states for UX. Those on the footer which have it, could use transitions to make the change in state smoother. Phone and email - better as links too.

  • I'm curious: Why was id used in the sign-up section? It's currently not used for JS or page scrolling

  • BEM naming: I think it's better to keep it at two levels deep. It also got a little verbose, for example footer__container__main__logo . Not sure if you were going for a modifier there, but if it were me, I might just keep it at logo.

  • For custom error messages, you'd definitely need to add JS. Insert the error message in your html and hide it with visibility or opacity and reveal when needed. This would ensure there would be no shifting of adjacent elements when the error message is shown, vs inserting it at the event of an error.

Hope this helps :-)

1

Kevin Canlasā€¢ 225

@kvncnls

Posted

@emestabillo Thank you!! I have to work on all of these things, thank you so much!!

1
Dave Hillmanā€¢ 830

@dhillman1989

Posted

Great effort pal. not looking at the code, but the page is very close to the design minus some sizing issues. Well done.

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