Design comparison
Solution retrospective
Hi!
Just finished this project after being away from coding for some time, hope everything is ok :).
No question really, just open to any suggestions.
Happy coding!
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi there! 👋
You don't need to specify
font-size: 1rem;. It is already the default value for thefont-size.You should make the background pattern the background image of the
<body>element.Alternative text for images should not contain any words related to "image" (such as picture, photo, logo, icon, graphic, or avatar). It is already an image element (
<img>) so the screen reader will pronounce it as an image.The music icon and the illustration are decorative images. Leave the alternative text empty.
For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
Add
hrefattribute to the<a>. Otherwise, it is not a link—no semantic meaning.<button>element must always havetypeattribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttonsRemove
widthandheightfrom the<body>. It should always fill the entire page. Treat it as the main element of the web page.Also, never set
width: 100vwon the<body>as it does not account for scrollbars when present. It may even introduce potential overflow or scroll bugs.I hope my feedback helps. Have a great coding day! 😄
Marked as helpful0@luisoliverosrdnPosted almost 2 years ago@vanzasetia Thanks!
I'll definitely check those points that you suggested.
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