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

Base Apparel Coming Soon - Grid, Flexbox, CSS Only Form Validation

Anna Leighβ€’ 5,135

@brasspetals

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using Grid, so I'm sure my code is a bit of a mess (not to mention the abundance of media queries). Feedback is very welcome!

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Oh, nice, Anna! (Just about pixel-perfect!)

I see you also used some CSS combinator and pseudo-class magic to make the form validation only-CSS! 😎

Your page responds very nicely, too! πŸ‘

Just one thingβ€”rather than use 3 separate <h1> tags for the main heading, I think your HTML would be slightly more semantic if you used one <h1> tag for the heading (since the entire heading is a single heading, not three) and a <span> tag or something to style the first word of the heading. You could then control the line-breaking by setting a max-width on the <h1> element or its container.

Keep coding (and happy coding, as well)! πŸ˜„

3

Anna Leighβ€’ 5,135

@brasspetals

Posted

@ApplePieGiraffe Haha, that was a pretty janky solution, wasn't it? πŸ˜…πŸ˜‚ Thanks for the suggestion! I appreciate you taking the time to actually look through the code! I'll definitely go back and change the heading.

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