Submitted 6 days ago

Responsive blog card using HTML, CSS Media queary

Joshua Utik• 30

@joshutik

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

What I am most proud of is able to Understand the usage of Min and the Max usage in media query.

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

Making the responsiveness on various screen sizes.

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

For now none I guess.

Community feedback

MikDra1• 6,650

@MikDra1

Posted 6 days ago

Well done, here are some things to review 😊:

Overusing div tags: Try using more semantic HTML elements like <section>, <header>, and <article>. It’ll help with both accessibility and SEO.
Neglecting responsive design: Make sure you're using media queries and following a mobile-first approach so your site looks great on all devices.
Inconsistent class naming: It’s easy to end up with a mess of class names. Consider using a system like BEM for better organization and scalability.
Using px for everything: Instead of px for fonts and layouts, try using relative units like rem or em to make your design more adaptable to different screen sizes.

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

Marked as helpful

Joshua Utik• 30

@joshutik

Posted 5 days ago

Thank you this was really Helpful @MikDra1

Giannis Mylonas• 40

@mylonakos14

Posted 6 days ago

This is an amazing job . Keep it up!

Please log in to post a comment

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