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
@K4UNG
Posted
@AlexKMarshall Thank you for your very detailed feedback. I thought I had to use the h tags depending on the size of the content. I'll try to fix all of them. Again, thank you. It's been really helpful.
@K4UNG To get different sizes for your headings you can just use CSS. The size (from css) and the level (h1, h2, h3 etc) of the heading are independant.
Marked as helpful
