Assuming you have knowledge in html , css , javascript and a little bit of react
I’d second what @camperextraordinaire says - just start one of the projects and don’t look up a tutorial on how to do it.
The Random Quote Machine is a great place to start. In terms of UI it’s extremely easy. The challenge is to find an API to use (or just fake one with a json file in your repo) and use data fetching and re-rendering to put the quote on the screen.
I also really liked the JavaScript Calculator. This one doesn’t have third party APIs to deal with, but it is tricky to handle all the state and inputs properly and still have it behave like a real calculator. It’s challenging, but rewarding.
The Pomodoro Timer is my other favourite. This one has less to manage in terms of state when it comes to producing an accurate calculation, but managing which mode you are in and maintaining a countdown presents some challenges.
The key to attempting any of these is to not look at tutorials.
Look at the app you want to recreate and plan out all of the things you’ll need it to do (the tests help with this).
Then tackle each problem one at a time.
For the quote generator, for example, I’d consider getting a rough UI mocked up in the browser first, with HTML, CSS, or with React if you prefer.
Then add interactivity to it with a button that triggers a simple action - like a console.log, or an alert().
Once you have done that, then you need to solve the problem of dynamically pulling in your data - maybe hitting an API. Feel free to look at the documentation for the fetch() method in JS, that’s fine, just don’t read / watch ‘How to build a quote generator’ tutorials.
Then tie that button to that fetch behaviour…and iron out any bugs as they come.
Once you get used to this pattern of working, you’ll no longer need tutorials on how to make a specific app, rather you’ll use those tutorials and other docs for inspiration about how your cool ideas could be implemented.
Happy coding!
4 Likes