Submitted 9 months ago

Responsive blog preview card with vanilla HTML and CSS

Brayden Williams• 260

@redstar504

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my implementation of the Blog Preview Card.

Some unique differences from my other solutions:

Now using Vite to provide a local dev server, which provides auto reloading across all of my devices. This aids in quick testing on smaller screens.
Deploying my solution to Render which is fast, and easy.
Unrelated to tech, I have started forcing myself to use touch typing due to RSI pain in my wrist. Since I am brand new to it, it is irritatingly slow to type anything. I am improving quickly however.

I also subscribed to a pro plan on this website. Having the dimensions available on Figma is certainly a game changer.

Let me know if you notice any issues, or have any suggestions!

Community feedback

beowulf1958• 1,170

@beowulf1958

Posted 9 months ago

Congratulations on completing the challenge. Looks pixel perfect! My only suggestion is that the design called for a shift in the box shadow on hover (it gets bigger). It is really subtle, and I missed it my first time through until someone pointed it out.

Other than that, it is awesome. Clean html and very readable styles. Keep on coding!

Marked as helpful

Brayden Williams• 260

@redstar504

Posted 9 months ago

Thank you, glad you pointed that out.

Brayden Williams• 260

@redstar504

Posted 9 months ago

@beowulf1958 All fixed. Rewrote a lot of code. Much closer to pixel-perfection now.

Please log in to post a comment

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