@VCarames
Posted
Hey there! π Here are some suggestions to help improve your code:
- The βimageβ in this component are purely decorative. β οΈ Their
alt tag
should be left blank and have anaria-hidden=βtrueβ
to hide them from assistive technology.
More Info: π
[MDN Aria-Hidden] (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden#description)
- This challenges requires the use of two images π at different breakpoints. β οΈ The
picture
element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture>
<source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>
More Info: π
https://www.w3schools.com/html/html_images_picture.asp
- The statistics at the bottom are a list β οΈ, so it should be built using an
unordered List
element.
More Info: π
MDN <ul>: The Unordered List element
- For improved accessibility π for your content, it is best practice to use
em
formedia-queries
. Using this unit gives users the ability to scale elements up and down, relative to a set value.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! πππͺ
Marked as helpful
@AlexKolykhalov
Posted
@vcarames wow, this is very good advices and remarks!! Thank you, i will be redo my work.
@AlexKolykhalov
Posted
@vcarames how to know if picture is purely decorative or not?
Did not quite understand about em
for media-queries
. @media screen and (min-width:600px)
in this part?
@VCarames
Posted
@AlexKolykhalov
Glad I could help! π
when determining when an image is decorative or not, you have determine if it adds value to you components. For example, in this challenge. If you were to delete the image, the text would still make sense on its own.
Now take this challenge https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa, the image is not decorative because it adds value; itβs the image of the product.
Marked as helpful
@VCarames
Posted
Regarding the em
, it the same math as the rem
just in with em
instead. The difference is that em
inherits from the parent container.
@AlexKolykhalov
Posted
@vcarames ok, I understood, thank you again!
@AlexKolykhalov
Posted
@vcarames understood, just I read all sorts of articles like this one and decided to use rem
to simplify. But I'll take your remark into account. Thank you again!
@VCarames
Posted
@AlexKolykhalov
There is no mention of media queries in the articleβ¦
Read this instead. It focuses only on media queries;
Marked as helpful
@AlexKolykhalov
Posted
@vcarames thanks a lot!! This is what i need!