Skip to content
Submitted 11 months ago

Blog Preview Card Main

alexpeteronoja•80
@alexpeteronoja
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?

This booster my understanding of css

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

how to center a div

Community feedback

  • Rebecca Padgett•1,860
    @bccpadgePosted 11 months ago

    Hello @alexpeteronoja. Congratulations on completing this challenge!!!🎉

    I have few tips you might be interested in to improve your solution.

    • Every website should have at least one landmark like <main>

    Example:

    <body>
  <main>
    All content goes here 
  </main>
 <footer>
    attribution goes here 
 </footer>
<body/>

    HEADING TAGS

    • In this project, you are implementing wrong heading tag for the title. To fix this issue change <h3> to a <h1>

    • Heading tags should be used in chronological order

    More info📚:

    br tag

    • Using the <br> tag isn't a good practice and to add spacing you can use margin and padding

    More info📚:

    I see you are centering your component with <position: absolute;

    • CSS has two layouts: Flexbox and CSS Grid

    • You can add these styles on the <body> or the .container

    Flexbox

    body{
 display:flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

    CSS Grid

    body{
 display:grid;
 place-content: center;
 min-height: 100vh;
}

    On the .container

    • Add <max-width: 350px; to make your component responsive without any media queries

    Here is my solution to this challenge Blog preview card

    Hope you find this useful and don't hesitate to reach out if you have any questions

    Marked as helpful
    1
    alexpeteronoja•80
    @alexpeteronojaPosted 11 months ago

    Thanks

    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