Over the years I’ve tried out a lot of different ways of learning CSS and JS: books, online courses, articles, video tutorials… But for me, there’s really no substitute for learning by doing. In fact, I’d do so far as to say that this is probably the best way for anyone to learn front end coding (and perhaps most other disciplines too!). That’s not to say that the above resources aren’t useful — I still use of them frequently. But I consider them supplementary to actually learning “on the job”. Here I’d like to share what’s been successful for me when learning new front end skills, and some things that might help you too.
Just start building
Right now I’m trying to learn ThreeJS. I’ve read up on the basic concepts, dabbled in some tutorials, and started working my way through this excellent course by Bruno Simon. But in any course, sticking with the prescribed exercises is only going to help you solve a given set of problems. Personally, I soon get overwhelmed by the amount of material there is to learn, and start to fear that I’ll never have what it takes to become an “expert”. That’s why I wholly advocate jumping out of the course and starting to build real projects as soon as you can. Once you start applying concepts to real problems, things click into place a lot more easily. They don’t have to be big projects either — just building something of your own design can be enough to provide the momentum to keep learning. The course, article or tutorial is always there for you to dip back in, and Google is at your fingertips to help with unexpected problems (or to lead you down new rabbit holes!).
Show your workings
The other thing I would advocate is sharing your work as you learn, even when (especially when) it’s not perfect. (I’ve written before about letting go of perfection.) It’s easy to lose perspective and get caught up in the smallest details, thinking that your work is only worth something if it’s “finished”. But sharing your journey is a way to hold yourself accountable, and any engagement from a supportive community can be extra encouraging. It doesn’t just benefit you as a creator either: seeing work in progress can be really interesting for others, and might well encourage other people to share their work too. Some examples that spring to mind of people who do this are Ilithya (who often shares her work with shaders on Twitter) and Manuel, who is currently updating his website in the open.
Find a community
Sharing your work on social media can be beneficial, but it can also be easy to fall into the trap of chasing likes. There are other ways to share work that can be just as beneficial, like meet-ups (on or offline) and Slack or Discord communities. Finding a space where you can feel confident sharing work, and be mutually supportive of each other, is invaluable. The feedback you get can also lead you in inspiring new directions!
As a working parent, I have a very limited amount of time in which to work on personal projects. One thing that really helps me is to set myself a goal of producing first draft of something (whether an article or a demo) within two hours. Codepen lends itself very well to this: I can spend two solid hours coding without any of the faff of project setup, and none of the pressure of a big project. As much as I like the idea of working on something bigger, I know that if I had to spend many weeks on the same thing, spread over evenings when I’m already tired from work, I’d soon lose motivation and start to feel defeatist. Maybe this works for you, or maybe not — plenty of people have the time and inclination to devote themselves to bigger projects, of course!
And because I’m in the mood for sharing, here’s a little ThreeJS demo I’ve worked on over the past couple of evenings.
See the Pen ThreeJS glow figure with GSAP by Michelle Barker (@michellebarker) on CodePen.