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

Responsive blog preview card with vanilla HTML and CSS

Juan 480

@JEWebDev

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 of finishing this project in less than 1 hour and 30 min. Also i learned something new with the css clamp method.

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

Adjusting the font sizes without media queries, it was challenging and fun!

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

Any feedback is welcome. Have a great day!

Community feedback

Emal 110

@syeero7

Posted

Well done!

You can use <time> for the publish date inside <p>. also, please note that the -webkit-font-smoothing property only works on macOS. The page did not render well on my browser.

Marked as helpful

0

Juan 480

@JEWebDev

Posted

@SyeerO7

Interesting! I have never had that problem before, thanks for letting me know! I was trying a new CSS reset and had been having great results till now. I will fix it as soon as i can. Have a great day!

0
mer 60

@MER-PEX

Posted

you're website look great really ,i would like to know how did you manage to place the profile picture and the name so perfectly?

0

Juan 480

@JEWebDev

Posted

@MER-PEX

Hello! Of course!

i putted the profile picture and the name inside a div and applied these styles:

.card-footer{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

You can look at the css in the repo as reference and if you have more questions i will answer them the best i can. Have a nice day!

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