Submitted 3 months ago
Responsive Product Preview Card using basic HTML and CSS (media query)
@FranciscoDavidCampuzanoMelgarejo
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
- @StroudyPosted 3 months 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
pxas it is an absolute unit and not a responsive unit likeremorem, 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.
0 - Missing a
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