Skip to content
Submitted 3 months ago

My solution for the Blog preview card challenge

Jan•290
@Jan-Dev0
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?

The Figma files wern't 100% accurate so I just fiddeled it out. I am also not sure if using all that flex boxes were really necessary or if there would have been an easier way to do it.

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

Trying to get the figma desings to code.

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

I am not sure with the measurements using fixed width and height. Is this how it should be done? Also I am not sure about the use of all thoses flex boxes.

Community feedback

  • Teodor Jenkler•3,800
    @TedJenklerPosted 3 months ago

    Hi @Jan-Dev0,

    Nice project! While it's possible to make this small project pixel-perfect and responsive, I would generally discourage aiming for pixel perfection. Instead, using rem and % units for a responsive and flexible layout tends to yield better results.

    Your classes are well-made. However, consider adding aria-labels to help screen readers understand your content. Also, when possible, replace <div> elements with their semantic equivalents to enhance both accessibility and search engine optimization.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    1
  • MikDra1•6,980
    @MikDra1Posted 3 months ago

    If you want your solution to be just like the design shows I encourage you to use Pixal Perfect extension

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    Marked as helpful
    1
    Jan•290
    @Jan-Dev0Posted 3 months ago

    @MikDra1 Thanks a lot.

    0
  • Sebastian Rico Vela•120
    @AgilePanda482Posted 3 months ago

    Yep, that's the correct way to use “flexbox”. So, don't worry about it, just a recommendation:

    Don't write all the code in the “body” tag, it's better to use a div with “container” class or also the “main” tag.

    Congratulations!

    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