@PhoenixDev22
Posted
Hi ahmed,
Well done! I have some suggestions regarding your solution if you don't mind:
- Adding
rel="noopener"
orrel="noreferrer"
totarget="_blank"
links. When you link to a page on another site usingtarget=β_blankβ
attribute, you can expose your site to performance and security issues.
- It's not recommended to capitalize in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalized text as they will often read them letter by letter thinking they are acronyms.
- The cart image in the button is a decorative image. For decorative images, you set an empty alt to it with an aria-hidden=βtrueβ to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images.
- You should use
object-fit: cover;
to the image which sets how the image should be resized to fit its container.object-fit: cover;
maintains its aspect ratio while filling the element's entire content box.
- Remember a modern css reset on every project that make all browsers display elements the same.
- Consider using rem for font size , it' not recommended to use px for font size as absolute units donβt scale for example 15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.
Overall, great work! hopefully this feedback helps.