The Designer’s Quick-Start guide for learning to code

Diving into the “should designers code” rabbit hole.

by Darian Rosebrook
December 24, 2019

This post is intended to be a rabbit hole for designers to find useful resources, jump into tutorials, and return to find other steps or guides on how to use code as a supplement to their design career.

It is not intended to be the “Be all and End all” to guides, so if you feel like there’s better alternatives to any of the sections, feel free to reach out or post below and I can consider adding it to the guide here.

More than likely, this list will continue to grow throughout 2019 and onward as technology continues to improve and the realm of “what’s possible” and “what’s realistic” start to get closer together.

Deciding what your focus is

Here’s a list of the sections to help you navigate through the guides.

Intro (Keep Reading) Where do I Start? Common Requirements Websites and Web Applications Mobile Apps Video Games Augmented and Virtual Reality Final thoughts

So you want to jump into learning code as a designer?

Maybe it’s time.

With how quickly and often people are releasing apps and websites nowadays, one thing that tends to get left behind on the office floor is UX Design, UI Design, and branding.

Learning to code anything efficiently takes a lot of practice. That’s why I have never been much of an advocate of designers learning to code before becoming comfortable and proficient with design principles, familiarity with the design tool of choice, and having focused on building a body of work to display.

Code just isn’t something you can “learn” to be effective with without investing your time into it. But these skills will help you understand what’s possible, what isn’t possible, and all the beauty of being able to build your own things in-between.

Learning the lingo

Learning to code is like learning a Latin based language. A lot of languages are built off the same principles, conventions, and ideas of Latin. With each codebase, the idea is fairly similar, you only need to learn a little bit to be able to do a lot.

Regardless if you think you don’t want to learn code, these skills are exceptionally marketable and really good to have in the field of UI, UX, Web Design, Front-end Design, Mobile App Design, Game Design, Augmented Reality (AR) and Virtual Reality (VR), and Video Game Design.

Coding is a special skill that allows you to build and launch apps, websites, products, or even be more useful to the businesses you work for…

Someone who is focused on growing in these areas (or if you want to learn to build and launch your own things to promote your own work) should consider learning to code.

When I started out in 2015, I had decided that I would make the switch from being a boring bank teller to someone who would code websites.

Because of that, my journey started with learning how to code, before I ever found out about UX Design, UI Design, and then changed my focus and career of choice in 2017 to being a brand identity designer at So Magnetic, (my design studio).

At the beginning though, my skills weren’t much to write home about.

This is how I started though, and more than likely where a lot of you started with your design skills. It isn’t fair to judge where you are right now to where you will be if you’re actively working on improving your skills.

I’ve actually built the Compass of Design website myself from the ground up with code and am working on some higher level programming in the background of the site for members of our community there.

I want to also reiterate that I don’t want you spending time learning to code if it’s not a tool that you need to use, or plan to use, in order to create your designs.

Otherwise, your time would be better served becoming a master of your craft rather than a “Jack of all trades.”

So if you think it’s something you’ll be able to use, let’s figure out where to start.

Where do I start?

Well that depends on the field.

Every type of design field that involves coding at some point uses different code bases and code libraries of code languages to do what they do. Each one has a specific path to get started depending on the level of involvement that code language has in the activity or goal you’re trying to achieve.

More importantly, there’s no “wrong way” to make something, and there’s not any “one way” to make something.

Two people can use completely different code bases to achieve a similar goal. So learning code is more about how you think over how you do it.

This non exhaustive list and what they include

  • Websites and Web Applications • Front End Design • Front End Development • Back End Development — Scripting Languages Databases Web Security• The WordPress Question • Opportunities as a Code Newbie

  • Mobile Apps, Games, etc • iPhone Development — iOS Developer Accounts Xcode Swift• Android Development — Android Developer Kit

  • Video Games • Game Development • Corporate Game Design • Indie Game Design

  • Augmented and Virtual Reality

Though I don’t consider myself a developer by any means, I have found the easiest entrance to code for me has been building websites. Not everyone will start here, but I do think building websites was the easiest for getting into the mindset of learning to code.

Honestly, you can learn anything if you’re willing to.

If you’re looking to get your feet wet with code, this may be the quickest and easiest way of doing so.

If your reason for getting code is to better understand the medium that you are designing for, you can just learn basics of each.

If your intention is to be able to edit your own portfolios, launch your own products, or pursue this as a skill you can use as a designer (freelance or employment) the rest of the document will be very helpful.

Don’t take my word as the divine path. Do your research, look up videos, look up tutorials, read blog posts. If you’re hungry for it you will find it.

So what do I need?

  • A good computer (maybe preferably a laptop so you can practice this stuff anywhere you go).

  • An internet connection.

  • A set amount of time each day or week that you can set aside to learn. I recommend no less than 15/30 minutes of focus on it if you can.

  • Patience.

  • Somewhere you can look up answers and ask questions. (Google will be your best friend through this) — Stack overflow for asking and looking up common/less common questions. — Stack Exchange as an alternative to stack overflow — Quora (sometimes good to look up answers and ask questions) — Reddit if you can stomach some people being royal jerks sometimes.

Starting your choice

No matter what you choose, you need to get comfortable with these.

You need a text editor to start with.

If you are starting to get in the water with any of the below resources, it might be good to set up an account with Github (or Gitlab) for backing up the thousands of lines of code you write, and CodePen which will allow you to test out some of the front end web code you are building. There are numerous people who, if you ask a question, will ask you to set up a codepen or online editor where they can see your code. It’s an easy way to show others what you’ve made in a way that they can understand and help with what your’e trying to achieve.

If you think you’re ready to start doing things using your computer, I recommend these first two text editors to start with, and some alternatives.

Text editors allow you to change practically every computer file imaginable. But they’re not always in the friendliest of formats for beginners if you open them and peek your head in there.

Almost everything you do with code will require you to edit files with a code editor. The farther you go down this path, the more you’ll realize you’ll never learn all of it. That’s the fun part.

Learn to use the Command Line or Terminal

This one seems scary because there’s no handy visuals, guides, or menu options, and there’s a lot of things you could mess up.

But using the command line is super helpful when you start doing local development of your own sites or apps like with Jekyll (easy) or full back end languages like Ruby, node.js, or other development (hard).

I’d just recommend two handy guides here.

Learn how to use Git (preferably with GitHub)

Git is a version manager for your code projects. It helps you keep track of changes, and revert something completely if you messed up. GitHub is a online platform where you can save all of these and access the projects from anywhere. They even have a visual interface that you don’t have to use the command line for (but learn how to use git from the command line).

So once you get the hang of some of these tutorials, you might start thinking about moving into different programming languages.

The biggest point of failure for beginners is giving up before they pass “the hump”

This point may be different for many people, but that “hump” means that point between “This is so freakin difficult” to “I think things are starting to click” (not the I can go build the next Facebook”


“Web Design, Front end design, UI Design”

Welcome to the world of learning how to code for websites!


Let’s assume you’re an absolute beginner who hasn’t seen much about the web and it’s code before. You should find resources on how to get started with these two types of code languages.

As literal as that got, you might have felt that was too easy. Well, there’s more to HTML and CSS than just that, but you have other places to learn it.

Here are some more of the resources I have to help you get further along the path of learning to code.

Maybe watch this video on LearnCodeAcademy’s paths for different choices with his mind-map for the codes to learn

Learn the basics of JavaScript

JavaScript is weird.

You might think you have something figured out, but then some part of the syntax throws off the entire function you are building. (These terms may be foreign to you right now, but you’ll learn about them)

JavaScript is best learned by practicing with it.

Learn the basics of jQuery

jQuery is a super powerful tool to use for JavaScript because it allows you to do more with less written code.

Though that’s an oversimplification, jQuery’s power comes in the form of cross-browser support, including legacy browsers (old versions that hardly anyone uses)

Diving into Web Development

Backend Development, Web/Info Security, Databases,

Mobile app design


In order for you to be able to send things to the iTunes store, you have to have a developer account with Apple.

Swift Xcode


Android Package kit (APK) Software Development Kit (SDK) Android studio XML Java

Game Development

This guide by Unity on how to start with game development