Mohamed ELIDRISSI• 455
@elidrissidev
Posted
Hey there! Great job with this one, you've made it look very close to the design. I noticed some points that you can improve in your solution:
- Every page can have at max one
h1
, you have used 3. Consider replacing them byh2
. If you wanna take it one step further, you can include anh1
but make it visually hidden since it's not in the design to make it only readable by screen readers. - You've made the heading of every card all uppercase. While that's how it looks in the design, making them all uppercase in your html means screen readers will interpret them as an abbreviation (i.e. they will spell it word-by-word). To fix this, you should write them in normal casing in the html and add a
text-transform: uppercase
to the headings. - This one is a minor detail: You can avoid having to set
border-radius
on the first and last card by setting it on their parent. After doing this you'll see the corners still sharp so to fix it you need to addoverflow: hidden
to clip the edges of the cards sticking out.
This is all I have, I hope it was helpful. Good luck to you!
Marked as helpful
0
President Tree• 360
@PresidentTree
Posted
@elidrissidev Thank you for the feedback! All the changes have been made!
1
Mohamed ELIDRISSI• 455
@elidrissidev
Posted
@PresidentTree I checked them. Well done!
0