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 Card Preview

joeyturbo 50

@joeyturbo

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?

was able to knock this one out pretty quick without much googling

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

nothing in particular

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

none

Community feedback

@jmarsic

Posted

Hello and well done. You did almost the same design as given. Here are a few things to keep in mind:

  • div class="card-container" should be main because it specifies the main content of a document
  • <div class="tag">Learning</div> should be span
  • there is no need to use h4 because you can use h2 and style it with CSS
  • in CSS better approach is to set margin-bottom on every element and not to use default flex-direction: column; distance
  • comments are no no to have on production

I hope this tips will help you. Have a nice day, Jake

Marked as helpful

2

joeyturbo 50

@joeyturbo

Posted

@jmarsic this is great advice and definitely blindspots i have right now. i think vscode and just using '.classname' to generate a div kind of hurt my tendency to use more semantic tags. and yeah i also default to flex way too much. i really appreciate you taking the time to help me out. thank you.

0

@jmarsic

Posted

@joeyturbo I'm glad I could help, kind regards.

0
Maobugichi 130

@Maobugichi

Posted

great work

1

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