Skip to content
Submitted 6 months ago

Blog Card Preview

Jacob Stone•130
@jacob-stone9554
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 am the most proud of how naturally the solution came together as I was developing it. I feel like I made it through this challenge more efficiently than the first one. If I were to do it differently, I would probably put the attribution into a footer tag rather than in main with the rest of the content.

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

One challenge I encountered was getting the margins around the title and the rest of the flex containers to align properly. I overcame this by adjusting the height of the title container to suit the spacing of the card.

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

I definitely need to work on making the responsiveness better. I have media queries, but I feel like it can still behave a little wonky when the viewport shrinks and grows.

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 6 months ago

    Hi there!

    You really have not to wrapping every element into the flex wrapper. In the big projects with a lot of content such approach could be very complicated =)

    You can style them directly and create spaces via margin or padding.

    <h1 class="title">Title</h1>
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

.title {
    margin-top: 1rem;
}

.text {
    margin-bottom: 0.5rem;
}

    Or, since your container already has flex, you can use gap property to create gaps between it's inner tags.

    Of course, if you just want to train your flex skills or it's some new interesting technique, just ignore all that above =)

    Also I recommend you to use rem for the font-size properties. It can help users if they want to change their font size settings. To help you calculate value - by default 1rem = 16px.

    Anyway, quite a neat and accurate work (especially comments in code) and cool shadow-hover effect! Well done, keep going =)

    0
  • JV2018•80
    @JV2018Posted 6 months ago

    Nice work!

    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