Straight-forward TailwindCSS + HTML Solution

Community feedback

• 

  P

  Josh Boys•180

  @jboysPosted 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 than size-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 helpful

  1