Stats Card with HTML and vanilla CSS

Solution retrospective
I found it difficult to get the picture to be responsive, do you have any suggestions for that? I've had similar struggles with the images in other projects.
Also, let me know if you have any tips for how to make this project more accessible. I'm looking to improve in accessibility.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hi, Adam! 👋
it has been a while since you submitted the last solution. It is great to see you completed another challenge! 😄
Regarding the image, you've done a great job by using the
picture
element. But, settingmedia="(min-width:1440px)"
for the desktop layout is too late. The same goes for the media query. 1440px for the two-column layout is too late. So, don't use the sizes from thestyle-guide.md
as the breakpoint. I recommend starting to use media query once the current layout is broken or in this case it has enough room to be two-column layout.Also, the image is a decorative image. It doesn't contain any information. So, I recommend leaving the
alt=""
empty.The stats should be a list element and they are not headings. I like to think of the HTML page as a document. So,
h2
is a sub-title,h1
is the main title and each document commonly has one main title, etc.- 10k+ companies
- 314 templates
- 12m+ queries
I recommend setting the
max-width
for thecard
element with therem
unit instead of the percentage unit. Currently, with85%
max-width, the card will keep growing as the user's screen size grows.I hope this helps!
Marked as helpful
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