Social Media Dashboard with theme switcher using CSS grid and flex-box

Solution retrospective
I tried to speed run this but failed miserably. Writing html and setting things up alone took almost an hour. But overall, I'm happy with what I got. I tried using as many semantic tags as I could think of. Any kind of feedback or suggestion on how to improve would be highly appreciated. Happy Coding!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AlexKMarshall
This looks great and is nicely responsive. And the theme switcher works well.
In general, I would suggest that trying to rush things is not a very useful thing to do. Doing things well is far more important, and speed just comes with familiarity.
In terms of semantics and accessibility, there are a few things to fix.
The cards have a hover effect and a pointer for the cursor. But there are no interactive elements on them. There is an implication that clicking on this card will do something, but you haven't provided any means to do that (a button or an anchor). So this won't work. And in addition, it won't be accessible for keyboard users. This is an excellent article on how to build proper cards https://inclusive-components.design/cards/
You have incorrect alt text (e.g. the Facebook icon's alt text says Youtube)
Be careful with headings. A heading should be meaningful when read independently of other content. And your headings as a whole should read like a table of contents. Currently, you have headers like
<h1>1987</h1>
. This is meaningless on its own so doesn't work as a good heading.Be careful with the level of headings. You should only have one
h1
and then every other heading should follow the correct order.Careful with what screen readers will read. You've used alt text on the arrow icons. So currently they will read something like "Image Up arrow 12 today". That's better than just "12 today" but it would be better to read something like "Up 12 today". So you can make the icons have an empty alt, and use screen-reader-only text to get the right result.
Marked as helpful - @abdraoufx
Perfect Solution With The Determined Pixels :)
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