Raise your hand if this sounds like you:
You’ve been in the tech industry for a number of years, you know HTML and CSS inside-and-out, and you make a good living. But, you have a little voice in the back of your head that keeps whispering, “It’s time for something new, for the next step in your career. You need to learn programming.”
Yep, same here.
The Burden of Information
How about this, does this sound familiar, too?
You’ve attempted to learn programming before with a few different languages. You’ve read books, you’ve subscribed to online courses, and you have a bunch of folders littering Dropbox with half-completed code and copied exercises.
I’ve gotten halfway through The Rails Tutorial and Learn Python The Hard Way. My bookshelf is full of massive tomes on everything from ActionScript to Processing. But nothing ever seems to stick.
I can figure out what a PHP file does and understand a bit of jQuery, but if you asked me to sit down and write the most basic of programs, I’d be hard-pressed to do it. After so many failures, I think I’ve figured out the problem.
Any time I start learning something new, I immerse myself as fully as possible in that topic. I buy books, I watch videos, and I listen to podcasts. It’s the same tactic that a lot of companies push as the best way to learn a new topic, whether it’s programming, cooking, or picking up Mandarin in a weekend. Immersion is a key part of learning, apparently.
But the problem is that people (or at least me) have a threshold for how much information they can process before feeling overwhelmed. I call it the “burden of information.” Information is wonderful, but too much of it weighs down the mind, leaving you burnt out and hopeless, and leading you to give up and feel like a failure.
I broke resources out into four categories, based around the different ways that I like to learn (and I suspect others like to learn, too). Those categories are: reading, watching, listening, and, most importantly, doing.
Here’s what I found.
My favorite way to learn new things is by reading about them. While that mostly means books, I also love filling up my RSS feed with good blogs and my inbox with great newsletters.
- You Don’t Know JS by Kyle Simpson
There are a bunch more that I came across but most seem too complex at this point in my learning. Or others belong to individuals that talk mostly about their own projects and less about the basics or the process of learning. I’ve bookmarked all of them, though, to dig into once I’m more up-to-speed.
I’m an unabashed lover of HTML newsletters, as evidenced by my previous writing on the subject. So, naturally, I hunted down a couple to subscribe to:
- Versioning by SitePoint
Another good way to learn is by watching others do the thing you want to do. But this is almost always secondary to me reading to learn. Still, when I get stuck on a topic or want to dig deeper into certain aspects of coding, watching videos will be a good way to do it.
For the most part, there are two categories of videos online: courses and standalone videos (mostly on YouTube). There are a ton of options for both, but these are the best from what I can tell:
- ES6 for Everyone by Wes Bos
- The Coding Train by Daniel Shiffman
- Fun Fun Function by Mattias Petter Johansson
- JSConf YouTube Channel
Podcasts are an excellent way to learn about concepts and immerse yourself in a particular culture without needing to be actively tied to a screen. Basically a good way to keep learning while I get the dishes done or pick up after my kids.
Like I mentioned at the beginning, I’ve been writing HTML and CSS (and playing around with other technologies) for years, so I’m a bit biased on some of my tools. I mostly work with Sublime Text on my Mac, so I plan on sticking to that for writing code locally. But, as I’ve been working more on my iPad Pro lately, I’d like to augment Sublime Text with a few additional tools for writing and testing code while I’m learning.
The main one will be CodePen. I’ve been a Pro subscriber for a while and find that it’s tremendously useful for writing code no matter what platform I’m using. Since it works in the browser, it’s easy to pop open a pen on my iPad while I’m hanging out at the coffee shop and have a full-fledged JS development environment ready to go. It also has a few features that I’m sure will come in handy at some point: private pens and collections for when I want to keep embarrassing code secret, projects for when I want to work on more substantial stuff and have it hosted somewhere without any pain, and collaboration mode for if I ever need to tap some friends to help me out with some tricky code in realtime.
I looked at other tools like JSFiddle and JSBin, but I’m comfortable in CodePen and their features are killer, so I’m sticking with it.
One other online tool that I plan on using at some point is Glitch. It’s a relatively new tool for writing code and sharing it online and has a wonderfully eclectic community that’s built up around it. While I think most of my coding will be done in CodePen or locally in Sublime Text, I think Glitch will be vital when it comes time to learn about more complex things like interacting with APIs, making weird bots, and testing out some of those scary frameworks.
My Learning Plan
- Code locally in Sublime Text but primarily online with CodePen
- Keep up with news via the blogs, newsletters, and podcasts I found
- Start working through the videos and books listed above after I’m done with Wes Bos’ tutorials
- Build some (hopefully) cool stuff in the process
One of the most important aspects of learning, though, is getting feedback on what you’re actually doing. For that, I’m going to be calling on a few friends and anyone reading this who wants to pitch in.
Finally, if you have any other resources or strong opinions on the ones I’ve listed above, let me know in the comments below. I’m sure a lot of you have been through a similar learning process and have some amazing tips you can share. I’d love to hear from you, so drop some knowledge right here on CSS-Tricks or email me.
Interesting idea here: stop reading and start typing! Cheers
I couldnt imagine building an app entirely using PHP. The user experience would be terrible with constant page refreshes after every single action on the page requiring forms everywhere. Besides that you still need to connect to a database for data management of any kind.
Very good post! I love the resources you’ve provided. I’ve heard of a few of them, others I haven’t heard, and some I probably should be looking into. Thank you for sharing!
Once again, thanks for sharing. There’s a quote I like from C.S. Lewis that goes like this…
“The only people who achieve much are those who want knowledge so badly that they seek it while the conditions are still unfavorable.”
Gotta keep learning! And kind of like how you pointed out, try to be brave even though there is a ton if information out there.
I would consider myself “begintermediate” at JS and totally in this boat.
I want to +1 on Anthony Alicea’s courses on Udemy. He also has a Nodejs course that is fantastic. Anthony is an outstanding teacher and goes to great lengths to explain everything. He takes nothing for granted and reinforces terms and walks through functions throughout the entire course.
He sometimes repeats a concept a few times, but explains it in a slightly different way each time, which really helped my understanding. A very good teacher.
Just a final note here; don’t be discouraged if you don’t get a particularly difficult concept (once you get past the basics) like prototypical inheritance, hoisting, function/block scope, type coersion, automatic semicolon insertion, immediately invoked function expressions, etc. It’s all really confusing, and I surely didn’t get it all right away, but don’t let that stop you. It’ll all come in time. You most likely won’t come across that stuff directly until much later, so don’t worry about it.
One of the best things about this article is the chart using the VARK learning model. I appreciate it when people take into consideration that we all learn different and having resources grouped based on learning style makes life a lot easier.
I didn’t even realize that the VARK model was out there (or at least that it was named that). That’s primarily just how my brain breaks things down and how I understand the different ways to learn. I’ll definitely be using that acronym from now on!
@Kyle Shover I second your opinion on Anthony Alicea’s course on Udemy. I consider it to be the best investment of my life. Can not recomment it enough
I had the same problem like You. My plan which is still working is to focus on pure JS coding. No frameworks no other stuff which can pull me out of focus point, which is good knowledge of programing in JS. One book, but good is enough for beginning (in my case it was HeadFirst Java Script programing by Eric T. Freeman, Elisabeth Robson. Super simple for dummies but it’s working). Some good start point is of course some live coding site’s FreeCodeCamp or Codecademy(like You mentioned). But most top of the top important thing is to start code by your self. First simple tasks, but it has to be your code. Get some problem and solve it. For me it was adding numbers written in two inputs. It take me a while but satisfaction was tremendous. Code every day it is good path to make a goal.
Any tutorial series by Wes Bos is the gold standard. And tutorials by his Syntax.fm podcasting partner Scott Tolinski (find them at leveluptutorials.com) are a very close second. And listen to their podcast–not only full of practical advice, but lots of fun.
You are creating subconscious resistance, which keeps you from getting started. Your goal to learn all the details derails your progress and even this blog post detracts you from accomplishing your real goals. To build something.
“War of Art” is a great book on this topic. As well as “The heart to start” by David Kadavy
It’s like you read my mind with this article. I’ve tried so many times to learn JS and it never sticks. I’ll follow your plan and see if it works for me. Thanks!
Other websites you can try that are free is sololearn.com and khanacademy.com.
The Solo Learn website is strictly about programming whereas the Khan Academy website is several topics for kids in school as well as programming.
Great summary! I know that very well from my own experience!
Oh and on the topic of collaborating in real time with other devs in your text editor, Atom has Teletype https://teletype.atom.io/ and that alone for me is a reason to use Atom and code with friends, super easy & just works plus the feeling you can get from working on code together is simply awesome.
There is so much you can learn in a quick chat with a more experienced dev looking at code together, I would even argue that no other way of learning makes you pick up stuff that fast. So be nice to people that know JS (generally be nice to all people!!) and who knows sooner rather than later you might find yourself a mentor/tutor that is happy to send a few minutes a day or hours a week doing some pair programming.
Not only does it help you but it also helps them since explaining what you know to someone else is also a highly rewarding feeling and makes the knowledge you think you know stick even more and be seen from different perspectives.
To be fair, VSCode also has this in the works.
Nice article with great links. Especially like how a few of the links include people strongly influenced by functional programming.
I’m a learner who is still in the beginning stage of actually coding but have decided to focus on building things in React with styled-components for CSS-in-JS and JSX for HTML-in-JS.
IdI suggest reading Eric Elliot’s articles, too:
For React and Redux this is a great article by James Sinclair:
As you have come from a CSS background I recommend these CSS articles and videos:
I’ve explored a lot of JS resources myself. Here’s some I can recommend, and all mostly free.
* Nicolás Bevacqua books
I learn JS as well. My method of learning is similar to yours but I found out that online courses don’t work for me. I do tasks at Codewars using a book and other resources to solve them. Also I add JS into my projects and it works for me! Good luck!
I swear by freeCodeCamp. That place will get you started learning things faster and in a better order than anywhere else I’ve tried. Skip ahead past the HTML/CSS stuff (or don’t; your choice) and dive right into the JS. Tasty, delicious JS.
Also, Colt Steele’s Web Developer Bootcamp course on Udemy is a VERY fine investment ($10).
Thanks for this really cool article! I personally see a lot of value in learning from other people’s learning strategies. I would love to see how good (or not so good) Eloquent JS turns out for you (I’m using You don’t know JS). Also, I do hope you that you do a follow up post on whether or not you’re going to dive into the world of JS frameworks (and/or node.js) and if so, which one you pick.
Excellent article! I adore the resources you have provided. I have heard of some of them, others that I have not heard, and a few I probably ought to be looking into. Thanks for sharing!
Thanks again Chris for your candor and honesty. I always feel like a human being again after reading your stuff. Once again you hit on exactly the struggle many of us experience. Recently I decided I just had to learn JS – again. Free Code Camp is good, but I found myself trying to do projects I didn’t feel I had the foundation yet to tackle.
OOPS! Sorry Jason, the way you talk/write is reminiscent to me of the way Chris writes and thinks. Thanks for the great article. Really good. I don’t feel like the special case guy now that’s the only one behind the curve.
I agree. You will not find a better beginning/intermediate JS course than Gordon Zhu’s free Watch and Code video course. In my opinion, it sets the new standard for teaching coding.
Very timely! I’m just starting my JS learning. I’ve gone so far as to hire a tutor through Wyzant.
Great summary, which im looking for
Just wanted to add some hard-learned tips:
I’d recommend that if you want to start learning JS work out exactly WHY. Is to open up employment prospects? To be able to develop you own project? To be better at your own job? Be cautious of wanting to be learn because you think it’s expected — what you learn should contribute to your career path. Then work out WHAT you want to be able to do with those new skills — having a real-life project to share with your friends and colleagues is an amazing motivator. Offer them updates and create deadlines and they’ll hold you to account, increasing your likely-hood to follow through.
The principles of programming are the same regardless of the language, but the language often comes with best practices, and some key paradigms that are actually a part of the ENVIRONMENT in which they run (eg. while Node is js it runs on a server which is a different environment to a browser). My recommendation would be to start with some basic programming (variables, loops, conditionals, functions, classes etc), then using those skills to learn a frontend js framework (Vue, React, Angular). That will be a gateway to server-side stuff as you’ll probably need it to build your project or run the backend.
Also check out this wrap up to identify what would is current in the js landscape: https://stateofjs.com/2017/
Listen to this little voice, you won’t regret it ;).
I’ve been a developer for 15 years now with various programming languages and I can tell you that the best way to learn a programming language is to use it to build a project you need.
If you just do some random exercises you won’t keep the momentum and the motivation. You need this dopamine shot you get when building something from scratch with your bare hands!
Nothing beats working on a real project to learn a programming language. You listed a huge collection of resources, that’s great, but there are tons of others materials to read/view/digest and there will be a lot more in 1 month or 6 months. These won’t teach you how to develop. A real world project will.
My single advice is: pick one book and stick to it. Don’t watch other stuff unless you’re stuck. Build your project and use the book to help you out. But don’t try to ingurgitate everything out there, you won’t have the time to plus it’s useless. Work on the basics first, you’ll have plenty of time later to sharpen your skills with advanced material.
That’s the only way to stay motivated to learn a programming language. Build your own real project while learning.
PS: I refreshed my HTML/CSS skills recently (didn’t touch this for decades, CSS almost didn’t even exist when I used HTML). And I can tell you that this domain too can be overwhelming. CSS3 is awesome, but there are also new tools around it like CSS pre-processors/post-processors, new build tools like gulp, grunt etc. and new workflows to learn. I was pretty shocked!
The more we move forward the more overwhelming it will be. So if you want the less overwhelming landscape for JS, the best moment to learn was yesterday. The second best moment is right now, so you’re on the right track! Good luck!
I’m working my way through the ‘You Don’t Know JS’ book series now and I’m finding it a good breakdown of the language and it doesn’t assume you already know half of what it’s explaining, like a blog posts seem to do.
I also like the codewars website for little challenges that are good for testing your learning so far. After you’ve completed a challenge you can see everyone else’s solutions too which I find super helpful for learning new bits.
Don Ricardo Jr. wrote in, after the buzzer:
Gordon Zhu’s courses: