Learning to code can be one of the most daunting tasks a designer can undertake. Code looks complicated, reads like gibberish, feels boring, and probably reminds you of that time you’re required to memorise calculus.

But it’s nearly 2 years since I’ve first picked it up, and I remain convinced that it can be one of the most rewarding skills a designer can possess. Yes, it’s not easy to be good at it. But no, it’s also not nearly as difficult as you imagine it to be.

And the thing is, it’s so easy — and literally free —to learn coding right now that there’s really no reason why you shouldn’t give it a try. So here’s a handy guide to tell you everything you need to know to start learning to code.

What are the benefits?

You’ll have a better sense of what can and can’t be done in code, so your designs become more realistic and less subject to changes. Developers will enjoy working with you more. When developers tell you that your design can’t be implemented, you'll have a better sense of whether there are possible workarounds (and also whether it’s true). This means you can arrive at the best possible compromise for your product. You'll communicate a little better with your developers, because you understand more of their lingo. You’ll get to freaking create your own designs without having to rely on others. All those crazy ideas for web pages, games, or apps that you wished someone could make into reality? You can do it yourself. 🙉 (that’s my omg-how-awesome-is-that face)

If these don’t sound helpful to you, because you either don’t need to work with developers, or you don’t want to implement your designs yourself, then maybe coding isn’t for you. After all, it’ll be insane to think that coding will be helpful for everyone.

But if you’re unsure which way you lean, I urge you to lean towards learning it. It’ll only take you a few weekends to be sure whether the benefits are worth your time.

How much will it cost?

Nothing. The free resources out there are more than enough to get you started on the basics. You’ll be able to create webpages, interactive sites, and even games.

It will, however, cost you time to learn coding. More on that later.

What to learn

To be able to code up an interactive website, you’ll need to know:

HTML + CSS

These are the basic building blocks of websites. HTML provides the structure to websites, and CSS tells your browser how those structures should look. If you master HTML and CSS, you’ll be able to code up any web design you can dream of. JavaScript

This is the basic programming language that most websites run on. With JavaScript, you can build interactive sites, i.e. websites that respond to the user’s actions. You can even build games. I recommend mastering at least basic JavaScript, so that you understand the way the language works. Then, you can move on to jQuery. jQuery

This is technically not a language in itself, but a JavaScript library. It’s essentially the middleman that allows you to speak to the browser in “modern day slang” instead of “medieval English”. You talk to jQuery in simplified slang, and it translates that into original (and somewhat cumbersome) JavaScript to the browser. As an analogy, instead of having to say things like “It shall thus be made known that this box will henceforth be coloured blue”, you can just say “Make this box blue”. I highly recommend learning jQuery, because it makes coding much easier.

Where to learn coding

(Note: I’ll only recommend tutorials that I’ve taken before, so if there’s a free course that you think should be included here, please leave a comment!)

HTML + CSS

Khan Academy and Codecademy

Both sites provide free, interactive and highly structured courses on HTML and CSS. They’re great at starting you off on your coding journey.

While Khan Academy is completely free (yay!), Codecademy has some gated content that’s only accessible to paid users (not-so-yay).

Codecademy’s interactive lesson.

Codecademy looks more visually polished than Khan Academy does, so it might be more attractive to some of you.

Khan Academy’s interactive lesson. Notice the play button? Yep, they use videos to teach you.

But Khan Academy uses videos to teach you, which really improves the learning experience. Pamela (the instructor for most of KA’s programming courses) sounds really approachable, and I grew to really like her voice and quirkiness over time.

I recommend going through both, because (1) most of their materials overlap, and repetition helps cement concepts in your mind, (2) both use slightly different approaches to teach you, so your understanding will be more complete.

But if you only have the time to do 1 course, I’d vote for Khan Academy.

Take these courses: