Skip to content
Submitted 4 months ago

Responsive Blog Preview Card

Joewanaaa•80
@Joewanaaa
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?

On my very first challenge (QR-code) somebody told me to use sematic HTML, to use section or article for the approach instead of the divs. On this second challenge I did the feedback of what I was given. My problem is I'm not sure when to use the or . I read a lot of which should I use of the two.

What specific areas of your project would you like help with?

Please don't go after me as I am still learning. I have tried my very best and I am open for more feedbacks. Enlighten me on when to use and , and .

Community feedback

  • haquanq ®️•1,585
    @haquanqPosted 4 months ago

    Yo @Joewanaaa,

    My last comment has one important point which is keep your HTML simple and clean (avoid unnecessary wrapping, especially div wrapping). But instead you have replaced all div with section 😭

    So to understand if you are using redundant wrapping, just try to delete one section and ask yourself 2 question:

    • Does the layout stay the same?
    • Does the content still semantically meaningful?

    As section or article must have a heading h1-h6 along with it and some content next to the heading which will make the section/article become meaningful. You are nesting section (4 times) and it is unnecessary, the article pretty much served the purpose.

    You can find this solution on my Github repo if you would want more references!

    Keep it up and happy coding!!!

    Marked as helpful
    0
    Joewanaaa•80
    @JoewanaaaPosted 4 months ago

    @haquanq i know right! When you thought I understand what you told me last time turns out I just changed the divs into section 🤣I made it even worst! 😭

    But seriously, I really appreciate this! Thank you so much for your feedback 🫶🏼 and I will definitely look into your Github repo for references. I still have a lot to learn please don’t get tired giving me lots of feedback 😆tysm!

    0
  • Joewanaaa•80
    @JoewanaaaPosted 4 months ago

    Omg! what I mean is enlighten me when to use section and article, p tag and span.

    thank you!

    1
    haquanq ®️•1,585
    @haquanqPosted 4 months ago

    @Joewanaaa your section nesting for this challenge is deeper than my relationship with my family (just kidding). I am writing some feedback!

    0
    Joewanaaa•80
    @JoewanaaaPosted 4 months ago

    @haquanq this is so funny! 😭😂 i was hoping you’ll give me another feedback and you diiiid! Haha thank you and please i’m so noooooob. This is so embarrassing!😂😂

    0
    haquanq ®️•1,585
    @haquanqPosted 4 months ago

    @Joewanaaa no worry, i was a noob too!

    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