Design comparison
SolutionDesign
Solution retrospective
Hello everyone π
It's been a while since I submited a solution here, so I did an easy challenge just to stay in shape.π
Had a problem with footer images, so I didn't use them.
Feel free to leave a comment about the code, so I can improve it!
Cheers! π
Community feedback
- @grace-snowPosted almost 2 years ago
Hi
The backgrounds donβt look right on this and I recommend you focus some learning on accessibility. This would fail any audit as there are a lot of problems but the good news is they are easy to fix
- use landmarks for header main and footer
- write good alt text to describe what meaningful images look like, blank for decorative ones. If an image deserves alt text it would not be the same as the heading text.
- make sure interactive elements are properly labelled (eg socials)
- use correct elements for interactivity- anchor tags for clicks that would navigate to another page, only buttons if an action is being performed like toggling content, opening a modal dialog or submitting a form
- make sure headings are used appropriately and in the correct order
- remove all brs (these will be announced by screenreaders as βbreakβ) and instead limit width with max width eg in ch
Good luck
1 - @NikolaD93Posted almost 2 years ago
Almost forgot π , I also made a video preview of the project on my YouTube channel, check it out π
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