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

Ping Coming Soon Page - Flexbox, Fluid Typography, CSS Only Validation

Anna Leighβ€’ 5,135

@brasspetals

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


Played around with min() for the typography, logo, and some margins. Seems pretty useful, and I'd love to explore max() and clamp() in the future. My personal challenge for this one was to try and not use any media queries. However, I couldn't find a way around them for the form. If any of you know of a better way, or have any other feedback, please let me know!

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hey, Anna! πŸ‘‹

Wonderful job, once again! πŸ‘

Everything looks great! And I like the fluid typography and the hover states of the SVG icons! πŸ˜‰

The only way I can think of making the form responsive without media queries would perhaps be to use CSS grid for the container or wrapper and the auto-fit or auto-fill properties to break into two rows when there isn't enough space for both the input and the button to remain in the same columnβ€”but I have yet to really play around with that functionality myself! πŸ˜†

I small suggestion would be,

  • Setting the cursor property to pointer for the button.

Your code looks good! I noticed you're separating element and modifier classes from BEM quite nicely! 😊

As always, keep coding (and happy coding, too, of course)! 😁

2

Anna Leighβ€’ 5,135

@brasspetals

Posted

@ApplePieGiraffe I really need to start using Grid more - I know I rely too heavily on Flexbox. I guess it's time to try out that testimonials challenge! I also wondered something similar with auto-fit/fill, which I agree is probably the best bet - but then there's the padding/size change between the inputs to consider too. Ah, well - what's a few lines of media query I suppose. πŸ€·β€β™€οΈ

Nice catch! I had added the cursor change to the social icons, but apparently missed the button. πŸ€¦β€β™€οΈ

πŸ˜‚ My sad, sad excuse for BEM. Glad to hear I'm slowly improving!

Thanks for always taking the time out to thoughtfully comment on my solutions, even more so as you're often the only one. I really appreciate it!

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@brasspetals

I'm glad to hear the feedback is helpful! 😊

I just found this sweet article fromβ€”guess whereβ€”CSS tricks!β€”on how to make a responsive card component without media queries. It actually uses flexbox and the flex-wrap and flex-basis properties (along with the clamp CSS function) to make a pretty cool responsive card.

You could check it out and perhaps it could help out or give you some ideas somehow! 😁

1
Anna Leighβ€’ 5,135

@brasspetals

Posted

@ApplePieGiraffe

CSS Tricks is truly the font of all knowledge. πŸ™

That article is great - thank you so much for the share! Because of it, I was able to go back in and not only improve the responsiveness of the form but do it in much cleaner way. Thanks again - you're the best! πŸ‘

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@brasspetals

Haha, no problem!

Keep on coding! πŸ˜€

1
Florian Pereiraβ€’ 280

@FloPereira75

Posted

Well done, exactly as on the model! I'll try to follow in your footsteps!

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