@py-code314
Posted
Hi,
Nice job on the project. Congratulations!!
I think I can make a few suggestions to improve the code.
- The card is not responsive enough. If the screen width is below 400px the sides are getting cut off. I think you can fix this by changing
.course-cardmax-width units to rem - I suggest giving
.course-cardsome padding to create the space instead of margins on child elements - When I zoom it to 200%,
.attributioncontent is going inside the card. You can fix it by changing units to 'rem' instead of 'px' - Font-size of text in
.course-card__label, __dateand__authorsupposed to be 14px. You might wanna check that - I am not able to access
h2by using keyboard. You can wrap it in<a>tag and add 'focus' pseudo class to make it keyboard accessible
Hope these points would be of help to you. All the best!!
Marked as helpful
@MorganMartin12
Posted
@py-code314 Thank you so much for the feed back I just got done watching a Kevin Powell video of him creating a design and I was like wow I should stop using px for everything and be using rem. Can you expand upon point 5, is this an accessibility test to be able to reach all elements via keyboard?
@py-code314
Posted
Yes, that's an accessibility feature. User should be able to highlight <h2> when they press TAB key just like when it's hovered over. You can just add .course-card__title:focus next to .course-card__title:hover to achieve that
