Skip to content
Submitted about 1 month ago

Responsive blog card preview using CSS flex property

joyafrikaana•70
@joyafrikaana
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 challenges did you encounter, and how did you overcome them?

I had an issue with uploading my project to github. I researched and found helpful solutions.

Community feedback

  • Adriano•38,270
    @AdrianoEscarabotePosted about 1 month ago

    Hey joyafrikaana, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

    We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.

    native HTML5 reference elements:

    <body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

    Consider using rem for font sizes. When font sizes are set in absolute units like pixels, users can't adjust the text size based on their preferences. Relative units like rem adapt to the screen size and user settings, making them more flexible across various devices.

    If you'd rather keep using px, you can download a handy VS Code extension that converts pixels to rem automatically

    link -> px to rem

    Everything else looks great.

    Hope this helps! 👍

    Marked as helpful
    0
    joyafrikaana•70
    @joyafrikaanaPosted about 1 month ago

    Thank you so much for the tips. I'd ensure that they are implemented in my next project. @AdrianoEscarabote

    0
  • Marvelous Chiwanza•80
    @Chiwanza16Posted about 1 month ago

    well done you did an amazing job to bring the design into code

    Marked as helpful
    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