Challenge about create a Product preview card HTML CSS SASS
Design comparison
Solution retrospective
Happy that I am able to code this challenge with Sass. The next time I will try to improve the structure with sass and code.
What challenges did you encounter, and how did you overcome them?I've fought with the Responsive Design, specifically with the Responsive images and sizes of the container, Too with the function "clamp" I've fought but I couldn't achieve that it works and I've Found an alternative way. I admit to suggestions to improve my code.
What specific areas of your project would you like help with?With funtion "Clamp" and use mediaqueries with sass
Community feedback
- @Fable54321Posted about 1 month ago
ok, so looking at your code;
1st- I think one thing you could add to your reset.css file for every project is a min-height: 100vh to the body tag.
The reason why I'm starting with this is that it would have given you the possibility to center your content vertically, wich is the obvious visual issue with your page.
2nd- wihtout going one by one I can see there is a few things that are not respecting the style guide.
Since you are using SASS, what I like to do is to have a _variables.scss file, where I start by creating a variable for each information given by the style guide. You would then need to import your variables using @use "variables"; in your style.scss.
If it's in the style guide it means it is used somewhere so you can see it almost as a checklist, alhtough having used all of them doesn't guarantee perfection, having not used all of them guarantee something is wrong.
3- I recommend the use of em for media queries. They are the most consistent across all browsers. (50em is a good spot to begin with).
There is probably a few other things I could find, I can see your container size is weird when I inspect your page, but overall you did a good job, we recognize the design really well.
I would recommend that maybe you just take a bit more time in the future and I am sure you can make everything perfect. Keep up !
Marked as helpful0@apradaglezPosted about 1 month ago@Fable54321 I’m grateful for your comments I’ll take your advices to improve my skills
1
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