Design comparison
Solution retrospective
Hey Folks , I would love to have reviews on this solution, Any feedback ? please also do provide your suggestions ..!
Community feedback
- @VCaramesPosted about 2 years ago
Hey @payalpagaria, some suggestions to improve you code:
-
text-align
should never be in the Body Element. Instead it should be in the card container. -
Add
background-size: contain
to the Body Element to fix the background image. -
Increase the size of the component to better match the FEM example.
-
The “Illustration” and Music Icon serves no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
-
Delete all the
br
you added. They are not needed. -
Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:
Happy Coding! 👻🎃
0 -
- @charlesmamboPosted about 2 years ago
Hey what's up buddy your looks great but I think it will be look great perfect if you add padding bottom maybe 8px to your cc container or you can increase the height because the last button is also at edge of your container.
cc{ height:520px; width: 350px; background-color: hsl(225, 100%, 98%); border-radius: 10px ; }
0 - @AdrianoEscarabotePosted about 2 years ago
Hi payalpagaria, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
- every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the
main
tag.
The rest is great!
I hope it helps... 👍
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