Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Column Preview Card Component

@PresidentTree

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I do not think anything is wrong with the code, but any feedback is still appreciated!

Community feedback

@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 by h2. If you wanna take it one step further, you can include an h1 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 add overflow: 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

@PresidentTree

Posted

@elidrissidev Thank you for the feedback! All the changes have been made!

1

@elidrissidev

Posted

@PresidentTree I checked them. Well done!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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