Design comparison
Solution retrospective
- Are there ways I should be improving accessibility?
- Semantically, what is the best tag to use for something like "Greg Hooper" here or "Published 21 Dec 2023"? Should it just be a non-descriptive span?
Community feedback
- @jboysPosted about 2 months ago
Hi Jared,
Nice solution! It looks super close to the target design and your code looks clean and was easy to read.
A couple of sizes were slightly off (nitpicking 🙈):
- The card's drop shadow should be 8px rather than 5px (
shadow-[8px_8px_0_0]
) - The avatar should be 32x32px (
size-8
rather thansize-6
)
Also, in your
tailwind.config.js
, I'm not sure why you defined the base font size to be 16px. I thought this was the default by Tailwind?To improve accessibility, add an alt tag to the author's image (e.g.
alt="Author Greg Hooper"
) and consider a more descriptive alt tag for the article image (e.g.alt="Illustration representing HTML and CSS concepts"
).To improve semantics, perhaps wrap the category tag and publication date in a header and the author details in a footer tag. The date should be in a time tag (
Published <time datetime="2023-12-21">21 Dec 2023</time>
).Also, I would extract the card into its own div rather than main to make it more reusable, as it is unlikely the card would be the only content on a page.
Marked as helpful1 - The card's drop shadow should be 8px rather than 5px (
Please log in to post a comment
Log in with GitHubJoin 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