Skip to content
Submitted 11 months ago

Responsive blog preview card with vanilla HTML and CSS

Brayden Williams•260
@redstar504
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

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,450
    @beowulf1958Posted 11 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
    0
    Brayden Williams•260
    @redstar504Posted 11 months ago

    Thank you, glad you pointed that out.

    0
    Brayden Williams•260
    @redstar504Posted 11 months ago

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

    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