Submitted over 1 year ago
Product Preview Card Component Using CSS Grid and Flexbox
@arifffitri
Design comparison
SolutionDesign
Solution retrospective
really appreciate if you can kindly check my coding :)
Community feedback
- @MelvinAguilarPosted over 1 year ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML π·οΈ:
- Wrap the page's whole main content in the
<main>
tag.
- 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. Improve thealt
attribute to the<img>
tag of the product.
- The element
<span class="button_text">
inside the button is unnecessary, you can have text directly inside the button without a problem.
- It is recommended to use CSS to apply styles such as bold text, rather than the "b" tag. The
font-weight: bold;
property is used to make the text bold.
CSS π¨:
- You don't need to add
font-family: 'Montserrat', sans-serif;
to each<p>
,<h*>
separately. Instead, add it to body.
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource π.
- To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here π.
CSS Reset π:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! π
Happy coding!
0 - Wrap the page's whole main content in 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