Skip to content
Submitted 8 months ago

Ping single column coming soon

Lo-Deck•2,790
@Lo-Deck
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Hi here is my solution for "Ping single column coming soon". I used HTML, CSS, Flex, Grid, Mobile-first, JS.

What challenges did you encounter, and how did you overcome them?

I used a span and a listener to display the error message with innerTextand an if to validate the form if(!myForm[0].validity.valid).

What specific areas of your project would you like help with?

Thanks to leave any comment if you see something I can do better.

Community feedback

  • Abouelhouda Iliass•480
    @ilyesabPosted 8 months ago

    Great Work! I think the only thing that seemed a little bit odd in layout terms was that you have no margin around the content on Mobile. so the logo and the copyright sticks to top/bottom of the view port looks a little bit odd.

    You created the spacing mainly using margin and used the position property to position the error message. all looks good for me using the validity API was a great idea.

    Maybe something to try next is that your design doesn't change from 0px width to 1200px. it's static as you used a lot of max-width I understand that was intentional. but it'll be great if the design changed to best utilise the available space in the view port.

    Marked as helpful
    1
    Lo-Deck•2,790
    @Lo-DeckPosted 8 months ago

    Hi @ilyesab, thanks for your feedback.

    I've just tried on my mobile, it looks weird with no margin(couldn't see that with browser tools). It's better with a margin.

    1
    Abouelhouda Iliass•480
    @ilyesabPosted 8 months ago

    Hi @Lo-Deck, glad to be of help.

    0
    Abouelhouda Iliass•480
    @ilyesabPosted 8 months ago

    Hi @Lo-Deck, glad to be of help.

    0

Please log in to post a comment

Log in with GitHub

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