Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

My process

1. prepared a project folder with the neccessary files
2. took all the info from the style guide,
3. created css variables for the colors,
4. embedded google fonts
5. built the html
6. styled with css for the mobile version
7. added media queries for the desktop version

Built with

• Semantic HTML5 markup
• CSS variables for the colors
• Flexbox
• Mobile-first workflow
• chrome dev tools

What I learned

• How to embed google fonts.
• line-height

Useful resources

https://www.webdesign-journal.de/google-webfonts-einbindung/

• Google fonts einbinden This article explains not only how to use/embed google fonts very detailed, it also discusses how to choose fonts, why google provides this fonts + advantages and disadvantages. This tarticle is in german. If you know a similarly good/elaborate article in english regarding this topic, don't hesitate to add here.

Author

• Frontend Mentor - @ellienndea
• Twitter - @ellienndea