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 - HTML/CSS

P-Mingi 150

@P-Mingi

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

nthg

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

I wanted to make it without using media query (only for the pic) and using flex wrap for exemple, but i didn't managed to do it, i think it's impossible, or i need function that i don't know yet.

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

How to make it with less @media query

Community feedback

P

@grifano

Posted

Hi, great job with the challenge!

Here are a few improvements you can add next time:

•	To use different size images for various screens, use the <picture> tag. You can use the <source> tag to define which image should load on which screen size.
•	You can reduce the number of media queries by using relative sizes for font size, margin, padding, etc. However, media queries are a straightforward way to achieve responsiveness.
•	Check out the BEM class naming methodology. It will help you create clean, well-structured CSS classes.

Keep going!

By the way, your current link to the GitHub repository is incorrect and leads to another project.

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