@Islandstone89
Posted
Hello, your solution looks good, and especially the HTML is really good. Here are a few suggestions, hope they are clear and helpful!
HTML:
- "Learn More" would navigate to another page, hence it is not a button but a link.
If included:
-
.attributionshould be a<footer>. -
Footer text needs to be wrapped in a
<p>.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>of the HTML then using@import. -
It's good practice to include a CSS Reset at the top.
-
Font-size must never be in px. Use rem instead.
-
You do not need the
margin: 0 autoon thebody- it is the<mainyou want to center, and it is centered by using Flexbox on thebody, like you have done. -
Remove ALL fixed widths and heights, as well as percentages. The content should determine the component's size, and the component should adapt to different screens. Setting fixed dimensions is rarely a good idea.
NB: Setting width in px can be OK on things like icons, so you don't need to remove that one.
NB 2: It might be an idea to set a max-width in rem, to prevent the component from getting too wide at larger screens.
- Media queries should not be in px, but in rem.
Marked as helpful
