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

mobile-first flex feature-section

Rogelio 45

@rogedev

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback will be appreciated

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hi, this looks pretty nice (viewing on mobile)....

Maybe adjust the heading font sizes a little as they look a bit off from the design. They're a little similar in size so it's losing that perceived sense of content hierarchy.

Remember you can't have two h1s on a page. For this, I'd probable have one h1 but use classes on spans inside to style the two parts of the h1.

Also be careful with css ordering. At the moment, you're loading your reset after your own styles because of the order in the html head. You're also downloading two css resources which is bad for performance. I recommend copying or importing resets into your css file at the very top and only loading up one css asset in the html.

I hope that's helpful to you. Keep on coding

1

T
Grace 29,310

@grace-snow

Posted

ps. How you've done this with flex is fine, but this challenge is ideal practicing ground for css grid. I recommend if you have time to create a branch or fork the repo where you use grid for layout instead

1
Rogelio 45

@rogedev

Posted

@grace-snow thanks for reviewing my code, appreciate that. I will keep learning😎

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