Update July, 2013: I just gave a talk on JavaScript for Designers at jQuery Portland. Eager learners can watch me giving the presentation and find the slides online. Many thanks to the organizers of jQuery Portland for the excellent recording and the opportunity to give this talk!

When I was 10, I loved playing video games so much that I wanted to learn how to make my own. I marched to the library and checked out their only book on programming–a manual mostly about wiring circuit boards. I had no circuit boards to wire, and I could not understand any portion of the book. I did not learn to program anything that day.

Now, almost 18 years later, I feel like I am finally learning to program. Specifically, I’m learning JavaScript. No matter how ace your CSS is, you can’t call yourself a front-end developer without at least intermediate JavaScript skills. But, as a person without a computer science degree, I often feel JavaScript resources are made for people with a much deeper knowledge of programming, like the manual I tried to understand at 10. Now that I’ve found a learning path that works for me, I want to share it with others who might be struggling in their JavaScript education.

Although I’ve written this specifically for other designers who want to learn JavaScript, these lessons can be applied equally as well to other languages by people from other industries outside the development sphere.

(And if you just want to know what books I recommend, feel free to skip ahead.)

Yes, you can (learn to program)!

There are many different ways to go about learning. Some people just need a github account and some free time and they “get it.” I would argue that they have “got nothing.” Like a tourist who thinks they’re a translator after memorizing their phrasebook, they have no grasp of the grammar, best practices, history, or culture they’ve “picked up.” And if they do not invest in their continuing education, they can only embarrass themselves and their associates and have all sorts of misadventures for it.

When I was a little girl, I had a friend who could read to me from our favorite storybook. I went to my mother in tears because I still hadn’t learned to read. Next year, when school started, my friend had to take remedial reading lessons while I performed very well. It turns out she had only memorized the stories in the book, and the trick had hindered her learning to read. So don’t be ashamed if you haven’t “got it” like someone else seems to have. They may be worse off than you are!

Programmers are no different from you or the next person. They don’t have to ace calculus. They don’t have to be “gifted.” There are plenty of “normal” (and abnormal) people in the industry who did not pop out of their mothers’ wombs slinging code.

So how can they do all this seemingly magical stuff with a text editor? How can a seamstress make a gorgeous reproduction 18th century French courtesan’s silk jacquard ball gown with embroidery and panniers? Or how can a world-class chef make a meal so delicious you will remember it even on your deathbed? Simple: education and practice, practice, practice. The seamstress first had to learn to sew, and it was a grueling process. The chef had to work his way up from kitchen hand, also a grueling process. None of these “talented” people miraculously woke up being great at what we admire them for. Even that programmer had to start with a simple, stupid “Hello, world!” program.

The best part is that when you have truly mastered one language, you can pick up others with ease. All languages share the same principles, so after nailing the basics, you only have to learn their differences.

Opportunity, evaluation, and repetition

What separates the good, the bad, and the great programmers? Three things:

Opportunity

You need the opportunity to use code. If you learn a foreign language just for the sake of learning a language but you have no intention of ever traveling or being around people who speak the language, you’ll forget it. So if you want to retain what you’ve learned, make sure you’re going to use it at work or in your daily life.

Evaluation

Once you start coding, you need some way to evaluate what you’re producing. If you work with other developers, you can ask them to help you evaluate your work in code reviews. If you’re working on your own, there are sites like Stack Overflow where you can post code that’s not working and get responses from people who can tell you what you’re missing. Even better, if there’s an opensource project you use, love, and/or believe in, you can contribute to it on github by submitting pull requests. You’ll get plenty of feedback from community authors. Don’t feel foolish about your naivete. Every programmer everywhere has gone through what you are going through, just as all adults have been children. If anyone should be silly enough to give you grief, razz ‘em for it! Razz ‘em good!

Tip: Evaluations are only as good as the people giving them. Weigh evaluations on the expertise and reputation of the people delivering them to avoid being lead astray by know-it-all novices.

Repetition

To retain everything you’re learning, to truly master it, you have to do it over and over. The basics, the for loops, the array literals, the evaluations, these will become second nature to you, like riding a bicycle. If you went through a midlife crisis and ran off to raise parrots on an island for years then had a change of heart and wanted to return to programming, you’d open that text editor and your skills will still be there, waiting for you to put them to use.

Find your learning style(s)

Some people, like myself, learn best from reading. We can imagine most things in our mind’s eye, and we don’t need a human being nearby, answering questions. Others learn best by doing, by handling examples and tweaking code to see what breaks and what works. Yet others learn best by modeling their behavior on a mentor’s. They learn best from teachers and mentorship programs. Somewhere between reading and modeling lies watching, where the student models their behavior via a one-way communication with a teacher, like in a video.

Most of us use some combination of these to learn something new. A good course of study should incorporate equal parts of all of these. You can adapt your approach as you move forward to work with your strengths. But do not ignore any of these learning methods at the start. You may discover you are more adaptable than you thought and that one of them works for you even better than you imagined!

I learn by reading, so my advice is largely skewed in that direction. Others will have techniques that worked better for them. Which is why, if you’ve mastered programming from a code-free background, I heartily encourage you to share your learning techniques and resources in the comments.

Have a pet project

I once worked at an agency with an eager, young front-end developer. This guy had so much energy, he was bursting at the seams! He had all these projects that I, older and “wiser,” knew would never go anywhere. He was most passionate and excited about working on a Pokémon simulator. I shook my head. “One, it’s been done before. Two, you can’t monetize it. Three, it would be illegal unless you arranged (expensive) licensing with Nintendo.” It was a pipedream project to be sure, but he was so excited about it that he wanted to use every new thing he learned to further the project, like generating background tiles with canvas and serving content from a Node server. If he’d just stuck to the projects coming in from our agency, he may never have started learning these techniques, and if he’d tried to learn them outside the context of an exciting project, the ideas might not have stuck.

So come up with something exciting you want to make, even if you (or someone else!) thinks it’s a stupid idea that won’t go anywhere. Don’t expect it to! Very few hit a homerun on the first swing! But you’ll have so much more fun and so much more will stick inside your head if you think of it all within the context of something you really want to do. Every other thought as you learn will be, “How can I apply this to my big idea?”

For me, it was an animation project. Synchronizing music with CSS animations requires precise timing–something JavaScript is not so great at out of the box. In order to get the timing to work right, I had to go down a rabbit hole and learn how JavaScript events are handled on the CPU! I could have read about this over and over again, but without a clear goal, it wouldn’t have been relevant enough to retain.

Grab a study buddy

Nothing will help propel you forward more than having a friend in the trenches. Find someone at your learning level with similar goals and partner up. I’ve unofficially partnered with Paula, aka @thepandalion. We tweet back and forth at each other about the new JavaScript resources we’ve found and gotchas we’ve stumbled over. Without her, I’d be operating in a void with no one to measure myself against but the people I look up to–and you don’t want to measure yourself against them! That’s like a piano student trying to live up to Mozart!

Have people to look up to

The easiest way to keep up to date on a technology is to follow people whose lives revolve around it. Here are some of the people I keep tabs on who help inspire me to try harder:

• Rebecca Murphey @rmurphey
• Dave Herman @littlecalculist
• Garann Means @garannm
• Adam J. Sontag @ajpiano
• Cody Lindley @codylindley

I also recommend following @horse_js. You know you’re making progress when these tweets start making you laugh!

(Psst, I also made a much larger list of front-enders to follow.)

Skip “The Good Parts,” anything on jQuery, and big books

I’m going to speak front-end developer blasphemy and save you a lot of time: Don’t bother reading Javascript: the Good Parts or Eloquent JavaScript. I know these are the JavaScript books everyone will point you to, but they were written by and for programmers, not designers or people just getting their feet wet with programming. These books assume too much, and you can’t begin to understand a scripting language until you understand the basics of programming. There are better (often free) alternatives that will give you the broad foundation you need to build your JavaScript house upon.

Don’t limit yourself to jQuery.

jQuery is an abstraction of JavaScript. If you only learn about jQuery, you’ll be using tricks and techniques to achieve your ends without truly understanding why they work. This means you’ll have trouble implementing some things you dream up, and you’ll get blocked by bugs you don’t understand. If you want to learn jQuery, you can do it after or alongside learning JavaScript. But an education in jQuery alone is not a substitute for a deep understanding of JavaScript. Plus once you know JavaScript, jQuery is a snap to learn, and you won’t struggle with it.

Don’t buy big books.

A sad truth about big books is that they have a deterring effect on struggling learners. You chew your way through page after page of text to find you’ve made only a fraction of a fraction of progress through the entire book. Skip it. The fundamentals of JavaScript are simple when explained succinctly, even to programming novices. (Read the first chapter of JavaScript Enlightenment to see what I mean.) A big book indicates that the author is struggling to explain things elegantly. (Check the font-sizes before buying a slender volume, too! Small fonts can hide a mountain of text. Plus, you don’t want tired eyes while reading about these things!)

Building your programming foundation

Like I said, I’m a book person. For a long time I fiddled with big books on jQuery written by designers and little books on JavaScript written by programmers. It took me a long time to find the right books. It turned out that the best place to start wasn’t JavaScript.

Getting Started with Arduino is written for people of all ages. I wish this had been around when I was a kid! It works best when you pair it with the kit (also from Maker). I picked these up at OSCON in 2012 because Arduino looked fun–and it is! That’s the important part here. It’s fun. You won’t be building your own sentinel robot just yet, but the programming language is simple, the book introduces you to some very easy programming concepts, and you get real-world feedback as you learn: the LED blinks, or it doesn’t blink.

Learn to Program by Chris Pine (also has a free online version) is an introduction to Ruby, my favorite programming language to date. The author wrote this book for young and old, and his voice is bouncy, his examples entertaining, and his logic easy to follow. This book will help you understand more about core programming concepts, so when you run into the occasional comparisons of JavaScript to other programming languages, you’ll know what the heck people are talking about.

When I was ready to learn about JavaScript, I started with JavaScript Enlightenment by Cody Lindley, also available for free online. This is the book to start with for JavaScript. Straightforward, accessibly written, and loaded with examples you can poke at on JS Fiddle to see the concepts in action. This is the book that helped me understand that everything is an object in JavaScript. That moment felt like enlightenment indeed!

Effective JavaScript by Dave Herman is the big brother of JavaScript Enlightenment. It introduces intermediate to advanced concepts. It’s a concise volume with small code examples you can easily follow. Some of the concepts you may not get right away, but each chapter of the book will start simple, offer you something you didn’t know about JavaScript, and stretch your understanding a little bit more. You might need to read it twice, but take your time. Like a ballerina doing her stretches at the bar, you might not feel like you’re getting anywhere fast, but you’re doing your career a world of good with each stretch you take.

As a fun bonus, try out The Manga Guide to Databases, which may be one of the best introductions to databases out there. In front-end development, you’re not likely to build a database, but you’ll probably have to interface with one one day. Taking the time to understand someone else’s craft can help you better appreciate their craft–and your own.

Supplementary Education Options

If you prefer teacher-student modeling, I recommend Bocoup Training in Boston. They often send their trainers to events and conferences outside of Boston, so keep an eye out. It costs money, but the value is excellent. (They also provide some screencasts for free!)

For those who learn by doing, check out the JavaScript sessions offered by Code Academy or the JavaScript Road Trip course offered (at this time freely) by Code School.

Go at your own pace

Don’t try to plow your way through all these resources. Take everything in doses you can swallow. Ruminate on what you just learned. Go to codepen or JSFiddle and play with implementing the principles you’ve discovered. If something is exciting you, that’s when you want to run forward with it. If you’re uninspired, try something else, a different learning style or a different topic.

Do not make the mistake of beating your head against a wall until you “get it!” I’ve made that mistake before. It doesn’t work. Switch gears, take a different route.

Share what works for you

Have you successfully learned JavaScript from a non-programming background? What worked for you? What didn’t? Sharing is a great way to make headway in your own studies, and I’d love to hear how you’re doing!