Skip to content
Submitted 6 months ago

Blog preview challange

ANDREYSOREAL•120
@andychuks51
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I have able this create the layout without much fuss this time... I'm happy that I get the hang of thing a little.

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

Understanding the layout was pretty difficult at first but once I understood then it was a piece of cake.

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

Nothing specific, this was straight forward.. but anything I can improve on please don't hesitate to mention it. Thanks :)

Community feedback

  • Elijah Adelakun•70
    @kennykage101Posted 6 months ago

    Hey, you've done a great job but I can see that the solution is not pixel-perfect with the design. Now, here are some things you might do:

    1. align your card to the center vertically i.e centralize it vertically
    2. Some font sizes are missing in your code. Compare the solution with the design and fix the sizes.
    3. I can see that the color of the design's blog description does not match your solution.

    I hope you find this helpful. Have a nice time.

    Marked as helpful
    0
    ANDREYSOREAL•120
    @andychuks51Posted 6 months ago

    @kennykage101 Okay, I will be on it... Thank you some for taking time out for the correction.

    0
    ANDREYSOREAL•120
    @andychuks51Posted 6 months ago

    @kennykage101 Please any useful tips on how I can align the card container to the center vertically? I have been struggling with it for a while.

    0
    Elijah Adelakun•70
    @kennykage101Posted 6 months ago

    @andychuks51 Put the card container into another div then style the div with: { display: flex; align-items: center; justify-content: center; } Remember to give your div a class name for accessibility

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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