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
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview with a hover state

LLL0908 40

@LLL0908

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 getting familiar with controlling the position and also believe that I can do better next time.

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

Everything went better than last time.

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

still need to learn about how to deal with images

Community feedback

@tinuola

Posted

Hello LLL0908. Congrats on completing your second project!

Good job using flexbox to work out the positioning -- centering the component, and the user/byline row.

One area of improvement would be to use more semantic HTML elements. Instead of the 'div class p1/p2/p3/p4", use descriptive tags such as p, h1, h2 etc. Divs are generic--they have no meaning and are best used for grouping elements, which you've done well in some areas of the code.

Also, the class names "p1/p2/p3, etc" are not particularly intuitive or meaningful. Instead use descriptive names for the classes, such as "card-heading" / "card-subtitle" / "card-description", etc. Meaningful and descriptive naming makes code more readable.

I recommend refactoring the code and then practicing these tips in future challenges.

Good luck!

Marked as helpful

0

LLL0908 40

@LLL0908

Posted

Thank you for your feedback! I really didn't express my code clearly. I have refactored the code and will pay attention to use more semantic HTML elements in the following challenges.

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