Logomark. Design.Systems / learn /

How to become a "designer who codes"

Meagan Fisher Couldwell on Wed Feb 20, 2019

Quick note: "coding" in this article is my shorthand phrase for "learning enough HTML and CSS to be able to create the basic front-end for the websites you design." Many developers will probably see this as dipping the smallest of pinky toes into "coding," and that’s fine with me. 💁‍♀️

Being a Designer Who Codes™ is a pretty awesome superpower. Not only can you design pictures of gorgeous websites, but you can make them exist on the real internet! (Because as much as I love them, Dribbble shots are not the real internet). It’s a bit like being a mad scientist; you can bring dead mockups to life through your own determination and genius. 👩‍🔬

Me every time I build a website

If it’s not your thing, that’s fine too! I’m not really trying to convince you to do it, because honestly the fact that many designers still don’t know how to code gives me a big competitive advantage (just as other designers have strengths I don’t, which gives them advantages. There’s room for everyone! ❤️)

I will tell you why and how I’ve learned to build websites, if you’re interested.

I code because I love it, not just because it makes me a better designer

I could write an entire article about all the ways learning HTML & CSS will improve your career, but luckily for us Andrew has already written a glorious article on that very subject. So instead, I’ll just tell you why I love it.

My absolute favorite thing about writing code – and the reason I stuck with it through the initial learning curve – is that there is pretty much always a right answer when it comes to code. Your code either works or it doesn’t. This is not the case with almost anything else in life. When you write an essay, paint a picture, or design a website, you never really know if you did it "right."

With code, there is a solution. You want to replicate the little boxes you drew in Sketch in your browser? There is a concrete set of words you can type in your text editor to do that.

Coming from the subjective world of design, I relish the predictability and certainty of writing code. With development there are rules anyone can learn, and once you know them, there’s no limit to what you can make.

Okay, but how do I begin?

Chances are if you’re just starting out with coding, you are hesitant to dive in because it feels like a big monumental undertaking. 😬

Here’s the thing: you can start as small as you want. There are levels to being a developer, and even journeying into the very beginning stage will give you a big leg up. Start with the absolute basics of HTML and CSS – the fundamentals of which haven’t changed in the 10+ years since I wrote my first <html> tag.

Don’t get overwhelmed by concepts like Internet Explorer, CSS3, responsive design, Javascript, Wordpress integration, animation, SVGs, etc. when you’re just beginning. Ignore the things you hear experienced front-end developers talk about on Twitter, such as different layout methods or React or cross-browser compatibility (these things will eventually make sense to you after you’ve been doing it for awhile, but for now, they’ll just stress you out).

And here’s a very cool thing I found: if you want to keep improving or if you get stuck, as a designer there are probably developers ALL AROUND YOU. In my experience, developers are so excited that a designer wants to better understand what they do that they will patiently and enthusiastically answer questions or give you feedback on your code anytime you ask.

When I learned to build websites, there were 5 stages I went through as I got more comfortable with code. There are about 3,782 more stages after this which I’ve yet to ascend to, and for now, I’m fine with that. You can take your knowledge as far as your curiosity or willpower will get you.

1. Get comfortable with the naked internet (sorry, not THAT naked internet)

Have you ever seen the internet naked – stripped of all the fancy clothes and accessories we designers layer over the content to enhance it?

If you want to start learning to code your designs, don’t worry about CSS (the style part) at first. Begin by appreciating the elegance of raw, unstyled HTML. Get comfortable with writing it. To see what it looks like, explore some websites with the CSS and images turned off (google "Turn off CSS + [your browser name]" to learn how to do this). See what the internet looks like without a designer’s influence.

CSS (there’s a hint in the name : Cascading Style Sheets) is the realm of the designer – it’s where color, typography, and layout come into play. But underneath it all is HTML, and you have to appreciate it to understand what really makes the internet tick. To begin, get comfortable understanding and writing HTML. Learn how to put content on a page, and know when and why you’d use <h1>,<h2>,<p>,<ul>,<li>,<div>,<header>,<section>,<footer>,<aside>, etc. before you stress about styling any of it. There are actually only a handful of HTML tags you’ll use regularly, so it won’t be long before you know them by heart.

For example, here’s what Apple.com looks like without any styles or images:

Apple sans style

Crazy, right? As a fun bonus, looking at sites without all the style makes you appreciate how important the content is. The naked HTML is what Google sees when it scans your website; it’s also what screen-readers see. It’s the foundation that every website starts with.

2. Build yourself some nice little one-column websites

As a designer you’ll probably start itching to change that HTML into something that fits your vision – you’ll want to make the page blue, or change the text from the browser default to a sans-serif. This is shockingly easy to do with just a few words.

Try not to get bogged down in embedding custom webfonts, or whether to use RGBA or HSLA for your colors – at least at first. If you’re googling "change my text to be blue" and you read anything that makes you feel anxious, just close that tab and look elsewhere. There are lots of resources for finding clear simple answers on CSS. My favorite is CSS-Tricks.com; if I’m googling something CSS related, and they come up in the results, it’s the first place I go. Saying this again in big words because it’s important:

For now, stick with simple stuff like "body { background: #0058FF; }". Don’t worry about embedding Google Webfonts, instead, try "body { font-family: Arial, sans-serif; }" and hit refresh.

(Fun fact – things like Google fonts and Adobe fonts didn’t exist for a very long time! In the first few years of my career, all my designs used one of about four system fonts. You’d be amazed what you can do with fewer options. 👵 )

The first time you hit refresh and see your page light up blue and nicely sans-serif-ed, you will feel like an internet god.

At first, I’d practice building simple one column websites. Get really good at the basics of styling (aka, the basics of design): learn about color, typography, and working with images.

(Wait until you see what you can do with background images! And now you get to learn about exporting images from your mockups, why PNGs aren’t always the best option, and so much more!)

You’ll mostly use the same handful of properties over and over, and soon you’ll have them all memorized. Fun fact though: you don’t have to memorize anything, because everything is listed on countless websites on the internet. Also most code editors will automatically suggest CSS properties for you once you type a certain keyword. ☑️

(When I was building my first websites I was so anxious about memorizing CSS properties that I printed out a huge list of them and taped them above my desk, and highlighted my favorite ones. You won’t have to do this. 🤓 )

3. Learn about layout

Once you’ve created some kickass one-column websites, you can start to learn about layout. This is probably the hardest part of learning CSS, but don’t let it scare you. The truth is, there are tons of ways to turn one column of text into two columns sitting side by side, and some ways are better than others, but at the beginning, just do what works! There’s floats, multi-column, flexbox, grid, and hell, even tables. At this point you’re just getting the shapes where you want them and roughly the right size.

(Side note: I feel for new developers learning CSS layout now, because when I started out, there weren’t many options for laying out content. The whole internet was pretty much made of tables and Flash files (for the young ones reading this, Flash basically meant we made a giant clickable movie of a website and you waited for the whole movie to load and then clicked around on it – it was crazy!) The upside is, now websites actually work in a sane, accessible, usable way. The downside is, you might get stressed when you hear that there’s more than one way to lay out a website.)

If I were a new developer starting out, I’d probably just use the "float" property, the same way I did when I first learned about CSS more than a decade ago. This will work to a point, and will get you fairly far along.

The float property does have its issues though (it wasn’t originally intended to be used for laying out a whole page, we all just started using it that way), so eventually you’ll run into a problem where float doesn’t work for your design. This is when you will shake your fist at the sky, and cry out in rage and confusion. 😭

When this happens, you may Google the issue and find a Stack Overflow post that offers a simple fix for your float troubles.

You may also just want to google Flexbox, and apply "div { display: flex;" }" to a container around your items and watch your layout issues (probably) magically disappear. You will feel immense relief and calm wash over your body when this happens.

(If you are like me, you probably won’t totally understand how or why Flexbox works until you run into this issue 15 more times and finally take the time to read an article from Rachel Andrew explaining Flexbox, and then you’ll feel your mind expand with the warm glow of new knowledge and wonder why you didn’t just read the article sooner. 🤦‍♀️)

By the way, the relief that comes with hitting a snag, searching for a solution, and finding one that works is the high that will keep you coming back to coding over and over. Because you will hit snags all the time, but there are so many great resources for front-end developers online. If you look on the internet long enough, you will find a clear-cut answer that works. (And again, where else is that true in life? How awesome is it that we can just figure out what’s broken and fix it ourselves? 💪)

4. Make it work on phones

I’m way oversimplifying here – Responsive Design is about so much more than "making it work on phones." You’ll see what I mean once you start to ease yourself into this wonderful new stage of your career.

Luckily for us all, a resource exists that will make this as pleasant as slipping into a warm bath, and that resource is Ethan Marcotte’s Responsive Web Design. Ethan is hilarious, articulate, and has a rare gift for distilling seemingly complex ideas into something simple and approachable.

If learning to code evolves your cute little design Charmander self into a Charmeleon, learning to build Responsive Websites makes you a badass Charizard.

As a designer, learning how to create websites that are responsive will evolve your skillset in a big way. Gone are your days of designing giant TV-sized Sketch files and handing them off to a developer to "just figure out" how to "make it work on mobile." I’ve seen this happen many times, and it causes chaos and sadness for all involved. 🙅‍♂️

Understanding how websites adapt for different contexts and devices means you can design websites that will actually work for different contexts and devices. It’s the best gift you can give yourself, your team, and your users. And thanks to Ethan’s book, once you’ve got some basic front-end knowledge under your belt, it’s not that hard. 👍

5. Make it dynamic

So far I’ve talked about creating static websites, where you basically write some content with HTML, dress it up with CSS, and help the layout adapt for different devices. Again, if you’ve made it that far as a designer you are awesome and should get, at the very least, a big sticker that says "Designer who Codes."

But let’s say you start doing this for clients, and eventually you realize that they keep wanting to change the words on the website, and you’re sick of having to make these updates for them. You may realize – as I did, with a gasp of terror – that you’re going to have to learn to make their websites with a Content Management System, or CMS. 😨

Here’s the thing about good CMS’s though: they have tons of documentation. I’ve designed websites using Wordpress, Shopify, and (back in the day) Tumblr, and I don’t know how to write a single line of PHP (or any other "real coding language" for that matter). You want to know my secret?

I started out by hacking existing themes. 🙊

That’s it! I took what other brilliant people have done and made it my own. I started simple – I used a theme that was pretty close to what I wanted, and tweaked the stylesheet and background images to make it mine. I pushed that a bit further each time. Sometimes the theme I was hacking didn’t have a thing I needed, like, say, a calendar. So I’d google "Add calendar widget to Wordpress" and try out what different results suggested until something worked. That’s it! That’s the secret to how I became a "Wordpress developer."

After a few years of hacking themes, I understood how Wordpress works well enough to create my own theme from scratch, even though I still don’t know PHP. Because again, there is so much great documentation that exists for how to do this! I just looked for articles and tutorials where the author’s style of writing didn’t befuddle me, and followed the steps until I arrived where I want to be.

That’s it! Now you know my steps to becoming a Designer who Codes.

Lastly, if I had a friend who was just starting out in web design, I would probably tell them to do the same thing I did back when I first started, which is to read Head First HTML and CSS: A Learner’s Guide to Creating Standards-Based Web Pages.

(Although I can only vouch for the First Edition, which is what I read, and which you can probably only find in antique stores nowadays.)

This book taught me the fundamentals of how websites actually work, which – if you’re a web designer – is a pretty great thing to know. By the time you’ve finished it, you will be able to build a basic web page and will be light years ahead of many of your design peers.

There have been a handful of other books that have made me more confident as a front-end developer, and helped to shape my career. Here they are, in the order I read them:

If you want to be a Designer who Codes, reading these books is how I did it. Some of them may be "old" by internet standards, but everything in them is still relevant today. The people who wrote them are geniuses who will make you feel smart too.

I am a book person. I was raised to believe that if you wanted to figure something out, you better get your ass to the library and crack open a book about it (and photocopy the relevant pages, highlight them, and write notes on your copies, because this was pre-2000 and I wasn’t allowed to use the family computer for more than 30 minutes a day). I love learning from books. 📚

If you’re not a book person, that’s okay too. Andrew – also a Designer who Codes – is not a book person. He bought one book ("HTML for Dummies," hilariously) in his first year at University, and everything he’s learned since then through has been through trial and error, Googling it, poking around in other people’s code, and reading the odd article here and there (although he did learn Responsive Design from Ethan’s book). He’s now one of the best front-end developers I know. 😚

If you are of my younger brother’s generation and are very into watching things on YouTube all the time, I’m sure there are tons of great resources on there to learn the basics of code. I can’t tell you what they are, because I am old and rarely have the patience to watch videos on the internet. (Any 25 year olds want to weigh in with their favorite HTML & CSS for Designers Youtube channels? Are there good ones? If not… should I make one?) 🎬

My point is, there are tons of free or cheap ways to learn the basics of front-end code pretty quickly. So go for it if you want to, and don’t be scared!

xoxo, Meagan