One of the most valuable things I ever did as a designer was learn to code. Initially, it was a baseline understanding so I could make CSS adjustments to front-end implementations of my design work. Developers never really got the attention to detail I was looking for, so I took it upon myself to fix it.
Following that, I got the CSS bug and over a decade or so, very much focused my attention on what the language could achieve in a design lens. Of course I picked up other stuff — y’know, WordPress, React, yada yada — but truly understanding how HTML and CSS worked unlocked my ability to create actually user-friendly interfaces.
That’s our job as designers. It’s not to pontificate over design tools and their ever expanding features; it’s to design things for people.
I often use the analogy that when we design for print, what are we doing over and over again? Doing proof prints. Why then when designing websites (or apps) are we not getting in to the browser as quickly as possible, rather than creating interactive pictures of websites in Figma?
This is where you can stand out as a designer by learning to code. I’m not talking about writing production code with developers here. Hell, maybe in the future, but I’m talking getting a good understanding of How Things Work™ and using that knowledge to blast your web and app design skills into the stratosphere.
If you have never written code beforepermalink
I’ve got you. Well, Geoff has got you.
Geoff Graham recently released a course called The Basics. It does exactly what it says on the tin: teaches you the basics of HTML and CSS.
Check out The BasicsThe great thing about Geoff is he’s a qualified teacher, so you know he’ll get you where you need to be. For $149 (at the time of writing) it’s a steal. We’ve recently endorsed it too.
If you know a bit of code but want to get betterpermalink
My advice for folks in this situation is to go through the following free courses from Google.
- Learn HTML
- Learn CSS (hey I wrote most of that one!)
As a bonus, I’d give Learn JavaScript a go, but I can’t stress enough that you do not need to learn JavaScript to be a designer who can code. I just want to save you time and frustration by swerving arguably the most frustrating language and ecosystem on the web.
If you’ve got the basics down but want to expand your knowledgepermalink
As I see it, the best way to build your skills from here is to Just! Build! Websites!.
I’d start quite small, then build up to building your own portfolio site. I put building your own portfolio later because I know y’all are gonna get trapped in perfection doing that which is not where you want to be right now.
Maybe take a look at some more practical and linear tutorials first. Here’s a couple from me.
- Creating a full bleed CSS utility
- Create a responsive grid layout
- Some simple ways to make content look good
- Limit line lengths to increase readability
- A progressive disclosure component
- Visually hide an element with CSS
- Let’s make a floating button sign up form pattern
Next, move on to more advanced, but still practical and linear tutorials. Again, here’s a few from me.
- Build a responsive media browser with CSS
- Build a fully-responsive, progressively enhanced burger menu
- Build a dashboard with CUBE CSS
- Reality Check #1: Building out a furniture site from Dribbble
- Reality Check #2: Building out a fancy 404 page from Layers
- Reality Check #3: Building out a layered hero grid layout from Dribbble
Once you get through those, you should feel quite confident about how to structure a HTML page and CSS file. Especially if you take on some challenges from our Front-End Challenges Club. That’s all you need!
Get a CodePen account and build Dribbblespermalink
This is something that has helped our junior developer at Set Studio — who up until their start date had not written a single line of code.
Go to Dribbble, or Layers and filter by web design. Start off by picking something quite simple looking, fire up your CodePen account — which gives you a HTML, CSS and JS panel — and try to build the dang thing.
Once you’ve done that, up the ante and pic something more complex and go again. Keep building up the complexity and you will find gaps in your knowledge.
For example, you might think “I wanna animate like I can in Figma”. You can do better than that by learning CSS Animation or even a library like GSAP that has been around forever. View transitions will get you towards the smart transition stuff in Figma too.
You might also think that you want to learn about accessibility. Hit up Learn Accessibility and then go back to your CodePens and try to improve their accessibility performance!
Treat code as disposable and lean into the platformpermalink
Finally, I just want to stress that treat code as disposable, especially when you are learning. You’re just building websites, friend. It’s all good to be rough around the edges. The web is rough around the edges!
One benefit of learning to code is you will find that the more you let the browser do its thing, the better your output will be.
For example, Figma’s auto layout will teach you to be very specific about layout, but most of the time, you need a flexible layout system that works with the browser.
Figma probably got you thinking about typesetting with pixels. Instead, lean into fluid type and relative units instead, would be my advice.
Figma also got you thinking about set sizes for artboards. That’s not how the web actually is because we have no idea what the ideal viewport even is in the real world.
If you be the browser’s mentor, not it’s micromanager, it will help you design websites that work for everyone, regardless of their device, connection speed or context.
Wrapping uppermalink
I hope you’ve read this and thought “hell yeh, I wanna code instead of learning more Figma tools”. You’ve come to the right place for that here at Piccalilli.
Once you get started and if you think “dang, I wish someone would write about THE_THING_YOU_ARE_STUCK_ON” then please let us know, because we will in fact, write about that for you.
Like I said at the top of the article, learning how to code will make you a better designer and I can’t think of many better ways for this publication to have a genuine impact on the industry than help y’all get there.
You might be asking why I’ve posted this today too. Well, it’s currently Figma’s conference, Config. There’s lots of shiny new features that designers are getting excited about, but the addition of an “AI” design generator should be focusing your mind about expanding your skillset.
Folks like Scott and Rachel are rightly talking about why you might not want to lean into the new website cosplay features of Currently Hot Product™.
The thing to remember about learning HTML and CSS is that they are web standards and will long outlive Figma, Adobe XD and Sketch. At worst, learning to code will help you communicate with developers much better. At best, your design skills will be much more rounded and relevant in an ever-changing and expanding industry.