@MelvinAguilar
Posted
Hello there π. Good job on completing the challenge !
Overall, the solution is well done. I can only give you a few small tips to consider in this challenge.
- Keep font size in relative units like em or rem, not vh (viewport height). Using vh for font size may cause inconsistent scaling on different screen sizes
- Avoid using many nested selectors (e.g.:
main .section2 .perfume-description
) in your CSS to maintain code simplicity, readability, and prevent specificity issues. Simply use:.perfume-description
- You can shorten the border-radius declaration using shorthand notation:
Your actual code:
β β β border-radius: 30px;
β β β border-bottom-right-radius: 0;
β β βbβorder-bottom-left-radius: 0;
You can shorten it as follows:
β β β border-radius: 30px 30px 0 0;
β Format: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
- Consider using a
<button>
element instead of a<div>
with class "buttom". If an element has a pointer cursor and a hover effect, it indicates interactivity, commonly used for buttons, links, form fields, etc..
- Utilize header elements (e.g.,
<h1>
,<h2>
, etc.) to provide a hierarchical structure to your content, making it more accessible and helping search engines understand your page's organization.
- There's no need to enclose each element in a
<div>
unless it serves a specific purpose for styling or layout.
For more in-depth knowledge about semantic elements and HTML planning, you can read the article "How to plan your HTML: Product Preview Card" at https://fedmentor.dev/posts/html-plan-product-preview/.
Overall, the solution is very well executed. Good luck with your future coding endeavors
Happy coding!
Marked as helpful
@paulo-xavier
Posted
@MelvinAguilar Thanks very much for the useful tips!! I will apply this concepts in my future projects! Have a good week! π Happy coding!