@kaamiik
Posted
Hi. Congratulation for doing this challenge. I have some points from your code I wanna mention:
1.You wrap the Learning, the date and the text into a div that is wrong and you can use p for this that is semantic.
-
When an element has hover effect, then it should be interactive. So you have to wrap it between
aorbuttontoo. If It takes you to a new page then It'saand If doing an action then It'sbutton. Your h1 in the design has hover effect. -
You can not limit your container with
widthandheightthat have text inside of it. You only needmax-widthfor this inremunit andmin-height: 100vhin body to justify your card. -
You need a proper CSS reset in your style. Andy Bell and Josh Comeau both have a good resets.
-
Your font-size should be in
remand notpx.
@moaz-shamim
Posted
@kaamiik Thank you for the feedback Kamran Kiani ! I’ve made the following changes based on your suggestions:
Semantic HTML: I replaced the div wrapping the Learning, date, and text with a <p> element for better semantics. This helps to ensure the content is properly structured.
Interactive Elements: I added appropriate interactive elements for hover effects. For the h1, since it has a hover effect and redirects to a new page,
Font Size in rem: I changed all font sizes from px to rem units to improve scalability and accessibility, ensuring a better user experience.
I appreciate your input, and I'm happy to make these improvements!
