Skip to content
Submitted over 1 year ago

Blog Preview Card Solution (using HTML & CSS)

MariaDoesCoding•130
@MariaDoesCoding
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Abdallah Ali•300
    @boda0077

    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
  • nmmufti•20
    @nmmufti

    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

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