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
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Generate a new piece of advice by clicking the dice icon

Screenshot

Links

• Solution URL: solution URL
• Live Site URL: live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• TailwindCSS - React framework
• AdviceSlip - Advice api

What I learned

Most importantly for me, this is a project to test my tailwind skills, surprisingly i must say am beginning to fall for the framework, the flexibility and arrangement is just nice. though am still trying to learn and master it am sure to build a lot more things with this technology.

and customizing the styles is my best part

 theme: {
    colors: {
      "dark-blue": "hsl(218, 23%, 16%)",
      "dark-grayish": "hsl(217, 19%, 24%)",
      "grayish-blue": "hsl(217, 19%, 38%)",
      "neon-green": "hsl(150, 100%, 66%)",
      "light-cyan": "hsl(193, 38%, 86%)",
    },
    boxShadow: {
      "neon-green": "2px 3px 25px hsl(150, 100%, 66%)", // Adjust the shadow as needed
    },
    fontFamily: {
      manrope: ["Manrope", "sans-serif"],
    },}

Continued development

i am now enjoying and getting to know more about reactjs and tailwind. S urely, i would build more with these technology

Author

• Website - Ozioma Egole
• Frontend Mentor - @Ozioma45
• linkedin - @ozioma-egole
• Github - @Ozioma45