Design comparison
SolutionDesign
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi Jorge,
Congratulation on finishing this challenge. Great job on this one! I have few suggestions regarding your solution:
HTML
- Page should contain a level-one heading. In this challenge , as it’s not a whole page, you can have
<h1>
visually hidden withsr-only
.
- In my opinion, the images are much likely to be decorative. For any decorative images, each img tag should have empty
alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images.
- What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the
<a>
. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.
- Add
border-radius
andoverflow hidden
to the main container that wraps the three cards so you don't have to setborder-radius
to individual corners.
In order to center the card on the middle of the page , you can use the flexbox properties and
min-height: 100vh
for the<body>
add a little padding to the body that way it stops the card from hitting the edges of the browser. No need forpadding-top
.line-height: 2rem
Use a unitless line-height value to Avoid unexpected results. You can read more in mdn
- Consider using rem and em units as they are flexible, specially for font size If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
Hopefully this feedback helps.
Marked as helpful0 - Page should contain a level-one heading. In this challenge , as it’s not a whole page, you can have
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