Skip to content
Submitted about 12 hours ago

Blog Component using Vanilla CSS

munylo14•20
@munylo14
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?

There were many new concepts that I gleaned from CSS references online (mainly W3Schools) while working on this project. It was a fun one, and I learned a bit about FlexBox in the process of working it out, which was nice!

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

As mentioned above, I struggled to get the text containing the author's name to display centered with the profile pic image. I was able to overcome this by utilizing FlexBox principles in Vanilla CSS.

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

Like all of my projects, I am still learning so much. If you see any glaring issues with semantics or logic of my code, please let me know. It works, but that doesn't mean that it is done correctly or even conventionally.

Community feedback

  • Huy Phan•2,140
    @huyphan2210Posted about 9 hours ago

    Hi, @munylo14

    I reviewed your solution and wanted to share a few thoughts:

    The body doesn't fill the entire viewport: (The viewport is the visible area of a webpage in the browser.) To fix this, you can apply min-height: 100vh to the body. This ensures it always spans the full height of the viewport. It's a good practice to use this property on the body in most of your solutions moving forward.

    Centering the card: Once the above is done, you can use Flexbox to center the card. Set display: flex and flex-direction: column on the body. You might want to explore Flexbox further to understand its capabilities.

    Improving semantic HTML: In the .card-content-text class, you're using section for everything, which isn't ideal. Instead, choose HTML tags that align with the content's purpose. For instance:

    • Use <h1> for the card's title.
    • Use <p> for paragraphs.

    Avoid overusing generic tags like div. Making your HTML more semantic (i.e., meaningful and aligned with the content's structure) improves accessibility and search engine optimization. Spend some time researching semantic HTML to make your code more effective.

    There are still a few issues to address, but overall, great job completing the challenge! Keep practicing, and you'll improve steadily over time.

    Hope this helps! 😊

    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