Design comparison
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- Your HTML should have a
main
element that will assist in identifying the main content of your site.
More Info:📚
- The “car images/icons” in this component are purely decorative; They add no value. So their
Alt Tag
should be left blank and have anaria-hidden=“true”
to hide them from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The headings in your component are being used incorrectly. Since the
h1
heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use anh2
heading since it is reusable and it will give each heading the same level of importance.
- Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of you site. The
anchor tag
will achieve this.
More Info:📚
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful0 - Your HTML should have a
- @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag to fix the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/ There is no need to give the body width:100vw; replace height:100vh with min-height:100vh to center .container on the page.
Give .container a fixed width in the desktop design instead of a percentage width: eg: .container{width:900px}. Give .container a height value of auto. Give each chid div of .container the same padding value for all the sides instead of giving p, .btn and img position: relative and its properties and a width value.
In the media query , there is no need for a width and height value and display: flex; in the body. Give .container a percentage width value of 80 0r 90.
Hope am helpful HAPPY CODING
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