Skip to content
Submitted 7 months ago

Blog preview card with HTML and CSS

María López•240
@oppahero
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?

For the next practices I will pay more attention to accessibility

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

It took me a bit to figure out why the span element (category) took up the entire width of the card body, when it's an inline element. But in the end I solved the problem, the display flex of the parent container was affecting it

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

Any feedback is appreciated

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 7 months ago

    Hello Maria, I'd like to congratulate you because your project is almost identical to the proposed design. Good job!

    I'd like to give you some tips regarding your HTML. Firstly, instead of using <main> as a background, it's more recommended to use the body for this role, while <main> could represent the card.

    However, if you prefer to use<main> cs the background, know that it's not entirely wrong. In that case, what would complement <div class="card">, best would be a <article>, tag, because the card can be self-explanatory even without being in the content.

    Another part is <div class="card__blog-image">, which could be replaced with a <figure>, since the image is directly related to the main content's theme.

    As for your CSS, it's impeccable. Congratulations!

    If anything I said isn't clear, please comment below, and I'll try to help you in the best way possible.

    Marked as helpful
    1
    María López•240
    @oppaheroPosted 7 months ago

    Thank you very much for your recommendations :) they will be of great help to me. I will be reviewing those points.

    Have a nice day! @R3ygoski

    1
  • Chris Bui•90
    @chrisvn1808Posted 7 months ago

    Hi, congratulations on completing the project. You did a great job. I just have a suggestion that in HTML, you are using this:

    <div>
    <span class="category category--yelow">Learning</span>
</div>

    Instead, you can use a single p tag to not only achieve the same result but also add meaning to the information you are marking up.

    <p class="category category--yelow">Learning</p>

    Hope it helps :). Happy coding!

    1

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