Advice generator using tailwind + react
Design comparison
Solution retrospective
My approach
This was my first react project. I decided I also wanted to learn tailwind so I have used tailwind here. It made the dev fast but I am not sure if I like it that much. This project also taught me about fetching data and working with state.
Advice One area I wanted to ask the community about was if my code had proper folder structure and if I was missing best practices in any way, please let me know. This is my first time using tailwind and used React after a long time
Community feedback
- @FluffyKasPosted about 1 year ago
Hey,
Your solution looks good! Seems to work as intended. Folder structure wise, i'm not sure what you're asking about. Vite generated a folder structure for you and this challenge didn't require you to add anything on your own really. One thing, I'd say maybe, don't put the README file in the assets, just overwrite the README generated by Vite - using the README template provided for the challenge by Frontend Mentor - and fill it out (screenshots, thought process, etc).
The React part of the challenge looks good otherwise. There are only a few accessiblity and markup issues:
- setting a fixed height on you body isn't ideal. Instead of a width: 100% you could go for a min-width: 100vh to make sure you don't have any height issues on any devices
- always wrap everything in landmark elements, if nothing else, use at least a <main> as a landmark
- the divider is decorative, therefor it doesn't require an alt text, you can leave its alt blank (like you did for the other image)
Question: why did you do this: {JSON.stringify(quote.advice)} instead of just {quote.advice}?
Overall looks great, so well done (:
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord