Designers Cheatsheet to get yourself interested in coding

So we can stop asking each other ‘Should designers learn to code?’ question now.

Oftentimes we may find the mysterious land of coding daunting and complex. Coding is actually really fun and helps you with more ways than you think! Speaking from my experience of 2 or so years of my coding career a few years back (most of my knowledge of the current front-end world is fading). The principle and the logic of learning how to developing something did help me a lot when I work professionally as a product designer.

So yes, you should learn to code. In fact, you could start coding as a hobby in no time! I know this is not for everybody and ‘It’s not what I signed up for’ is going to come up a lot in your head during this. But hey, at least we’ll know for sure if we hated it or just being intimidated by the notion of it in the first place, right?

Okay, you convinced me. Where (and what) should I start?

There are about a dozen programming languages and a million words and terms about programming you don’t understand. Here, if you’re just going to be randomly googling around the coding world, let me give you some for starters.

Anything marked as bold texts can be used as a search keyword so you can find a definition online if you want to know more about it.

Confused mark is confused about the confusing marked marks…

Anyway, buckle up!

The basics

1. HTML and CSS

Our Coding Starter pack

You will also probably hear people talking about Bootstrap which is the widely used framework for creating responsive websites. It may be the reason you’re learning to use the grid system in the first place. Bootstrap (apart from its interactive part) basically is a group of customisable CSS shortcuts (called class) that developers will call upon and use it to carry out your design.

How will it help me?

Where to start?

  • For those finding themselves on the go every now and then. Try downloading Mimo and be amazed that you can learn coding ON YOUR PHONE. Take that designers-who-have-to-be-using-a-tablet-or-a-computer-to-work!
  • Those who are curious about Bootstrap can learn the basics of it with Bootstrap 4 Tutorial or How to Use Bootstrap 4

Note: Some developers might encourage you to learn SASS/SCSS. Those are preprocessors that would spit out a neatly organised CSS. I personally think it’s not needed for beginners as it was more likely a helper for implementing a style and extending your developer team-collaboration (which is more or less not your concern at this stage).

Getting excited yet? Then let’s keep going!

2. JavaScript and its ever-expanding frameworks & libraries!

How will it help me?

Where to start?

Plus: After becoming more comfortable with JavaScript. Did you know that You can also create Figma Plugins! (It uses TypeScript which was built as a superset of JS)

Note: During your study, jQuery might get mentioned from time to time here and there. I wouldn’t recommend going too much into it. It used to be really popular back in the olden days. Now JavaScript and many Node.JS Packages on NPM is more than capable of doing most of what jQuery does

That was fun! What’s next?

3. Frontend deep diving (for web designers)

Vue on the left, React on the right

You could try to learn more about:

How will it help me?

Where to start?

  • If you don’t understand it much or these documentations don’t make any sense. There’s a staggering amount of tutorials online. Find the one that you think suits your learning style the most. I learned my fair share of JavaScript via Learn JavaScript

4. Native app madness (for mobile app designers)

Swift (iOS) & Kotlin (Android)

How will it help me?

Where to start?

  • Kotlin (Android), on the other hand, is also offering free good Training Courses for beginners who are new to the world of OOP and creating an app. I’d also encourage you to try out some good courses online if you’re finding these tutorials hard to understand.

But I needed more!

By this point, it should be enough for you to learn and get comfortable with how a programming world works in general. if you’re here because you wanted to up your game regarding working with developers. Those will be more than enough.

However, if you feel like this is fun and interesting. I’ll throw you more suggestions just in case.

5. Backend & CMS (or JAMstack!)

  • Dip your hands into a framework like WordPress or Laravel. I mostly preferred you try and study Laravel as it is actually pretty fun and more flexible in general.
  • Or try looking up a static website generator like Hugo. Understand the basics of Jamstack | JavaScript, APIs, and Markup and try out Headless CMS where you can start implementing it and create your own static website like a blog or design portfolio in no time!

…But wait, if you’re feeling adventurous, how about learning NodeJS and get crazy with React. Or work your way towards Ruby on Rails framework (using Ruby language) and apply for OOZOU? /wink

6. Database (and trying out deployment)

I recommend you start with finding popular Query Languages to learn regarding SQL or NoSQL. Find out what their core differences are and take your pick (or learn both!). You can even go ham with a concept of a RESTfulAPI and try out GraphQL to broaden your skillset.

You can also skip all that and start looking for a way to make public (deploy) your work. Many of the repository or host websites (SaaS) such as Github, Heroku, or even Amazon Web Services (AWS) offers a free (and paid) tier of cloud services that will help you deploy your website quick and easy following a few steps.

And that’s it for my tips, you reached open waters now!

But hey, It’s pretty fun and exciting to learning new stuff every day and keep coming back for more! You know it in your heart that learning something is always a good habit to have in this day and age!

And as Steve Jobs once said, you never know when all this might come together in the end!

This article was originally published at

Product Designer based in Thailand. Occasionally shows up just to geek about Figma. Contact me —

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store