Frontend Mentor - Advice generator app (solution)

This is a solution to the Advice generator app challenge on Frontend Mentor

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Table of contents

• Frontend Mentor - Advice generator app [solution]
  • Welcome! 👋
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

Screenshot

Links

• Solution URL: Solution repository
• Live Site URL: Solution Live Site

My process

Built with

• Semantic HTML5 markup
• CSS
• SASS
• Flexbox
• Javascript fetch API

What I learned

With this challenge I was able to test my skills, I tried to use the correct html semantics, using sass I declared color variables that I used throughout the project, finally with flexbox I worked to arrange the elements and display the mobile version. With javascript the advice API is consumed, using fetch

Continued development

These challenges help me to continue developing my skills in html and css, I am currently learning javascript.

Useful resources

• Mediaquery - This helped me breakpoint for responsive design.

Author

• Frontend Mentor - @josergz
• Twitter - @_josergz