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 Card Component Using SCSS

@folathecoder

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


Hi Devs! 😎

It has been a while since I took up a challenge. I have been learning JavaScript and Git!

This is a simple challenge I completed to get back on track.

Please, let me know what you think!

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Nice work, Fola! Definitely, a good challenge to get back into the swing of it. I hope you enjoyed looking more at JS and Git!

Your solution looks great. My only two small suggestions would be:

  • Be sure not to capitalise words in your HTML. Some screen readers will read these words letter by letter, making them inaccessible. Instead, lowercase them in your HTML and use text-transform: uppercase; in your CSS.
  • There's a hover transition on the image at the moment. I would stay away from hover transitions on non-interactive elements. It's not a huge issue for this project, but something to keep in mind for the future 🙂

Keep up the great work!

1

@folathecoder

Posted

@mattstuddert Thank you very much Matt! I appreciate the feedbacks and I have made all the changes you suggested. I have also read up articles on why capitalization of HTML texts is not a proper way to go.

Thanks alot Matt!

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