Skip to content
Submitted 6 months ago

Blog Preview card

Suraj Pradhan•20
@suraj-pradhan
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 my debugging skills

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

I faced challenge while stacking the dis and solved them by reading MDN documentation

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

For positioning and adding border to divs

Community feedback

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

    Hi Suraj! here are some recommendation for your project: PROS: Most of the features are there and the card looks fine, it’s almost done.

    CONS:

    1. Forgot to take out this text from the <body>: “ Learning Published 21 Dec 2023 HTML & CSS foundations These languages are the backbone of every website, defining structure, content, and presentation. Greg Hooper”

    2. HTML Structure: Your screenshot doesn’t match the original design, the drawing is out of place in the screenshot.

    3. Alignment:

    a. The alignment of the elements don’t follow the best practices. b. The card is not centered in the screen on mobile view: Reason: You forgot to add display:flex in the parent container.

    1. Footer: The footer “Attributions needs to be at the bottom. Reason: You need to adjust your parent container.

    RECOMMENDATIONS:

    1. Structure & Semantic HTML: Arrange your <div>’s in a more logical way. You can use nesting for it. And put the div for attribution at the bottom. You can use <footer> instead for the Attributes for better Semantics
    <body>
<div class= ”main-container”>
<div class="card-container"></div>
<div class="card-outline"></div>
</div>
<footer class= ”attribution”> </footer>
</body>
    1. Flexbox: . Try to use Flexbox as much as possible it will give you more control to align and position elements. For your project:
    body {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

    The will do two things:

    1. Send the attribution div to the bottom. Make sure you give enough margin-bottom to the card.
    2. It will center everthing inside <body>

    I’m sure you use 3wschools https://www.w3schools.com/css/css3_flexbox.asp to refresh stuff. But these two new kids on the block are really great:

    1. [Flexbox] (https://web.dev/learn/css/flexbox)
    2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    3. https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

    Good look and Keep going!

    Cheers Junier

    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