Design comparison
SolutionDesign
Solution retrospective
all feedback is welcome.
Community feedback
- @NehalSahu8055Posted over 1 year ago
Hello Coder π.
Congratulations on successfully completing the challenge! π
Few suggestions regarding design.
-
To properly center the card on the page.
-
USING FLEXBOX
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
- USING GRID
body{ min-height: 100vh; display: grid; place-items: center; }
- For image like
.svg are decorative
which screen readers will not render it to be important and skip it, so it makes no sense to addalt
and leave itblank.
<img src="images/logo.svg" alt="" id="logo-icon">
- Try to add
accessibility features
like aria, sr-only, title.
aria : link
.sr-only:link
I hope you find this helpful.
Happy codingπ
Marked as helpful0 -
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
LABELS π:
input
elements wants alabel
associated with it
- A
aria-label
is used to create a caption for a form control. Thearia-label
can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute
- Effective form
labels
are required to make forms accessible. The purpose ofform
elements such ascheckboxes
,radio
buttons,input
fields, etc, is often apparent to sighted users
- Even if the
form
element is not programmatically labeled. Screen readers users require useful formlabels
to identifyform
fields.
- Example:
<input type="email" aria-label="Your email" placeholder="Your email address..." id="email-input" style="border-color: rgb(255, 82, 99);">
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0
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