Skip to content
Submitted 6 months ago

Blog Card Challenge Solution by Rainiero

raiherrada•30
@raiherrada
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 proud of the fact that I managed to finish the project. Next time I would like to give it a different approach.

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

The box-shadow was challenging since I did not remember how to do it.

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

I would like some help with the Flexbox. Although the result is fine, I think that is nowhere similar when it comes to margins and padding to the real solution.

Community feedback

  • Junier Bolívar 🕷•710
    @JunbolPosted 6 months ago

    HiRainiero! here are some recommendation for your project: PROS: Most of the features are there, it’s almost done.

    CONS:

    1. HTML: Remember to use semantic HTML and good HTML structure. For example a basic structure could be:
    <body><l--here you might add a class to it--> <main><l--here you might add a class to it--> <section><l--here you might add a class to it--> <div><l--here you might add a class to it--> <div><l--here you might add a class to it--> </div> <div><l--here you might add a class to it--> </div> </div> </section> </main> </body> You can find more info here: https://www.w3schools.com/html/html5_semantic_elements.asp https://web.dev/learn/html/semantic-html My recomendation is add classes as much as can to the HTML elements that way can have full control to them. For example you could have instead of using the a div as wrapper you could have use a <section> and give the section a class like margin: 0 auto; to center it in the window brouser. And of course use Flexbox as much as possible. Here is a link to dive into it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    1. Main Issue: Alignment: The main issue is with the aligment of the main div container/wrapper. -Reason: You forgot to use dimensions: width and height to the .blog-post class and intead of this: margin: 40px 570px; use margin:0 auto; which will center the card horizontally. All you need to use is margin-top to push the card down. The other more optimal is to change the unsemantic div wrapper to <section> and give it a class with display: flex justify-content: center align-items: center that will center the card right at the center of that <section> but then you have to apply the same class properties to < section> to center it inside <main>

    Flexbox:
    [Flexbox] (https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) Good look and Keep going!

    Cheers Junier

    Marked as helpful
    0
  • Junier Bolívar 🕷•710
    @JunbolPosted 6 months ago

    HiRainiero! here are some recommendation for your project: PROS: Most of the features are there, it’s almost done.

    CONS:

    1. HTML: Remember to use semantic HTML and good HTML structure. For example a basic structure could be:
    <body><l--here you might add a class to it--> <main><l--here you might add a class to it--> <section><l--here you might add a class to it--> <div><l--here you might add a class to it--> <div><l--here you might add a class to it--> </div> <div><l--here you might add a class to it--> </div> </div> </section> </main> </body> You can find more info here: https://www.w3schools.com/html/html5_semantic_elements.asp https://web.dev/learn/html/semantic-html My recomendation is add classes as much as can to the HTML elements that way can have full control to them. For example you could have instead of using the a div as wrapper you could have use a <section> and give the section a class like margin: 0 auto; to center it in the window brouser. And of course use Flexbox as much as possible. Here is a link to dive into it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    1. Main Issue: Alignment: The main issue is with the aligment of the main div container/wrapper. -Reason: You forgot to use dimensions: width and height to the .blog-post class and intead of this: margin: 40px 570px; use margin:0 auto; which will center the card horizontally. All you need to use is margin-top to push the card down. The other more optimal is to change the unsemantic div wrapper to <section> and give it a class with display: flex justify-content: center align-items: center that will center the card right at the center of that <section> but then you have to apply the same class properties to < section> to center it inside <main>

    Flexbox:
    [Flexbox] (https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) Good look and Keep going!

    Cheers Junier

    Marked as helpful
    0
    raiherrada•30
    @raiherradaPosted 6 months ago

    @Junbol thanks a lot! I have followed your advice and I'll be posting a new solution. Thanks!

    0
    Junier Bolívar 🕷•710
    @JunbolPosted 6 months ago

    @raiherrada no problem!

    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