Skip to content
Submitted 8 months ago

Blog preview card challenge by using HTML & CSS

nmmufti•20
@nmmufti
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 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
    @HerveWaboPosted 8 months ago

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

    1. The use of semantic HTML like p tags where needed.
    2. 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>
    0
  • TitaHerizo•70
    @TitaHerizoPosted 8 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.

    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