Submitted 18 days ago

Responsive Product Preview Card using basic HTML and CSS (media query)

FranciscoDavidCampuzanoMelgarejo• 50

@FranciscoDavidCampuzanoMelgarejo

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

This is a solution for...

Product preview card component

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'm most proud of is the 'responsive' aspect and how similar the design they have given us is. I think it fits quite well

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

One of the problems I had was placing the svg correctly, but I was researching on the internet and found the solution. The rest of the things were not very complicated (I already knew the tag)

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

I would like to structure the code better and use fewer lines of code. I think the CSS code can be optimized a lot. I would also like to know how to better organize the HTML code (semantics)

Community feedback

Steven Stroud• 4,100

@Stroudy

Posted 18 days ago

Great job with this challenge, very professional, some things to consider,

Missing a <meta> description tag for SEO purposes,
Having an aspect ratio on your image will stop some layout shifting while loading and increase performance,
You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
Check out this article from a Frontend mentor dev about responsive-meaning.
You should add a font-display: swap; property to your @font-face, Leverage the font-display CSS feature to ensure that text is user-visible while web fonts are loading, Increasing performance.

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