Submitted 8 months ago

Newbie Project Complete using HTML and CSS only.

John Davidson• 210

@John-Davidson-8

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am happy with how the project looks. I think it is very close to the Figma file, and I also centred the card using CSS Flexbox with justify-content (centre) and align-items (centre). This works well on all projects and can be done with CSS Grid also.

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

I often have problems structuring my HTML on every project. Over-coding is the phrase I use, whereby I have too many outer containers which as I move on to the CSS styling I see that they are unnecessary. However, the blog card looks ok on the browser, so although I could refactor the code, I would come out with the same result on the browser.

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

As I mentioned in the last section I tend to add too many containers. In this project I have a semantic main acting as an outer container and also semantic section acting as another container within the semantic main container. I am also attempting to get to grips with grouping elements and classes in the CSS. This will take time to understand.

Community feedback

Daniel 🛸• 44,250

@danielmrz-dev

Posted 7 months ago

Hello @John-Davidson-8!

Your project looks great!

Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

📌 Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

John Davidson• 210

@John-Davidson-8

Posted 7 months ago

thanks Daniel @danielmrz-dev

SpeedyRicky• 60

@SpeedyRicky

Posted 8 months ago

hello

Please log in to post a comment

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