@Islandstone89
Posted
HTML:
-
You need a
<main>, this is important for accessibility. Change.cardto a<main>. You don't need any divs. -
The alt text also needs to say where it leads (frontendmentor.io).
-
Headings should always be in order, so you never start with a
<h3>. Change it into a<h1>
CSS:
-
It's best practice to write the CSS in a
style.cssfile, and link to it in the<head>section. -
Performance-wise, it's better to link fonts in the
<head>of the HTML than using@import. -
It's good practice to include a CSS Reset at the top.
-
On
body, you don't need to setwidth: 100%, as that is the default.heightshould bemin-height. And you should only have onefont-familydeclaration. -
Remove the fixed width. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.
-
Add a
max-widthof around 20rem on the card, to prevent it from getting too wide on larger screens. -
Instead of
widthusemax-width: 100%, and adddisplay: blockto the image. -
As the design doesn't change, you don't need any media queries in this project. When you do need them, set them in rem instead of px. Also, it's common practice to do mobile styling first, and use media queries for larger screens.
Marked as helpful
