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.
This was a fair challenge that helped me exercise my newly learnt Javascript concepts such as making API calls, visualizing and processsing the data from an API and also responsive design. I built the app from scratch with no figma files so the measurements may not exactly much the design from frontend mentor.
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
- Solution URL: Advice-generator on frontend mentor
- Live Site URL: Advice-generator
I first setup the project repo on gitHub and analysed the designed and what was the most appropriate css unit to use on the project. Then i mapped it out on paper and made a plan on how to approach the coding challenge and also noted down the parts i thought i wasn't familiar with and then i started coding.
On various occasions I'd stop and learn or review a concept and intergrate it in the project.
Ofcourse I never forgot to play music and drink water while i was coding.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Rest APIs - API tutorial
- Javascript
I really didn't learn alot as most of the concepts I used in this project needed rather revision than learning from scratch. I was just happy to practice my coding as a habit i am creating.
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
- Scrimba - The frontend career path has taught me almost 70% of everything I know about frontend developing. Their responsive, in-depth tutorials are really helpful.
- Find me here - @Bindekere
- Frontend Mentor - @Bindekere
- Instagram - @lutalo
- water
- spotify😂