Design comparison
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- Along with a blank
alt tag
your “image” should also have aaria-hidden=“true”
to fully hide it from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- This challenges requires the use of two images 🎑 for 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
- Never do this as it creates more issues than solve:
html { /* 0.625*16px = 10px (1rem) */ font-size: 62.5%; }
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful1@leocsdevPosted almost 2 years ago@vcarames thank you. I've refactored my code based on the comments here. However, I've also read some articles about the font-size set to 62.5% in the html element. Can you tell me more about how it creates more issues? Also, is there any alternative to this solution or best practice to quickly calculate the sizes? I really appreciate any help you can provide.
0@VCaramesPosted almost 2 years ago@leocsdev
If you go to the FEM Slack and search
font-size: 62.5%;
you find countless answers on why not to use it.You will use
rem
/em
instead.0 - Along with a blank
- @HassiaiPosted almost 2 years ago
Replace <header class="card__header"> with <div>.The header tag should be above the main tag not within the main tag. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Use the color that were given in styleguide.md.
There is no need to give .card__header position: relative; and a margin value.
Add mix-blend-mode: multiply; and opacity: 0.7; to get the overlay color.
Hope am helpful. HAPPY CODING
Marked as helpful1@leocsdevPosted almost 2 years ago@Hassiai, thank you for your comment. It helps me to correct the color of the image. I forgot to remove the position: relative declaration, I was using an overlay div before but later I decided to use the opacity and background-color properties. The margin-bottom property is to separate the image and h1 in the mobile version.
As for the header tag, I think it's fine as per this article https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
Thanks again for the feedback. It really helps me to correct the issue.
1@VCaramesPosted almost 2 years ago@leocsdev
This is a component, so the
header
element is not needed. The MDN website explains, that it is generally for the intro of a website or an article/section.The same for the
footer
, it is not needed.0
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