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

Stats Preview Card Component

P

@vanessa-ayer

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


I've just completed my third front-end coding challenge via Frontend Mentor 🎉

SO much fun!

This is the first time I used CSS grid and it worked perfectly. I wasn't sure if I should have used CSS flexbox in this scenario. What did you use?

Any and all feedback is welcome :)

Community feedback

P. Ricardo 2,370

@pRicard0

Posted

Some HTML tips

  • Instead of using the tag <span> for the "insights" text, I think you can use the <em> tag. The <em> tag is used to define emphasized text. The content inside is typically displayed in italic. A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
  • All images must have an ALT attribute. However, for decorative images, the ALT attribute should be empty. Screen readers and other technologies will recognize an empty ALT tag, identify the image as decorative and skip over it. I think the image on the right is just decorative.

CSS tips

  • You need to learn how to create responsive projects. You need to use breakpoints and etc...

Marked as helpful

1

P

@vanessa-ayer

Posted

@pRicard0 Thank you for the useful feedback! I will update some of my code and use these notes for future projects - much appreciated. Very true about making my projects responsive by using device breakpoints. I'm going to work on that asap.

Many thanks! Vanessa

1

@Alessandro-jpg

Posted

@vanessa-ayer it's a verte good design i really enjoy when i watch it i have the same trouble with the responsive design but wey need to get better on that👍

1
P

@vanessa-ayer

Posted

Thank you Alessandro! We got this! @Alessandro-jpg 😊

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