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

Responsive page using Flexbox, Grid and %

@Nick-Gabe

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Can someone give me tips for class names and maybe feedback about my code in general? Im entering the front-end area and any help would be awesome.

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Nícolas, congrats on completing the challenge!

I had a look at your solution and I have a few suggestions for you:

  • for the internal spaces of the text__container class of the elements try to use the padding instead of the margin
  • To center the cards on the page try using Flexbox, it can help you better: give the flexbox and height properties to the body and remove all margin from the .container class.
  • Note: Flexbox aligns to the size of the parent container. You can use the 100vh measurement for the height.
  • Attribute alt not allowed on element source
  • Element img is missing required attribute src

Overall you did well :) keep it up

Hope this help ;)

Marked as helpful

1

@Nick-Gabe

Posted

@denielden Thanks for the help, Daniel! I'll apply your recommendations :)

1

@mgsepiol

Posted

For the classes names, my approach is always to choose something close to what i am styling. Something that can quickly make me thing of it !

Marked as helpful

1

@mgsepiol

Posted

@mgsepiol First you group all the elements by their nature or what they have in common. Next you can think of class names based on those groups

Marked as helpful

0

@Nick-Gabe

Posted

@mgsepiol Interesting, I will keep that in mind next time. Thank you :)

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