Skip to content
Submitted 25 days ago

Blog Preview Card Challenge 02 | CSS + HTML

TheTCGProject•40
@TheTCGProject
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I think this is a near replication of the images shown for the challenge. I'm happy to receive an application that is close to the request, learn more about CSS and HTML production, and have a hovering element included as well.

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

Getting the main div centralised, which is a similar challenge I had with the 1st challenge. But finally, after some experimentation and browsing the forums, I've managed to get it sussed.

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

Some advice on the inner elements of the div to get them working together more smoothly, it took a lot of padding and margin experimenting to get something that replicated the challenge, which I feel may have complicated this more than anything.

Code

Please log in to post a comment

Log in

Community feedback

  • Elmar Chavez•540
    @CodingWithJiro

    Hi TheTCGProject!

    • You nailed the visual side of this challenge! However, if you would like to upgrade your project more, use PerfectPixel. This helped me a ton in getting my solution to as close as possible to the intended design. I'm sure this will help you too!

    • I opened your live site and it seems like your card is squished at 320px device width. A simple <div> container with padding-inline can solve this.

    • You mentioned that you heavily rely on trial-and-error for margins and paddings. I've been there and my suggestion is for you to use display: flex for internal elements not only limited to the main container. This way, you will not be relying on floats anymore. Personally, I RARELY use float property in my current projects.

    • Regarding your HTML, there is an extra equal sign for the </div=> that you may want to edit out:

    <div class="img-container"><img class="img-article" src="/assets/images/illustration-article.svg"></div=>

    All in all, good job. I hope this feedback helps

    Marked as helpful

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