Submitted 6 months ago

Blog preview card challenge by using HTML & CSS

nmmufti• 20

@nmmufti

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 able to achieve the layout same as described in the requirements

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

It was not easy to find css styles as I am quite new to this

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

Did I used correct CSS and can it be improved

Community feedback

Herve• 40

@HerveWabo

Posted 6 months ago

Great job. Some things I'd add to your code are:

The use of semantic HTML like p tags where needed.
The easiest way I've found to center the card is by putting the card in a section and changing the section to a flexbox.

<section style="
   height:100vh; 
   display: flex; 
   align-items: center;  
   justify-content: center;">

       <div class="rounded_div">..."Your Code"</div>

</section>

TitaHerizo• 70

@TitaHerizo

Posted 6 months ago

Well done. The code is well-structured for me. On the layout, I think you should add a margin top on the card. And you should import the font from the asset folder.

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