Column Preview Card Component

Community feedback

• 

  Mohamed ELIDRISSI•455

  @elidrissidevPosted about 3 years ago

  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

  ---

  

  President Tree•360

  @PresidentTreePosted about 3 years ago

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

  1

  

  Mohamed ELIDRISSI•455

  @elidrissidevPosted about 3 years ago

  @PresidentTree I checked them. Well done!

  0