valleyman89/FrontEndMentor-Solution---Advice-generator-app-solution

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
  • Continued development
  • Useful resources
• Author

Overview

Screenshot

Screenshot - mobile

Links

• Solution URL: https://www.frontendmentor.io/solutions/simple-advice-generator-app-solution-HRC54o4wp
• Live Site URL: https://valleyman89.github.io/FrontEndMentor-Solution---Advice-generator-app-solution/

My process

Built with

• CSS custom properties
• Flexbox
• Mobile-first workflow
• Normalize - modern, HTML5-ready alternative to CSS resets

What I learned

I was really tempted to over-engineer this and try using a NodeJS package to grab the Advice Slip API - but keeping it simple seemed to be the most effectice method, and it was nice to just utilise some basic JavaScript.

Continued development

I'll attempt another JS challenge to keep my skills fresh. On the front-end side, I don't think index.html would be considered as semantic so I would like to focus on making sure I'm using semantic markup when using HTML.

Useful resources

• MDN web docs - JSON.parse()
• MDN web docs - Working with JSON

Author

• Github - @valleyman89
• Frontend Mentor - @valleyman89
• Twitter - @steven_rolph