Design comparison
SolutionDesign
Solution retrospective
Any feedback is very welcome. I try to update my projects according to all constructive feedback I'm given.
Thanks for your support and happy coding.
Community feedback
- @vanzasetiaPosted almost 3 years ago
Hello, Lorentz! 👋
Congratulations on finishing this challenge! 👏
I have some feedback on this solution:
- Accessibility
- Good job on using landmarks correctly! 👍
- Anchor tag should always have
href
attribute. In this case, you can have either a/
or#
as the value of thehref
attribute. - For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. 🙂 - 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.
- Styling
- Currently on the desktop view the card elements are not centered vertically. My recommendation is to make the
body
element as a flexbox container. Also, remove theheight: max-content;
from the.container
element, I guess it doesn't do anything.
- Currently on the desktop view the card elements are not centered vertically. My recommendation is to make the
/** * 1. Make the card vertically center and * allow the body element to grow if needed */ body { display: flex; align-items: center; justify-content: center; min-height: 100vh; /* 1 */ }
I hope this helps! Keep up the good work! 👍
Marked as helpful1 - Accessibility
- @EmmanuelHexerPosted almost 3 years ago
Great work overall man. Keep it up
1
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