Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

blog-preview-card

@mariokreitz

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

media query. i always used mobile first, but this time i did it the other way around :D

Community feedback

P
gio 110

@fakegio

Posted

This solution is responsive, fluid and closely resembles the design. I like how the classes are descriptively named, indicating the color and font/font weight of an element. To improve, I'd recommend using more semantic elements and less div elements, this would resolve some accessibility issues, and refrain from using the important property. Other than that, looks good 😁

Marked as helpful

1

@mariokreitz

Posted

Hey @fakegio,

Thanks a lot for the feedback! I really appreciate it and am always looking for ways to improve. I hadn't considered the recommendations before, but after reading through the feedback from FM and taking your advice into account, I can see how much it could enhance my code.

For this project, I’ll definitely look into replacing the <div> elements with semantic elements like <header>, <main>, and <footer>. That’s a great point, and I’ll make sure to keep it in mind for future projects.

Thanks again for your insights!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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