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

Responsive landing page with Flexbox

Dom B 190

@dombrga

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is a mobile-first approach. Any comments about how I implemented this and ways for improvement is highly appreciated. Also on the error message, if any has a suggestion or what is their own way of doing this, feel free to share as well. Thank you!

Community feedback

ROCKY BARUA 1,090

@Drougnov

Posted

Hello @dombrga, Great job. I like how you added different error messages for empty and invalid emails. And good job on the responsive part too.

However here are something you might wanna consider:

  • The Facebook icon doesn't match the size of the other icons. Add some padding to it.

  • To fix accessibility issues, add aria-label='something like this' to those a tags.

  • To fix Html issues, use div instead of section. Cause you need headings while using section or article tags.

Overall, it's looking great. And it's my favorite solution to this challenge. Have a good day :)

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