Product Preview Card using VS Studio Code & Media Query in CSS
Design comparison
Solution retrospective
Writing the HTML is fine and quick, but that's not the case for CSS. For CSS, you can't get it right for first attempt. You mostly having to experiment the properties and values. I also found myself googling a lot to write the CSS section LOL. This was my first time learning and implementing the Media Query. I hope I did it correctly. I think my media query code is messy. I'm definitely unsure of that. What I find difficult the most is making the site to be mobile friendly. Writing the code for the desktop site is fine and easy but coding both mobile and desktop at once is not. I just finished learning HTML and CSS from freeCodeCamp and I'm trying my best. Let me know if there are better practices and codes I can implement for other future projects.
Community feedback
- @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
To better identify the main content of you site you will want to encase your entire component inside a Main Element.
-
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
-
This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
-
The incorrect
font-family
is being used. You want to look at your "style-guide" to download the correct one. -
The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.
-
The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include span element with an sr-only text explaining that this is the old price.
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful1 -
Please log in to post a comment
Log in with GitHubJoin 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