Design comparison
Community feedback
- @Islandstone89Posted 5 months ago
Hi, well done!
Here are some tips to improve your solution :)
HTML:
-
Remove the
<section
, it is not needed. -
The card heading would likely not be the main heading of a webpage, hence I would change it to a
<h2>
.
CSS:
-
Including a CSS Reset at the top is good practice.
-
I like to add
1rem
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
Move all the properties on
.section-one
tobody
. -
The card should have the same border-radius on all corners, which can be declared with
border-radius: 16px
. -
Remove the width on the card. Setting fixed widths or heights in
px
is not recommended in web design. as it prevents components from adapting to different screens. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
font-size
must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
On the image, add
display: block
and changewidth
tomax-width: 100%
- the max-width prevents it from overflowing its container.
0 -
- @GopalSingh2809Posted 5 months ago
Its a great experience to complete my first project.
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