Design comparison
Solution retrospective
I use tailwindCss it's a little difficult to build this project using tailwindCss but I learn. next time I build a better project using tailwind CSS.
Community feedback
- @VCaramesPosted about 2 years ago
Hey, some suggestions to improve you code:
-
Stay away from Tailwinds until you understand the HTML/CSS fundamentals. The purpose of this challenges it to teach you that. Using a library is robbing you of that.
-
Your desktop layout is broken, you need to go back and fix that.
-
(As mentioned) The reason you actually want to use a the Picture Element is because this image serves a purpose, it lets the user know how the products looks like. If this was a decorative image, like a a background, then you would use the Background-Image Property.
-
The old price isnt being announce properly to screenreaders. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.
-
The "Button" is created with the wrong elements. It needs to be Button Element so that when the users clicks on it (with the help of JS), the product gets added to the cart.
-
For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.
More Info:
https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9
Happy Coding!
Marked as helpful0 -
- @correlucasPosted about 2 years ago
👾Hello @parthibt, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
1.Add the correct font for the main heading of this component. First of all you need to choose the font using
Google Fontshttps://fonts.google.com/ and import the code to drop on your CSS/HTML:This is the font for the H1:
font-family: 'Fraunces', serif;. There's two ways to import the font:- Using the html and inserting it to the
<head>
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap" rel="stylesheet"> </head>- Using the CSS and adding to the first line of the CSS sheet:
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap');2.A better way to work this solution image, the product image is by using
<picture>to wrap it on the html instead of using it as<img>orbackground-image(with the css). Using<picture>you wrap both images (desktop and mobile) and have more control over it, since you can set in the html when the images changes setting the screen size for each image.ote that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image.Here’s the documentation and the guide to use this tag:
https://www.w3schools.com/tags/tag_picture.aspSee the example below:
<picture> <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;"> </picture>👨💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
✌️ I hope this helps you and happy coding!
Marked as helpful0 - Using the html and inserting it to the
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