Design comparison
Solution retrospective
What I found difficult in this project was making the active states, I tried to use opacity 0 but the entire button disappeared, so I had to use the HSL and add the 4th variable (opacity). About the best practices, is good to have most of the elements with classes?
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- 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.
- Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful0 - The “car images/icons” in this component are purely decorative; They add no value. So their
- @AdrianoEscarabotePosted almost 2 years ago
Hello mbedon, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
I noticed that you used a
button
in which case the best option would be ana
, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!to solve this problem do this:
<a href="/" class="learn-more">Learn More</a>
I noticed that you used more than one
h1
per page, this is not considered a good practice since we should have only one per page to inform the main title!The remainder is excellent.
I hope it's useful. 👍
Marked as helpful0
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