The Designer’s Guide to Learning to Code
Developing the skills to code will not only enhance your career as a designer, but it can also make your job a whole lot easier. Understanding all facets of development — from conceptualizing and building designs to writing the code to bring those designs to fruition — can help the process run a lot smoother and help you collaborate with the developers on your team.
That’s exactly why a designer friend recently reached out to me asking for guidance on learning to code. I sent her an email teeming with tips and a wealth of resources out there to teach her to code. And then I turned it into this post to share with those of you in the same boat!
There’s a gamut of tools and online coding courses on platforms like Coursera and Udemy, as well as free institutions like The Code Academy, for example. But how do you know what resources are useful to you as a designer?
For example, it’s not necessarily important for designers to fully grasp esoteric JavaScript concepts or understand what’s happening behind the UI. Of course, if you aspire to become a mid- to senior-level JavaScript developer down the line, this kind of knowledge will prove valuable. But if you’re just seeking a deeper comprehension of what exactly goes into building the web pages you design, you may opt to take a different route.
Learning to code will teach you how web developers both build and maintain websites, as well as what exactly front-end developers do with your designs. If you’re ready to put in the work, buckle up! It’s going to be a long ride (a few hundred hours!), but you’ll come out of it a programming pro.
Here’s exactly how to learn to code for designers.
1. Master HTML and CSS.
First and foremost, get started by taking the Treehouse’s Introduction to HTML and CSS course to hone in on your front-end language skills. This is the first course that I ever took. I appreciated the pace at which it moved and that, upon completion, I ended up with a website I actually built myself.
I also recommend The Odin Project, which boasts an impressive community of like-minded professionals serious about learning to code. And, thanks to the community-run forums for likely bugs and inevitable issues you’ll have as you start out, you’ll have access to all sorts of solutions throughout your journey.
The Odin Project’s Web Development 101 online course, in particular, covers the basics of programming before guiding you through configuring your development environment and diving in to first unpack programming languages like HTML and CSS. Specifically, you’ll want to check out the HTML form project, which will teach you both how data is collected and how you can collect it, too.
For CSS, The Odin Project’s CSS course is arguably the most important course you can take as a designer. It will give you the basis for, simply, making everything look how you want it to look. I highly recommend that you put what you learn into practice with a project like this one, in particular.
2. Get comfortable with developer tools.
Once you understand languages like HTML and CSS, you’ll want to get comfortable with the developer tools you can use to edit them. All popular web browsers have development tools that allow you to assess the HTML, CSS and more on websites that you both visit and build. You can learn more about these tools in The Odin Project’s Web Development 101 lesson on developer tools.
3. Familiarize yourself with the command line.
While the command line may not seem super useful to you as a designer, if you find yourself regularly writing code (and using GitHub, the UI of Git) down the line, the little time it’ll take to familiarize yourself with it (about 30 minutes is all you need) will be well worth it.
In short: The command-line interface enables you to interact with a computer operating system or software. Basically, you type in commands that trigger tasks like creating a folder to hold your CSS files or running a JavaScript command.
The Odin Project’s Web Development 101 course goes over command line basics in the installations section. But Treehouse’s Learn Command Line Basics page will help you understand how the command line works, too. It’s not super important to memorize everything in these lessons; just get familiar, as you can always use this cheat sheet for the future.
Down the line, if you want to expand your knowledge base of the command line, Learn Python the Hard Way’s exercises can help you (you can skip the introduction and exercises, 1, 7, 8, 9, 12 and 15).
4. Get a grip on Git.
Now that you’ve gotten comfortable with the languages and tools at your disposal and you’ve unpacked some of the basics, The Odin Project’s Web Development 101 course’s lessons on Git will teach you how to collaborate with developers. If you’re able to work with others in GitHub, after all, you’ll also be able to better understand developers’ feedback.
Plus, by learning Git, you’ll come out of this course with a tangible portfolio of work on GitHub!
You can also learn more on managing GitHub workflow with others in my LinkedIn article here.
5. Understand responsive design.
Responsive design is a hugely important concept in web development, and you may be curious about just how dynamic your designs can become. Essentially, responsive design refers to flexible layouts that automatically scale content and other elements to match the user’s screen size.
The Odin Project’s lessons on building with responsive design will guide you through a responsive design project to practice what you learn — but don’t worry about spending too much time on the project itself.
6. Jump into JavaScript.
Okay, you’re ready to jump into JavaScript fundamentals with The Odin Project’s Web Development 101 course — but just take the lessons up to the “Rock, Paper, Scissors” section for now.
These lessons alone will take you about 20 hours, but they’ll be 20 well-spent hours as you’ll be able to post your work to GitHub so other developers can provide you real-world feedback.
7. Try the JavaScript Koans exercise.
Now that you’ve reviewed the JavaScript basics, give the JavaScript Koans exercise a try to learn programming through testing. While the exercise is dated, JavaScript hasn’t changed all that much, so it’s still relevant.
Note that this will take you about another six hours, but I made a video to help you get started.
8. Take the rest of The Odin Project’s JavaScript lesson.
You’ll probably spend about another 30 hours finishing up The Odin Project’s JavaScript lessons in the Web Development 101 course. The remainder of the JavaScript section of the course will teach you how to write clean code, manipulate the DOM and, ultimately, navigate complex scripts. There are two invaluable JavaScript projects you should try your hand at, as well.
9. Put JavaScript in practice.
Beyond the projects you’ll complete in the aforementioned lessons, there are some real-world projects you can do to practice JavaScript like The Odin Project’s restaurant page project (which should take you about 20 hours) and the to-do list project (which should take you about 15 hours).
Up to this point, you’ve essentially learned how to build a house with hammers, nails and boards of wood. But there are multiple ways of building with JavaScript and plenty of resources around these projects on The Odin Project for you to explore other building techniques. Experimenting with these tools is like using drills, saws and angle grinders to build the same house but better! While you don’t need to use them, doing so may make your learning experience more interesting.
10. Recreate my portfolio!
After you’ve tackled all of these courses and have done some practice projects, I challenge you to recreate my portfolio (as much as you can!) in 10 hours. This is one surefire way to develop prioritization skills and determine what you can accomplish in a set time period.
Reach out to me directly if you’ve gotten this far! I’d be seriously more than happy to personally review your code on GitHub.
There’s a lot of information out there to teach you how to code, and it won’t all be hugely relevant for you as a designer. But, if you follow the steps I outline above, you’ll be in a perfect place to start contributing code to legitimate projects. Your new code skills may also influence and strengthen your design work, so you become a more valuable team player regardless of what you choose to do with your new coding knowledge.
