Design comparison
Solution retrospective
I am proud of the speed at which I was able to complete this challenge.
What challenges did you encounter, and how did you overcome them?I was unaware of how to implement hover. I looked it up.
What specific areas of your project would you like help with?I still want to know how to use SASS better and maybe what elements that are divs should be replaced with more semantic html.
Community feedback
- @py-code314Posted 3 months ago
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-card
max-width units to rem - I suggest giving
.course-card
some padding to create the space instead of margins on child elements - When I zoom it to 200%,
.attribution
content 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, __date
and__author
supposed to be 14px. You might wanna check that - I am not able to access
h2
by 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 helpful1@MorganMartin12Posted 3 months ago@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?
0@py-code314Posted 3 months agoYes, 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 that0 - 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
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