Frontend Mentor - Advice generator app solution

This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: Github
• Live Site URL: Vercel

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow

What I learned

I've been learning all week on how to work with API's and JSON-files. This was a nice excercise to put that what I learned into a real thing.

Useful resources

• Creating Glow Effects with CSS - I had a look here on how to write the glowing shadow for the button. The diagram on the website really helped me to adapt my code.
• Responsive images - This is the first time I used the <picture>-element. While I actually had the intention of using srcset I noticed upon reading picture would be better.

Author

• Frontend Mentor - @graficdoctor
• Twitter - @graficdoctor