Design comparison
Solution retrospective
Any feedback is welcome, thanks!
Community feedback
- @vanzasetiaPosted about 2 years ago
HI, Arush! 👋
Good effort on this challenge! 👍
I notice there is a hover effect on the QR code. I am not sure what is the purpose of doing this. Also, it can be confusing for users since it has interactivity but it is not an interactive element such as a button or a link. So, you may want to remove the hover effect since it can create a misconception for the users.
As far as resources, I would recommend learning about web accessibility. This can impact the way you write your code massively. Here are some resources to learn more about web accessibility.
- Inclusive Components - learn how to create accessible components (toggle buttons, a todo list, etc).
- Deque - List of axe 4.4 Rules - great for manual accessibility checks.
- Blog Post by Adrian Roselli - Stop Giving Control Hints to Screen Readers
- Scott O'Hara - Blog Posts
- Andy Bell - Piccalilli
- Stephanie Eckles - moderncss.dev - I like the Modern CSS Upgrades To Improve Accessibility blog post. It tells you a practical guide to improve your website accessibility.
- Checklist - The A11y Project - make sure that your website is accessible.
- WAVE Web Accessibility Evaluation Tool
That's it! I hope you find this useful! 🙂
Marked as helpful1@arushkumar05Posted about 2 years ago@vanzasetia Hi Vanza, I was trying something new with the hover effect but yes I understand your point on how it can be confusing to the users. Thankyou for your feedback!
I will definitely check out the resources you have mentioned about web accessibility and learn from them. Thanks a lot for this! :D
0 - @correlucasPosted about 2 years ago
👾Hello Arush, Congratulations on completing this challenge!
Great solution again Arush! Here's my tips for you:
1.Use
<main>instead of<div>to wrap the card container, its better to use<mai>in this case because you’re indicating that’s the main block of content of this page and also because<div>doesn’t have any meaning, it's just a block element.2.The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary
<div>. For this solution you wrap everything inside a single block of content using<div>or<main>(better option for accessibility) and put inside the whole content<img>/<h1>and<p>.<body> <main> <img src="./images/image-qr-code.png" alt="Qr Code Image" > <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main> </body>3.Add transitions to make the interaction smoother while the element gets hovered, you can use a value like
transition: all ease-in 0.5s.✌️ I hope this helps you and happy coding!
Marked as helpful0@arushkumar05Posted about 2 years ago@correlucas those are some really nice insights. I will use them to improve my solution. Thanks a lot!
I checked your work and its really awesome. I am a beginner at front end development. Do you have any suggestions on which resources I may follow to learn front end dev which you may have used (paid/free) ?
0
Please log in to post a comment
Log in with GitHub
Join 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