Design comparison
Solution retrospective
Any feedback is welcome
Community feedback
- @vanzasetiaPosted almost 3 years ago
Greetings, Yuenu! 👋
Congratulations on finishing this challenge! 🎉
I have some feedback on this solution:
- Accessibility
- Good job on using
main
landmark! 👍 - For your attribution, you wrap it with
footer
. - For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. - The
Learn More
buttons should be links because if this is a real website, those buttons will navigate the user to another webpage. - FYI, anchor tags are for navigation - moving to different pages or content on the same screen, while the
button
elements are for actions like opening a modal, submitting a form, toggling element, etc. - Next time, if you are using
button
element, always specify thetype
of thebutton
. By doing that, you prevent the button from behaving unexpectedly.
- Good job on using
- Styling
- Currently the headings have a different font family from the design. Even though on design comparison you have used the correct font family.
- Best Practice (Recommended)
- I would recommend reducing the indentation of your code because right now it's hard to read your code. Usually, 2 - 4 spaces should be enough.
Overall, your solution looks good on my mobile view (both landscape and portrait) and desktop view. Good job! 👍
That's it! Hopefully, this is helpful! 😁
0@yuenuPosted almost 3 years ago@vanzasetia Thank you for your comments and feedback, it's really helpful
1 - Accessibility
- @NaveenGumastePosted almost 3 years ago
Hay ! Good Job yuenu
These below mentioned tricks will help you remove any Accessibility Issues
-> Add
Main
tag after body like it should be your container. For 1st heading orh1
tag, use header tag and then inside the header put yourh1
orh2
etc . But use header tag only once in main heading element.Keep up the good work!
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