Darkstar• 1,000
@DarkstarXDD
Posted
- You shouldn't give a fixed width for the container. Because of that on smaller screen sizes your component is not responsive. Instead of
width, usemax-width. - The date and the user name are not headings. They are paragraphs. If it was somehow a heading it won't still be a
h3. Because your site does not have ah2. Headings should go in order.h1,h2,h3etc. You can't skip headings. - That looks like a shadow to me rather than a border. With
box-shadowyou could have easily got the result. - It may not be very clear in the design file, but your whole card should be clickable. Not only the heading. So when you hover over the card, the the box shadow should get bit bigger. You can make the whole card clickable using a pseudo element.
Marked as helpful
1
Aradhana Nayak• 50
@aradhana1807
Posted
@DarkstarXDD Thank you for your input, I'll definitely make these changes and keep this in mind in future.
EDIT: I have made all the changes you have helped identifying, thank you 🙌
1
Darkstar• 1,000
@DarkstarXDD
Posted
- The "HTML & CSS foundations" is a heading. You have made that also a
<p>. Make it a heading. You can make it a<h1>or a<h2>. Remember a site should always have a<h1>. But looking at this component, this won't ever be alone in a website. This will most probably be in a website with more components like these. The<h1>will be on the top of the full webpage. So in that case the heading on this component won't be a<h1>. So you can make this either a<h1>or a<h2>. Either is fine in this case. - The username, "Greg Hooper" is not a heading. It should be a
<p>.
When you are unsure about whether it's a heading or not, think for a bit. Does this line of text describe what is below it? Does the username "Greg Hooper" describe anything that is below it? No. Does the line "HTML & CSS foundations" describe what is below it? It certainly does. So it should be a heading.
Marked as helpful
1
