Skip to content
Submitted about 1 year ago

Blog Preview Card (React and Tailwind)

Justin Levy•100
@justinsane
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'm most proud of coding this component fairly quickly.

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

I slowed down when attempting to style the 'Learning' heading with a background color. Originally I used an h3 element but realized I needed to use a span so the background color wouldn't stretch the entire width of the div. I learned the difference between block elements (most common) and inline elements (like span). The solution was to use inline-block Tailwind CSS.

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

I could use more help translating the Figma design to css, specifically how to use 'rem' and the association with Tailwind classes.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,830
    @danielmrz-dev

    Hello there!

    Congrats on completing the challenge! ✅

    Your project is looking fantastic!

    I'd like to suggest a way to make it even better:

    • Using margin and/or padding isn't always the most effective method for centering an element.

    Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

    📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

    body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

    I hope you find this helpful!

    Keep up the excellent work!

    Marked as helpful
  • P
    Darkstar•1,440
    @DarkstarXDD

    Looks good, couple of things you could improve.

    • The "Learning" and the date are not headings. They are paragraphs. So you can use <p>. The <h1> is the only headings in this design.
    • You can directly add the inline-block to the <p> tag (currently you have this as an h2) that contains the "Learning". The <span> is redundant here.
    • To center the entire component on the screen you can use flex or grid. Giving a margin-top is not a proper way to achieve it. Since you are using tailwind it would be flex flex-col justify-center items-center min-h-screen on the root div. You can then remove the margin-top on your component. This way no matter what the screen height is the component will be in the center.

    You can convert the px font sizes in the Figma design to rem by dividing the px value by 16. So if the font-size in Figma is 14px, then the rem value would be 14/16 = 0.875. In Tailwind font-sizes are defined in rem so you only need to find the utility class that has the value you are looking for.

    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