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

Csaba Hell 110

@hellcsaba

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 happy that I used semantic HTML5 in my solution whether I'm not a 100% sure that I used it at the best. Moreover, I learnt that the max-width css property can have fit-content value which can be useful for my future projects. Maybe next time it would be nice to try out the mobile design first approach.

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

I didn't know how to make the learning category tag's background properly. After research on the internet I found the fit-content value.

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

I used semantic HTML5 markup, however I'm not sure in my solution. Would it be better to include the blog-image in the content section?

Community feedback

ayx 40

@ayx234

Posted

Hello,

Your code is well structured, and I only have minor notes:

  • Think of the design components in terms of their placements. This article card will be part of a page which will already have an <h1>. <h2> is better as a header for this card.
  • You included an overflow: hidden; for the body, but why would you want to hide a part of major page section?
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