Submitted almost 2 years ago
Product preview card component solution using bootstrap and CSS
@mail2ifham
Design comparison
SolutionDesign
Solution retrospective
Please tell me how I can improve.
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML π:
- The
<h1>
is the most important heading on the page, In this challenge the perfumer's name can be considered like the title of the page, so it should be the<h1>
- You can use the
<picture>
tag when you have different versions of the same image πΌ. Using the<picture>
tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here π.
- The
alt
attribute is used to provide a text description of the image which is useful for screen reader users, assistive technology users, and search engine optimization. Add thealt
attribute to the<img>
tag of the product.
- Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the
text-transform
property to transform the text to uppercase in CSS.
CSS π¨:
- To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here π.
I hope you find it useful! π
Happy coding!
Marked as helpful1 - The
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