Skip to content
Submitted 3 months ago

Blog preview card - practice 2

Larisa•130
@LarisaKampe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

For some reason even when the margin was set to 0 in the that contained User image and User-Name it still somehow put some margin in the user name? Anyway i had to set margin-top and margin-bottom separately to solve this. I am not sure why but it worked 😅

Community feedback

  • I feel Struggle•210
    @Kein-InternetPosted 3 months ago

    Good job on getting your solution close to the design plus the active state!

    Here are a few suggestions for your HTML:

    • Replace your <section> tag with a <main> tag. This is because every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section.

    • Make sure your class naming is consistent throughout your code, to make it easier to maintain and for others to follow, as I noticed inconsitencies with your classes (e.g, img-card and the div card below is card-text). Also, it would suffice to write btn instead of btn-main as replacing the <section> tag with the <main> tag will make it more obvious for other looking at your code.

    • It's vital to be descriptive in the alt part of your image <img class="user-img" src="./assets/images/image-avatar.webp" alt="user">. A good alt might be the name of the user.

    • I would use <h2>, you can get away with not using <h1> as the card would most likely be part of a larger site where there would already be a <h1> title in use but I would not use <h3> as screen readers use these heading tags to help navigate users of limited visibility. On that note, using the <h6> is not necessary and can be replaced with a regular <div> tag.

    For your CSS:

    • Use the rem unit instead of px when determining font sizes, rem will automatically adjust to the user's deafult browser settings and so it will size according to what it comfertable for them and mitigate the issue of user having to manually adjust the screen to be comfertable.

    • I would add a padding: 1rem to the <body> so the card isn't touching the sides of the screen.

    Keep up the good work.

    Marked as helpful
    0
    Larisa•130
    @LarisaKampePosted 3 months ago

    @Kein-Internet Wow! Thank you so much for your feedback! This is the first comment ever for my coding so I'll remember it forever. It really is a fun journey! Cheers╰(°▽°)╯

    0
    I feel Struggle•210
    @Kein-InternetPosted 3 months ago

    No worries, glad to be of help!

    0

Please log in to post a comment

Log in with GitHub

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