Product preview card component solution using CSS Flexbox

Solution retrospective
Feedback would be welcome.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MelvinAguilar
Hi @zakariabelassri 👋, good job on completing this challenge! 🎉
Here are some suggestions you might consider:
- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference. - You should have used flexbox on the section and had "flex-direction: row;" for later, when viewing on mobile devices, using a media query, change the direction with "flex-direction: row".
- You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.
Example:
<picture> <source media="(max-width: 678px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="your_alt_text"> </picture>
- You could use the <del> tag to display the old price:
<del class="old-price"> <span class="sr-only">Old price: </span>$169.99 </del>
Note that I added the <span> with the
sr-only
class to thedel
element, this will provide more information about what your old price is about.The
sr-only
class is a class that you can add to hide content visually but is only visible to screen-readers.- You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies.
Popular reset style sheets:
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful - Instead of using pixels in font size, use relative units of measure like
- @christian-prasetya
Congratulations on finishing this challenge. You structure your HTML & CSS code semantically great and well structured.
But of course there's some area of improvement:
- Try to apply responsive design using media queries, I know it's hard to grasp at the first time, but it's worth it for developing your skill in the future.
- Try to use BEM method for creating a reusable css code that will make your life easier. You can check it here.
- Maybe try to learn about Sass/Scss pre-processor for creating more well structured and modern CSS, it really helps a lot. I just started to implement the using of Sass/Scss and really help me to structured my stylingsheet, and creating lots of functions on CSS. Check it here
But overall, I think you did a great job developing this challenge. Hope to see more finish challenge from you.
Marked as helpful
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