Submitted almost 4 years ago

Responsive page using Media Queries, Grid, and Flexbox

Nicholas• 80

@nicholask98

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my first attempt at creating a responsive page. This is also the first time I've posted any of my code anywhere but github. Genuinely any feedback would be greatly appreciated.

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 4 years ago

Hey, congratulations upon completing your first Frontend Mentor challenge, Nicholas! 🎉

Good work on this one! Your solution looks good and responds nicely! 👏

I suggest using a single <h1> tag for the heading of the page (since it is really just one heading, not two separate headings). You can easily use a <span> tag to style the different parts of the heading differently. 😉

Also, a little more space between the top of the page and the heading (as in the original design) would be nice.

Keep coding (and happy doing, too)! 😁

Nicholas• 80

@nicholask98

Posted almost 4 years ago

Hi ApplePieGiraffe! Thank you for the feedback. I took your suggestions and worked on them a bit more and I like the result a lot better now. Thanks for your time :)

Web Frog• 1,840

@MasterDev333

Posted almost 4 years ago

Awesome, you did a great job. You used CSS-Grid correct way. However, it would be great if you remove margins of body tag and container. If you add some spacing for container, use paddings rather than margin. Hope this helps. Happy coding~ :D

Nicholas• 80

@nicholask98

Posted almost 4 years ago

Hi MasterDev! Thanks for the suggestions! I added some spacing using paddings rather than margins and I like the way it turned out a lot better. I appreciate your time!

Please log in to post a comment

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