The Efficient Path To Learning Code As A Designer
Why should you learn to code?
The big question that floats around the heads of not only so many designers around the world, but just people around the world in general. But when it comes to designers specifically, it is indeed a pretty tough question. Learning to code requires lots of time and effort. So, before getting into the efficient path designers can take to learn to code, let's quickly go over why you as a designer may want to learn. I will likely write an article in the future that goes into more detail about the pros and cons of learning to code as a designer, but in this article, we'll just quickly look at some of the pros.
- Enhanced Collaboration with Developers
- Better Handoffs
- Greater Control Over Final Product
- Empowerment to Create Realistic Prototypes
- Increased Job Opportunities and Versatility
- Understanding of Feasibility and Constraints
- Personal Growth and Expanded Skill Set
- Better Understanding of Digital Mediums
- Autonomy in Freelance Projects
Now that we've taken a look at some of the reasons you may want to learn to code as a designer, let's answer the next important question, where should you start?
Here's where things get tricky for everyone who wants to learn how to code. There's so much information and so many resources, tools, languages, teachers, etc. It can be very overwhelming to start this journey on your own. But, if you've done your research, you'll find out that you should first start learning how to code by learning HTML and CSS. HTML (HyperText Markup Language) is the standard markup language used to create the structure of web pages. It's the backbone of any web page and is used to define the content and structure of the web document. CSS is a stylesheet language used to style elements and describe how they should be rendered on screen.
Like I just said, if you've done your research, you'll see that everyone's recommendation is to start with these languages if you're interested in coding for web development. And this is correct. If you've never looked into web development before this and you haven't done the research, well here it is. You start with learning HTML & CSS. After HTML & CSS, you will move on to JavaScript, then jQuery (More on these later). Then if you really want to take it a step further and become a fully capable frontend developer in 2024 then you'll move on to a front-end framework like React, Vue, or Angular. I'm not going to get into the JS frameworks in this article because they aren't something you should worry about until you're at an intermediate level and you've been working with HTML, CSS, & JS for a few months. Trying to use a framework before you're comfortable with these is a great example of trying to run before you can walk. So, when you see the community throwing the names of these frameworks around, don't worry about them for now. You don't even know if you want to take it that far yet. Start with some HTML & CSS. then move on to JavaScript & jQuery and see how that goes. Then, and only then, if you're ready to take it to the next level, begin considering learning and utilizing a JavaScript framework. So, you're roadmap is going to look like this:
HTML, CSS, jQuery, JavaScript. This is all you need to know as a designer looking to learn how to code. THIS IS IT. THESE 4. Trust me. I know it can be overwhelming when first learning to code. I've been there and I started from ground zero and taught myself by seeking out lots of resources and learning from them. I know when you start this code journey there's so many tools, languages, methods, and other resources thrown at you that it gets overwhelming to the point where you don't even want to start anymore. Forget all that and tune out the noise. HTML, CSS, jQuery, JavaScript. That's it. Learn these and it's all you need. Especially as a designer. I'm going to go over what all of these in more depth and why this is your roadmap later on in this article, but first, let's take a look at how you're going to learn this stuff.
So great. You now know the languages you are going to learn, but now comes the question, how should you learn? There's books, videos, online documentation, paid courses, free courses, educational apps, etc. To answer the question of how should you learn, it really comes down to personal preference. When it comes to learning HTML & CSS, you really can't go wrong with any quality resource. For the others, it's really going to depend on how you learn best. If you like to learn by reading, check out a book like "HTML and CSS: Design and Build Websites by "Jon Ducket" or Dynamic HTML by "Danny Goodman". Another way, and probably the best way, to learn by reading is by reading through documentation and you can read through HTML documentation here:
Reading documentation is how most developers learn how to use new tools and resources. Reading documentation is pretty much the only way I like to learn new things when it comes to code. I would also like to say though that when I first started learning how to code, I liked to use tutorial videos. Reading documentation was sort of confusing and a bit intimidating to me at first. Back in 2017 I was using udemy.com and was taking a few courses on there unrelated to coding and then I found an HTML & CSS course on there and the guy told me his course would teach me everything I needed to know about HTML & CSS to start building nice websites. And the course was on sale for $20 so I said for sure I’ll do that and purchased the course. After that, I purchase a JavaScript course from the same instructor and a couple others as well. At the time learning to code felt intimidating and I really wanted a teacher to help me learn rather than reading about it myself. I say that to say you have to know yourself and how you want to learn and how you best learn. Some people love tutorial videos, others love reading documentation and I’ve seen plenty of people learn and get good through both methods. So, it's entirely up to you. With that being said, we're next going to look at these methods and others in more detail. So, we're going to over how you can learn, and after that, I'll give you the roadmap of what you should learn.
Courses
So, should you take online courses to learn these languages? Online courses are great because like I said you have an instructor that is going over things and explaining them to you. This was what I liked when I first started learning. Reading documentation on my own was just a bit too confusing for me before I gained a better understanding and got more comfortable. If you're going to take courses, I recommend purchasing them. They don't have to be expensive. The first one I purchased in 2017 (HTML/CSS) is on sale now on udemy.com for $24.99 and the second one (JavaScript) is available for the same price. I will share them later in this article but here I just want to make the point that self-paced online courses are great and if you're like me and you think this is how you will learn best in the beginning, definitely check them out as good courses from good instructors will teach you what you need to know. It is crazy to me how we can get full-on courses with hours of content for this low price. We can get courses from great instructors at these prices where we can go at our own pace in our own time in our own homes from our own computers. It truly is a great thing that should be taken advantage of.
Video Tutorials
When I refer to video tutorials here, I’m talking about coding tutorial videos on places like YouTube. Online courses are technically video tutorials, but I think there's a difference between robust online courses and random tutorial videos on YouTube; and I would recommend the online courses over the online video tutorials. Don’t get me wrong, video tutorials on YouTube are great and there’s a lot of valuable information you can learn from them. YouTube is a place where there’s TONS of educational content in many subjects and coding is definitely included. And the best part is it’s FREE. But I do think as a beginner getting their first introduction to code you should follow along a structured courses from a good instructor rather than bouncing around different random YouTube videos. Don’t confuse yourself. Don’t overwhelm yourself with information. Don’t take the chance you learn from someone who doesn’t even know what they’re talking about. Opt for a full course instead.
A retort to this may be “I’m not going to bounce around different YouTube videos; I’m going to follow one person’s videos only.” This can work for you. A lot of people who teach code online even create playlists with a group of videos that is setup to be followed like a course. This is very much a viable option for you. Especially if you don’t want to spend any money on a course.
But normally a lot of these playlists are either their old material, or they give you a few videos then say you can access the rest by purchasing their course, or their just shortened courses with less material, or their made by instructors who are not that good. Of course there’s going to be exceptions to this, and you can definitely find a good playlist or even single video on YouTube that teaches you a lot. But, even the best instructors on YouTube with tons of free valuable content typically have a paid course and if I can get the real deal of what they’re talking about for $25, I’d be willing to invest in it for both the structure and for their best content. Then once you have a solid foundation of understanding, return to online tutorials to learn the latest things.
Educational Sites
Using sites like https://www.codecademy.com/ or https://www.freecodecamp.org/ are also ways you can begin learning to code. I've never used these consistently for long periods of time to learn anything and I’ve heard mixed reviews about them from others. They are both interactive online learning platforms with curriculums for multiple programming languages. I've never used them enough to give a whole lot of information about them, but you can check them out yourself and read reviews and what people have to say about them online. Like I said, the learning style on these are just not my thing. I prefer to either learn from a person in a video, or to read documentation and try things in my own projects and figure them out that way. But other people love these sites and say they learned everything from them and that they enjoy doing so. This could be you. FreeCodeCamp is of course free and CodeAcademy has a free trial. Do some research and try them out!
Documentation
Reading documentation is where all developer roads lead. Reading up on documentation will teach you everything you need to know about a programming language and how to use it. It's like the instruction manual. Reading documentation to learn new things and practicing what you learn is how you get really good at coding. But this isn't always the best way to break your way into coding. Before you have any understanding of any programming languages, reading documentation can be a bit intimidating and feel a bit overwhelming. But if you take a good course then your instructor will likely refer to the documentation often when explaining things and will recommend that you refer to it as well. Following along in a course and reading documentation is an undefeated combination and what I would recommend doing along with practice in order to progress and get good at coding fast. No matter which way you choose to learn, you will be referring to the documentation at certain points so combine it with whatever way you learn best.
Books
Another way you can learn to code is by reading books. If you're going to use books to learn to code, I would recommend only really doing so for HTML, CSS, & JavaScript (Only including the languages on your roadmap). HTML, CSS, & JavaScript are languages are constantly being updated with new features and they are vastly different from when they were first introduced, but you can still learn a lot of relevant information about them from books. Trying to learn how to use something like React or Vue from a book isn't the best idea though because they are evolving way too fast for published books to keep up. If you're really interested in learning a language by reading, just check out some documentation. Check out books and read through them. You can find really solid information about things you may not get from other places, but they may not be the best standalone resource to learn how to code. I've also noticed that books tend to go very in depth on things that aren't very practical. They can be very useful to people looking to learn more and more about a specific language/topic, but I wouldn't say most books are great for beginner's looking to learn important practical information and how they can begin using a language and coding things in the real world.
Bootcamps
Last but not least, another way you can learn to code is through a bootcamp. Coding bootcamps became very popular because they promised to teach people how to code and get them a coding job in a short time. Coding bootcamps can have great material in them and you can learn a lot through the work and the projects you build, but these are more designed for people who are looking to dedicate themselves to learning how to code and becoming a full-time software engineer. If this is what you want, a coding bootcamp may be the right move for you. But if you're a designer who's just looking to learn to code on the side, you may want to consider one of the other options. Coding bootcamps can be expensive as well so unless you're trying to pursue a software engineering role, I'd recommend one of the other options.
Now that you know about some of your options for learning, let's take another look at the roadmap and shift our focus back to that.
I told you before that all you needed to learn was HTML, CSS, JavaScript, and jQuery. So, what are these exactly?
HTML
HTML is the standard markup language for creating web pages and web applications. It's the foundation of all web content. HTML provides the basic structure of sites, which is then enhanced and modified by other technologies like CSS and JavaScript. It consists of a series of elements used to enclose or wrap different parts of the content to make it appear or act in a certain way. These elements are denoted by tags written using angle brackets. It's used for creating and organizing sections, paragraphs, headings, links, and blockquotes for web pages and applications. Think of HTML like the skeletal structure of a site.
CSS
CSS is a stylesheet language used to describe the presentation of a document written in HTML. It sets the visual style of web pages and user interfaces written in HTML. CSS is used to control the layout of multiple web pages all at once. It enables the separation of presentation and content, including layout, colors, and fonts. HTML is the skeletal structure, CSS adds the muscles, the organs, and the other visible features.
JavaScript
JavaScript is a programming language that allows you to implement complex features on web pages. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we've mentioned earlier. JavaScript enables interactive web pages and thus is an essential part of web applications. It's used to create dynamically updating content, control multimedia, animate images, and pretty much everything else. JavaScript is what makes all of the functionality on websites possible. HTML is the skeleton, CSS is the muscles & organs, JavaScript is what gives life to the body and makes everything move and function properly.
jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It's designed to simplify the client-side scripting of HTML. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. We pretty much use jQuery for easy animations and that's about it.
I know everyone is going to ask, "How long will it take me to learn all of this?" And that question is just impossible to answer for a few reasons.
- I do not know how much time and effort you plan on dedicating to this.
- Everyone is different. Some people will naturally pick up coding faster than others because of how their brain works.
So, I can't answer that question, but what I can do is give you tips on how you can learn as quick as possible and avoid some of the mistakes I made that resulted in wasted time where I could've progressed faster.
Tips for learning to code more efficiently
Consistently Practice
This is true for getting better at almost anything. You must practice consistently. 30 minutes per day of practice is better than spending a couple of hours on the weekend once a week. If you practice for a couple of hours once a week as a beginner, you're just going to keep losing all the progress you made in the next 6 days leading up to the next one. Practice every day if possible. At least every other day. Just 30 minutes to an hour. It doesn't take too long. If you can't dedicate 30-60 minutes a few times per week, you may not be ready to dedicate yourself to picking up this skill.
Set Clear Goals
What exactly are you hoping to accomplish with your coding skills? Do you want to be able to build the designs you create in Figma? Do you want to build prototypes? Do you want to do animations? Where do you think you want to stop in your coding journey? Figure out what you would really like to get out of this, and you won't feel overwhelmed but instead excited.
Build Your Own Projects
This one can't be said enough. When you're new to coding, there's a lot to learn and you're going to be following along with a lot of new information. And there's always more information to learn. Always take a step back and think about how you can apply what you're learning to your own ideas. Once you pick up the basics, don't just completely follow along with tutorials. Switch things up a bit. Do what's going to interest you the most. This will make more connections in your mind and will do it at a much quicker rate than if you're just following along copying everything. Keep your mind engaged by building things you're interested in. You will get better so much faster.
Don't Try To Memorize, Try To Understand
This is a mistake a lot of us make when starting out. We try to take notes and memorize everything we're learning about code. This is a waste of time. Don't try to memorize anything but try to understand everything. Writing code is like an open book test. You can always go look for the answer. All the coders out there have access to the same tools and the same documentation, but why are some so much better than others? Because it isn't about remembering code, it's about understanding it. The more you understand the better you will be. Don't try to memorize code, just try to understand concepts.
Going over the minimal number of languages to learn, what to look for in resources, and the tips to keep in mind in order to quickly progress and get better at web development, is my formula for a designer to efficiently learn to code.
Learning to code is like learning a new language. It's not so much that it's hard, it's more about practicing enough to the point where your mind starts to understand it and speak the language with less and less effort as you go on.
Also, in code, there's a lot of ways to do the same thing. There's so many paths you can take to achieve essentially the same result. So, when you see all of these tools and languages, don't be overwhelmed. Don't feel like you're wasting your time learning what you're learning. HTML, CSS, JavaScript, jQuery. Trust me. The new tools and resources you see are likely just a new way to do what can already be done with existing tools and languages. The new tool/language may have been created because it speeds up the workflow or allows you to do things more efficiently, but sometimes this isn't even the case. You'll get all of this more once you gain a better understanding of code, but I say all of that just to drive the point home that you do not need to learn everything out there and it'd actually be virtually impossible to do so. Even if your main occupation is being a software engineer, you don't need to learn everything. So as a designer, you definitely don't need to. You'll come to find out that the software engineering community has a lot of split opinions on tools, languages, methods, ideologies, etc. One person may say a tool/language/method is the worst thing ever, meanwhile there's tons of successful multi-million-dollar companies building and believing in the exact things that person is talking down on. So, don't get too caught up in what one person's opinion is when it comes to tools and languages, especially if you're a designer first.
And also, don't get overwhelmed by what to learn and what not to learn. Again, especially if you're a designer first. Everything I've shared works. Just pick things up and dive in and learn. If you want to code professionally than you'll have to take a deeper look at things but if you're a designer just looking to code to pick up the skill, just get building. All the time you spend thinking about what you should and shouldn't learn is better spent practicing. Trust me.
Just keep going and keep practicing. Your mind will continue to get better at wrapping its head around everything and you will continue to get better. You can learn pretty much everything you need to know about HTML & CSS in a week’s time, but it will take months of consistent practice for you to really understand it and get comfortable with it. It's like how you can learn about all the features in Figma in just a few hours by watching someone else show you the ins and outs of the software, but it will take lots of practice in order for you to actually become capable with it and use it at a high level.
I hope all of this helps you to learn to code as a designer! This article was vague in order to speak to every designer considering learning to code no matter their schedule or other circumstances. But I'm working on a more step-by-step roadmap so if you're interested, follow us on social media to keep up and you'll know when it's ready. Also, feel free to reach out if you want more personalized assistance and/or specific recommendations on educational resources like specific books, courses, articles, instructors, etc. You can also reach out with any other questions you may have. Best of luck on your journey!