Design comparison
Solution retrospective
Learned about Picture tag and various semantic tags of html5 from Kevin Powells you tube channel and implemented it here.Also learnt some neat css tricks to apply here and a better way to handle media query especially for images, this made the code more fun and enjoyable. Hoping to learn more of such things in future.
Any feedbacks regarding this will be higly appreciated !!
Community feedback
- @hassanmoaaPosted 9 months ago
Hello @asishPatanaik!
Great Job solving the challenge mate congrats š
Some suggestions for improvements.
For the letter-spacing it's is better to use rems and ems but px for this project is no big deal.
letter-spacing: 5px;
-
i see you using pixels for many elements, never use pixels for font-sizes in any element, here's why:
-
Certain font-related CSS properties will render your site completely inaccessible if their value is declared using pixels even once.
Which properties are affected?
All of these properties must never ever be declared in pixels:
- font-size
- line-height
- letter-spacing
If you've used pixels to define any of the above style properties, these will not respect the user's font size preferences!
- You should use ems, and rems for font-sizes would be better
This article may help:
https://fedmentor.dev/posts/font-size-px/
āāāāāāāā
Other than that you're good, keep up the good work!
Marked as helpful1@asishPatnaik2000Posted 9 months agoThankyou @hassanmoaa for your review, it was really helpful will surely keep this in mind next time while working on other challenges
0 -
- @petritnurediniPosted 9 months ago
Congratulations on completing the Frontend Mentor challenge for the Product Preview Card Component! You've done a great job, but there are a few improvements you can make:
-
Responsive Image Handling:
- Instead of using separate
<source>
and<img>
tags for different device widths, consider using CSS background images with media queries for better control and optimization. This approach allows you to set different images for various screen sizes more efficiently. - Example:
.product-image { background-image: url('./images/image-product-desktop.jpg'); } @media (max-width: 375px) { .product-image { background-image: url('./images/image-product-mobile.jpg'); } }
- Instead of using separate
-
Semantic HTML:
- Use more semantic HTML tags for better readability and SEO. For instance, you can wrap the product name and description in a
<header>
tag within your<section class="infoContainer">
. - Example:
<section class="infoContainer"> <header> <p class="sectionName">Perfume</p> <h1 class="sectionHeading">...</h1> </header> <p class="sectionInformation">...</p> <!-- Rest of your content --> </section>
- Use more semantic HTML tags for better readability and SEO. For instance, you can wrap the product name and description in a
-
Accessibility Improvements:
- Ensure that your buttons and interactive elements are accessible. Add
:focus
styles to your button to improve keyboard navigation visibility. - Example:
.buttonClass:focus { outline: 2px solid var(--aquamarineColor); }
- Ensure that your buttons and interactive elements are accessible. Add
Useful Resources:
- Responsive Images: MDN - Responsive images
- Semantic HTML: MDN - Semantic HTML
- Accessibility: WebAIM - Keyboard Accessibility
Keep up the great work and continue exploring and refining your skills. Every project is a stepping stone towards becoming a more proficient developer! š»āØ
Marked as helpful1@asishPatnaik2000Posted 9 months agoThanks @petritnuredini adding header tag does seems to be a good idea to make it more semantic. The alternative way you have given me for changing background image seems good will try it next time and thank you for providing me these useful resources for making html more responsive and accessibility of a page.
0 -
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