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

Card component using HTML and CSS

Chloe 20

@chloeafp

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


Hello,

I think I've done pretty well with the challenge. But I am always open to any feedback! :)

So, do you have any feedback on the HTML or CSS? Thank you!

Community feedback

@peterhannell

Posted

Hi Chloe, I'm a fellow learner but I can offer some feedback/advice.

Firstly make sure you include enough 'landmarks' in your HTML - these are tags like main nav footer etc., that define sections of content in your page which greatly improves accessibility for assistive navigation technologies such as screen readers. For example, you should wrap your 'attribution' class in a footer tag.

You should also try to make your class names a bit more descriptive; for instance 'header' is a very generic and could refer to any header section within your page. This could be somewhat confusing when it comes to maintaining code later on. Maybe something like 'card__header' would be more appropriate just as an example.

Finally, try to avoid the use of px for sizing everything in your CSS. You can certainly use it in some cases but most of the time will you want to use rem (and also em in specific cases) which is scalable and respects the users' browser font size preferences.

But other than that you've done a great job! I hope my comment was helpful.

Marked as helpful

1

Chloe 20

@chloeafp

Posted

@peterhannell Thanks for your advice. Everything makes 100% sense!

1
Ronaldo 440

@marckesin

Posted

Hi Chloe. Your solution is pretty good on desktop mode but it doesn't have a mobile mode. You could implement media queries to solve that.

1

Chloe 20

@chloeafp

Posted

@marckesin Thanks for your feedback!

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