Design comparison
SolutionDesign
Solution retrospective
Your feedbacks would be really appreciated and helpful.
Community feedback
- @vanzasetiaPosted almost 3 years ago
š Hi Youssef!
š Congratulations on finishing this challenge! I have some feedback on this solution:
- Accessibility
- š Good job on using
main
landmark! - On this challenge, use interactive elements (
a
) for any elements that have:hover
or:active
states. - Create a custom
:focus-visible
styling to any interactive elements (button
, links,input
,textarea
). This will make the users can navigate this website using keyboard (by usingTab
key) easily. - Why are using
label
element?label
element is used to labelinput
element. I would recommend usingp
element instead oflabel
element.
- š Good job on using
<svg width="11" height="18" xmlns="http://www.w3.org/2000/svg"></svg> <label>0.041 ETH</label>
- All the icons are decorative and because you are using inline svg then add
aria-hidden="true"
attribute to thesvg
to prevent the screen reader from pronouncing them.
<svg aria-hidden="true"> </svg>
- For the avatar, you can use the author's name as the alternative text of it.
- For the equilibrium image, I would recommend adding the alternative text that says preview Equilibrium. The alternative of the image would work as the text content for the
a
element. - Use CSS
border
instead ofhr
element.hr
element has a role as a separator. In this case, all the content below it should not be separated. - I would recommend writing a good title for your webpage.
- Use
rem
or sometimesem
unit instead ofpx
. Usingpx
will not allow the users to control the size of the page based on their needs. - Styling
- For the styling, overall the card is smaller than the design. You can try to adjust everything until it looks similar to the design.
- Best Practice (Recommended)
- Remove the
xmlns
attribute from thesvg
. Reference: hail2u/html-best-practices GitHub repo - Write your code with consistent style (e.g. the indentation, quotes, whitespace, etc). If you write your code with consistent style, it will make it easier to read for everyone (including you, yourself).
- Remove the
That's it! Hopefully, this is helpful!
Marked as helpful2@youzh00Posted almost 3 years ago@vanzasetia What a feedback i really appreciate your help, thanks a lot.
1 - Accessibility
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