The whole “Should designers should learn to code?” thing is such a tired ole’ topic that I’ve been avoiding writing about it for months now.
It’s a shame, because learning how the web works should (damn it!) be a fun process for us designers and non-techy people.
In this article I'm going to tell you how I taught myself to build websites, and suggest some ways to—more easily than you think—learn some basic HTML and CSS.
First though, let’s rewind a few years.
Honestly, I'm shocked that in 2010 I'm still coming across 'web designers' who can't code their own designs. No excuse.
— Elliot Jay Stocks (@elliotjaystocks) February 17, 2010
When this tweet was posted back in 2010, it launched a gazillion blog posts, each arguing the case why/why not designers should learn to code.
To cut a long story short: the answer to “Should designers learn to code?” is more nuanced than a simple “Yes” or “No”.
And actually, there’s a much better question, which you can easily figure out an answer to, right here and now.
If you’ve been thinking about learning HTML and CSS
Try this as your opening gambit instead…
“What do I want to build?”
Making this your starting point ensures that your expectations are realistic. And that you don’t get lost in a quagmire of horrendously complicated Bootstrap themes or JavaScript frameworks a couple of weeks from now. (Trust me, you don't wanna go there yet...)
To explain, let’s take a look at three possible answers to the question “What do I want to build?”…
(On which note, if there’s something else related to coding websites you’d like me to write about, drop me a note).
”I want to build websites that I’ve designed for clients, instead of outsourcing them to a developer”
Makes sense right, because developers are hella expensive to hire?
But, of course, there’s a reason for this… it takes a good few years to get your head around the complexities of web development.
Which means two things: (a) good developers are always in demand and (b) you won’t be coding any websites for your client in the immediate future. (Further down the line, by all means though).
Sorry to be a downer! But I want to keep this real. Real is good.
So let’s skip this answer for now, and move to something a bit less ambitious…
”I want to put together a portfolio website for myself.”
Ah, better. Much better. Once, you’ve picked up some basic HTML and CSS, this is a nice place to start. Plus it gives you something all of your own to tinker with.
(Just be wary of spending more time building your site than you do promoting yourself/your work — I’m actually using Squarespace for this website at the moment to sidestep this temptation).
However, building a portfolio website is still a chunky old topic, so it’s something I’ll need to explore in a longer article. (Sign up to my mailing list to stay updated on this).
On to the next (imaginary) answer then…
I just want to get a rough idea of how HTML and CSS works.
Gooooood. Every designer needs this. Knowing about code is always going to be useful, as you’ll have a better idea of what can/can’t be built, plus find it easier to communicate with developers. (Or at the very least, to have an idea what they’re saying the next time you send them a PSD and there’s something in your design that’s freaking them out).
What if I told you that you can start poking around under the skin of the internet right now? Using tools you’ve already got?
Yup.
"Code to learn" beats "Learn to code"
"Code to learn" > "Learn to code".
— James Greig (@j_greig) March 24, 2016
When I taught myself to make websites back in 1998(ish), the web was a very different place.
No Google. No social media. No cat videos. And no snazzy online courses teaching you to code.
I taught myself the basics of making websites on one of those nasty beige PC boxes with a massive cube-like monitor, hooked up to the net via a dialup modem.
These days, there’s a whole heap of places you can learn HTML and CSS online.
And the cool thing about web browsers these days (from Chrome to Firefox to Safari and even Internet Explorer) is that they’ve got something called "developer tools" built in.
Firefox used to be the most popular browser for this, but these days it’s Chrome’s “Developer Tools” that have taken pole position.
Don't let the name fool you though.
Even if you’re not a developer, you can use Chrome’s Developer Tools—“DevTools” for short—to hack away at websites to your heart’s content.
- Ever wanted to know what font a headline is written in?
- Or see what a web page would look like in a different font?
- Ever wanted to grab an image from a website, but the usual right-click-to-download doesn’t work?
- Ever wanted to change the colour behind something on a website so you can comp it into your mockup?
- Ever wanted to reveal a ****** password that's saved in a form, but you can't for the life of you remember?
Well, DevTools can help you with all this stuff, and lots more.
It's easier than you think, and as you go, you'll pick up some HTML and CSS without really trying.
So, if you're game, I'm going to start teaching you some basic DevTools stuff in my next article.
(Sign up to my mailing list below and get it sent straight to your inbox).
Meanwhile, have a think about what you want to build... :)
Posted to DevTools for Designers in 2016.