Blog Preview Component | Tailwindcss
Solution retrospective
Using a package manager brings order to your project. You can install and use useful bundlers, formatters, linters, frameworks, and even other package managers. All this is recorded in your package.json, so you never lose track of your project. It is amazing!
What challenges did you encounter, and how did you overcome them?Trying to learn about all these technologies all at once is overwhelming. But still, my biggest challenge in this project is how to markup the content correctly so that screen reader users don't get lost.
What specific areas of your project would you like help with?If you see anything wrong with my code, especially with my HTML markup then please leave some feedback.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
This is missing the one essential functional element in the html. How would users access this blog when there is no link included? That is a critical fix needed.
Once that's added, you will need to make the whole card clickable. Usually that's done with an absolutelg positioned pseudo element on the link.
The other thing I notice is that you've used a h1 for the heading. But consider how this component would be used on a site. This kind of card would never be used to serve the main heading on a page, so you know it shouldn't have a h1. Use a lower importance heading level like h2 instead.
The last recommendation is to use rem not px for the components max width. This is to ensure the layout scales correctly for all users including those who have a different text size setting. Currently using pixels could lead to large text being squished into a very narrow card.
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