Skip to content
Submitted 28 days ago

I used flex box for positioning.

yvonnem111•100
@yvonnem111
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?

That I am continuing to learn new concepts and remember concepts that I have forgotten after some time away from coding.

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

It was pretty straight forward but asked AI for one thing I forgot.

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

Just if someone thinks I could of done it in a better/more simplified way.

Community feedback

  • Marcos Travaglini•6,210
    @BlackpachamamePosted 28 days ago

    Hey your solution is amazing! 🤩

    📌 Some accessibility and semantics recommendations for your HTML

    • To improve the semantics of your HTML, you can change your <div class="main"> to a <main class="main">
    • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
    • I leave you the task of researching the reset CSS and the box-sizing: border-box
    • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
    • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
    Marked as helpful
    0
  • yvonnem111•100
    @yvonnem111Posted 21 days ago

    Hi @Blackpachamame,

    Thank you for the detailed and very helpful comments:)

    1

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