@andreasremdt
Posted
Hey @2023course,
Congrats on solving this challenge and welcome to Frontend Mentor! Your solution looks good already, it's close to the design and only has some minor issues.
First, you should be able to get the exact colors from the style-guide.md
file that's part of the starter code package. It usually contains all colors, font sizes, and more information, depending on the challenge. You are still left to match the correct color to an element, so you either need to be good at guessing or you can use an editing software like Gimp or Photoshop, which contain a color picker. That's what I would do. Same for dimensions, most editing software contains measuring tools.
Secondly, I've got a few suggestions for your solution:
- Make sure to add a
title
to the HTML to make it more accessible and SEO friendly. - The HTML is lacking a semantic structure, which makes it harder for screen readers and search engines. A good start would be to wrap the card in a
main
element instead of adiv
. - You went with an
h3
for the title, but anh1
would be more appropriate, as it's the only and therefore most important heading of the page. Headings should always start from the highest level and descend down. - You don't really need the
div.container
, you can apply the same CSS rules to yourbody
and remove the container. One element less ;) - Using
@import
to load fonts is not considered a best practice, as it's render blocking and could lead to decreased performance. Prefer using the<link .../>
code from Google Fonts instead.
That's about it. Let me know if you have any questions, otherwise, keep up the good work!