For context, I started my coding journey about a year ago: with html, css, javascript -> React 👩🏻💻
One thing which has helped me, is working on a SINGLE project, and re-factoring that over time 🔁
This is not to say BREADTH of experience is not important. It is. Do a variety of small projects and learn from many different people 👨👩👧👦
But...
...DEPTH of experience on a single project has helped me immensely! 👍
This was my progression for learning:
Find a project you like on CodePen (or similar site). When I started learning vanilla javascript, I found a basic to-do list on CodePen, copied over its html/CSS but deleted all its javascript. Then practiced re-writing my own. This way you're not trying to do too many things at once, but are honing in on one area...in this case javascript.
Improve upon the design. After I had re-written the javascript, I practiced re-designing the to-do list with my own CSS. Again, deleting what was there and starting that part from scratch and to my own liking.
Next I wanted to learn React. So I re-factored the whole application using React class-based components.
Then re-factored the whole application again using functional components and React hooks.
Lastly, I wanted to learn Styled Components, so I re-wrote all my CSS classes using a Styled Components approach.
This has been incredibly helpful to me, as it allowed me to see how the same functionality could be implemented with different approaches.
And it really made me appreciate the relationship between vanilla javascript and React as a framework.
Using this approach, I started off with a very basic to-do app:
https://twitter.com/threehourcoffee/status/1225241414667161600
And turned it into the project I work on now:
(it is a to-do list that lets you add a timer to each and every task)
Hope this is helpful! Any questions, feel free to ask in the comments.
Image source: @visualashish
Top comments (0)