Design comparison
Solution retrospective
i am a beginner in web development . i make this site please give me feedback about my website
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
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.The word "perfume" is written as separate letters, which does not convey the meaning that this text is a single cohesive unit of content. This can be confusing for users and for screen readers, as it can be difficult to understand the meaning of the text.
Example:
<p>Perfume</p> p { text-transform: uppercase; letter-spacing: 0.3em; }
- To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here ๐.
- You should use
max-width
on thecontainer
selector. It prevents the element from becoming larger than the specified value.
-
You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.
Popular CSS resets:
I hope you find it useful! ๐
Happy coding!
Marked as helpful0@Saroj-pradhanPosted almost 2 years ago@MelvinAguilar thanks for helping brother connect me with Twitter https://twitter.com/_saroj_pradhan?t=1-qqTdO-vaEF-y0ehOvv4A&s=09
0 - 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