Skip to content
Submitted 8 months ago

Blog Preview Card Solution (using HTML & CSS)

MariaDoesCoding•130
@MariaDoesCoding
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 are you most proud of, and what would you do differently next time?

I'm proud that I finished this project in a single day. I wanted to do this project before, but when I tried it, I failed. But, I decided to try it again today and it was successful.

What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?

I want to know if my code is semantic HTML or not.

Community feedback

  • Abdallah Ali•300
    @boda0077Posted 8 months ago

    Hi @MariaDoesCoding ,

    Great work looks amazing it is so close to the main design.

    what can see in your code you used <main> element inside HTML file that mean your code is semantic HTML.

    Different between semantic and non-semantic HTML :

    1- non-semantic HTML they do not have any meaningful content and also uses a lot of div element in your project without using any of semantic HTML like [header , nav, main, footer , . . .].

    2- semantic HTML means "relating to meaning" means using HTML elements to structure your content based on each element's meaning, not its appearance.

    if you wanna place Card in the middle of the screen use in body css height: 100dvh ;

    I hope I helped you, even if just a little.

    Marked as helpful
    0
    MariaDoesCoding•130
    @MariaDoesCodingPosted 8 months ago

    @b0da2003 Thank you!

    0
  • nmmufti•20
    @nmmuftiPosted 8 months ago

    Wonderful work and it is quite close to the requirements. Sorry I don't know about semantic HTML so I can't help with that

    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