How to learn coding for free: A guide for designers
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 looks more visually polished than Khan Academy does, so it might be more attractive to some of 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:
- Khan Academy: Intro to HTML/CSS: Making webpages
- Codecademy: HTML and CSS
JavaScript
Khan Academy and Codecademy
Again, both sites provide great courses that’ll give you a good foundation on JavaScript.
Take these courses:
- Khan Academy: HTML/JS: Making webpages interactive
- Codecademy: Learn JavaScript and JavaScript
jQuery
Khan Academy and Codecademy
You probably noticed a pattern here. Both sites continue to provide good tutorials for jQuery.
Code School
Most of Code School’s courses are paid ones, but lucky for us, their introductory ones are usually free. Their courses are also taught using videos, though unlike Khan Academy, theirs feature the instructor on-screen, speaking to the student.
And as you can see from the screenshot below, Code School sometimes run promotions, where all their courses will be free for a limited time.
Take these courses:
- Khan Academy: HTML/JS: Making webpages interactive with jQuery
- Code School: Try jQuery
- Codecademy: jQuery and Make an Interactive Website
What’s next after those courses?
Start working on your own projects. Create your own portfolio site; design and code up a game from scratch; implement a Dribble design in code; take on freelance work that involves coding. There’s no idea too small to work on.
The best way to remember what you’ve learned is to put them to practice. I learned the most not when I’m going through the course, but when I’m working on my own coding projects.
Helpful resources
When you’re working on your own coding projects, you’ll often hit brick walls. How do I get those columns to be the same height? Why doesn’t my script work? Why does my page look weird on Safari?
When that happens, take a deep breath. Relax. Know that you’re not the first person to have faced those problems. And because of that, chances are other beautiful, intelligent, and generous people have already solved those problems before.
All you need is to find the solutions online. Here are some resources that can help you:
- Google
Google your problem first. Duh. - Stack Overflow
Your top Google results will likely point to Stack Overflow answers. Users post questions on the forum-like site, and other users (usually more experienced developers) will try to answer them. The best answers get upvoted, so the more upvotes an answer gets, the more likely it’s legit. Do read the comments that other users leave on proposed answers though, because sometimes the top voted answer might be outdated or wrong. - CanIUse.com
This site provides you with an awesome overview of browser support that each CSS attribute has. Yes, each browser supports CSS attributes to varying degrees, with some browsers being more notoriously handicapped than others (Internet Explorer, I’m looking at you). - W3 Schools
This site is useful when you want to get simple, human-language explanations of certain HTML, CSS, JavaScript or jQuery elements. Their explanations might not be the most accurate, but they beat other formal documentations in terms of ease of understanding. Their “tutorials” are also not very useful though, so don’t bother with it. - Mozilla Developer Network
One of the more legitimate sources that accurately describes and explains what each HTML, CSS, JavaScript or jQuery element is or does. But the site is clearly meant for developers, so they’re optimised for accuracy and not ease of understanding. Reading their explanations can sometimes feel like reading a Terms of Use document.
If you can’t find solutions to your problems, it’s either (1) you’re using the wrong search terms, in which case try again, (2) it’s really unsolved, and everyone acknowledges the problem as such, (3) you’ve discovered a problem that no one else has, which is pretty unlikely, so go back to (1).
How long will it take for me to learn the basics?
It really depends on you. It helps if you’re good at logical thinking, or if you’re disciplined enough to follow through courses that you’ve paid nothing for.
To give you a sense of what could be accomplished (and how often I code), here’s a timeline of what I managed to do in the last 2 years:
- Jan 2015: I started picking up HTML, CSS, JavaScript and jQuery (in that order).
- Mar 2015: I coded up and published my first website. Back then, it was just a single static page, and I was still learning JavaScript and jQuery.
- Apr 2015: I added pages to my website and made it interactive. jQuery was used.
- May 2015: I created my first JavaScript (jQuery) game.
- Jul 2015: I was hired to design and create a microsite for Singapore’s general election. This is the first time my code was used by hundreds and thousands of people.
- Jan 2016: I created my second JavaScript (jQuery) game.
- Jul 2016: I was hired to design and create a microsite for Singapore’s national day.
- Sep 2016: I was hired to redesign and code up Mothership’s website.
- Nov 2016: I pushed my first code into ReferralCandy’s production.
So it took me around 3 months to learn enough to code up a simple webpage, and 5 months to code up a simple functional game. My first “commercially viable” code went live around 8 months after I started learning coding.
I was working full time, so I only spent the weekends and after work hours on coding. I also practically never stopped coding in my free time over the last 2 years.
This should give you a somewhat realistic idea of how long it’ll take to get some results, provided you’re disciplined in your learning schedule.
Also, it’s not as if I’ve “mastered” HTML, CSS and jQuery by now; I just know enough to code up functional projects and get paid doing it. :)
Ending remarks
Coding isn’t for everyone, and won’t benefit everyone. But if you think it’ll help make you a better designer, or if you have that slight itch to just try it out, then go for it. And give it a good try.
After all, that’s the only way to find out if it’s worth your time.
If you found this article useful, recommend it so that others like you can find it too! :)
