Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card Solution (using HTML & CSS)

@MariaDoesCoding

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@b0da2003

Posted

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

Posted

@b0da2003 Thank you!

0
nmmufti 20

@nmmufti

Posted

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
Discord logo

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