Skip to content
Submitted over 1 year ago

Blog Preview Card

Vanessa Ayer•100
@vanessa-ayer
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I've just completed my seventh front-end coding challenge via Frontend Mentor 🎉

Initially, I had some trouble figuring out why the custom cursor I added wasn't working, but after doing some research I realized that the cursor file was too big. I resized it to 32 x 32 and it worked! If anyone else needs that information, I hope it is helpful.

As always, any and all feedback is welcome :)

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • raya•2,870
    @rayaatta

    Hello 👋Vanessa Ayer, Cool 😎 solution.

    I have some simple tips you make ght wanna need.

    1 The avatar image should have an alt attribute with the name of the person on the pic.i.e alt="Greg Hooper" Alt attributes should not contain words such as picture,photo,image,headshot etc as these are indicated by the image tag itself.

    2 I noticed font-size: 16px; in your code. You should never use pixels when setting font related properties. Setting font sizes in pixels causes accessibility problems with people who adjusted their default font sizes on their computers.

    The best units for setting font size are relative units such as rem and em which can adjust with the user preferences. Checkout this article why font size should never be in pixels

    3 In your html I noticed

    <p class="published-date">Published 21 Dec 2023</p>

    When a screen reader is reading the above it will pronounce 21 Dec 2023 as it is. This should be wrapped in

    <time datetime="2023-12-21">21 Dec 2023</time>

    This is machine readable therefore it is more accessible. To find out more about the time tag check out this article📑.

    I hope this helps 🙃

    Your solution looks great 😉

    Happy coding ✌️

    Marked as helpful
  • P
    Øystein Håberg•13,260
    @Islandstone89

    Hey, well done :) Here are a few suggestions.

    HTML:

    • The main heading on this card is "HTML & CSS Foundations", so change that into a <h1>. "Learning" is not a heading, it's more like a "subject-tag" - it could be a link, or just a <p>.

    • I would wrap the date in a <time> tag and add a datetime attribute, like this: <time datetime="2023-12-21">21 Dec 2023</time>.

    CSS:

    • It's good practice to include a CSS Reset at the top.

    • Remove margin: 0 auto on .container - it is already centered using Flexbox on the body.

    • max-width on .container should be in rem.

    • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

    • Media queries should not be in px, but in rem.

    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