Blog preview card with cursor interactability
Solution retrospective
I am quite content with how close my solution is to the design and if I had to do something differently, then it would be making sure that properties that are the same across different tags are given their own tags i.e
h1, p, .card {
color: blue;
}
Please log in to post a comment
Log in with GitHubCommunity feedback
- @TedJenkler
Hi @emeraldknytt,
Nice project! I noticed a couple of things that could be improved:
Semantic HTML: Instead of using multiple <div> elements, you should consider using semantic HTML. For instance, your card could be wrapped in a <main> tag, and you could purge most of the unnecessary <div>s. Using Flexbox with flex-direction: column inside the card would give you a cleaner design and improve readability, SEO, and accessibility.
Heading Usage: The <h1> tag is meant for page titles and should be used only once per page. While you’ve correctly used it just once here, in smaller projects or components like this, you can skip using <h1> and go with an <h2> instead. If you had multiple cards on the same page, using several <h1> tags would violate the one <h1> rule.
Use of <time>: When displaying a time element, consider using the <time> tag to further improve accessibility and readability.
Keep up the great work!
Best, Teodor
Marked as helpful - @MatPawluk
Great job! 😊 Here are a few suggestions to improve your code:
The settings width: auto and height: 960px are generally correct, but it's worth considering responsiveness. You might want to use relative units (e.g., vh for height) or media queries to adjust the height for different screen sizes.
The styling of the element with an id in CSS (#description) is valid, but it's worth noting that id selectors have higher specificity than classes. This means that if you need to override the style for this element in the future, styling with id may be harder to modify. Instead of using id, consider using a class.
The HTML structure is correct and well-organized. However, it’s advisable to add alt attributes to all images to enhance accessibility.
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