@Islandstone89
Posted
Hi there, this is my suggestions:
HTML:
-
You need a
<main>, this is important for accessibility. Change.cardfrom a<div>to a<main>. -
Remove the
.childdiv, you don't need it. -
The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).
-
Headings should always be in order, so you never start with a
<h4>. Change it into a<h1>.
CSS:
-
Use the style guide to find and implement the correct typography.
-
It's good practice to include a CSS Reset at the top.
-
There should only be one property per line - this makes the code clear and readable.
-
Remove the fixed width on the card. You rarely want to set fixed dimensions, as this is the easiest way to cause responsive issues.
-
text-align: centershould be set on thebody, and removed elsewhere. -
If you want something to have zero padding, write
padding: 0, without the unit. -
Remove
grid-template-columns, there isn't a need for one here.
