This is a solution to the Advice generator app challenge on Frontend Mentor.
Note: Delete this note and update the table of contents based on what sections you keep.
The challenge tells us that 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
Desktop |
Mobile |
- Live Site URL: Netlify
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I want to use more CSS Grid than Flexbox when dealing with layouts, I think that the result would probably be way more accurate if I use it more. Also I find Grid more confortable to deal with responsivity.
In futures challenges I want to start using React and Vue more again. I already know how these tools works, but it's always good to practice it.
In general it was a very fun challenge! And probably I spent more time in the stylization than I should.
- Utopia - Fluid Space Calculator- This is pretty helpful when trying to implementing responsivity in font size.
- Working with JSON and Javascript - Mozilla - I still forget a thing here and there while working with JSON, so I'm always with this documentation at my side. The same goes to CSS and JS itself.
- Frontend Mentor - @Tiago-Marts