Designer's Guide to Learning to Code

I had never written a line of code when I began my first job as a graphic designer in 2011. The agency I worked for offered a mix of identity, print, and web design, so my creative director soon had me prototyping my first website. A senior designer sat down with me to practice prototyping a simple homepage, walking me through each line of code. Our in-house developer was able to answer all of my questions. In short, I had abundant resources and support.

In addition to that, the internet at the time was a simpler place. A designer only had to pick up HTML and CSS to prototype a website. Most of the web was not responsive, and browsers had limited capabilities.

These days, as a web designer for Palantir.net, I use HTML, SCSS, jQuery, Twig, Git, YAML, and JSON daily. The web is more advanced, and as its capabilities have grown, so has the knowledge required to get your foot in the door.

So, what if you’re a designer who is interested in learning to code, now? And what if you don’t conveniently work for a company that supports this endeavor? Where do you start?

In this blog post, I will provide a high-level overview of the languages and tools I use to prototype websites, along with resources and notes to help you get started. Keep in mind that, once you learn one language, it becomes exponentially easier to learn others. I’ve noted below where you can anticipate a learning curve and what to focus on as your build your skills. Good luck!

Let’s Clarify Some Language

Let’s go over a few basic concepts before we dig in.

Prototype

First off, you might be wondering what a prototype is. At Palantir, we define a prototype as an in-browser mockup, built in code, of a particular piece of a website, such as the header or the home page.

Prototypes are documented and organized into a “style guide.” Think of a style guide as brand guidelines for a website. It’s typical for a style guide to contain all the prototyped components of a website. Here are some great examples of style guides and here is a blog post about the usefulness of style guides.

Developers take the code from a prototype/styleguide and use it to build a CMS. CMS stands for “content management system.” It’s the software that facilitates the creation, editing, collaboration, and publishing of content.

HTML

The web is built on HTML. HTML (which stands for Hypertext Markup Language and is often referred to as “markup”) tells browsers what a thing is and how it is structured. For this reason, it’s a great place to start when you’re learning how to code a website.

The components that comprise a web page - headers, paragraphs, navigation, images - are all HTML elements. When learning HTML, really focus on understanding how different elements are used. Semantic or correctly written markup matters because browsers, search engines, and assistive devices such as screen readers rely on markup to understand the contents of a page. So, using the correct HTML elements impacts SEO and accessibility.

Example:

<h1>Curry: an Anthology</h1>

<h1> stands for “header one” and designates this header as having the greatest hierarchy on the page.

<h2>Chapter 1: History of Curry</h2>

<h2> stands for “header two” and indicates that this header is hierarchically below <h1>.

<p>The word “curry” is a blanket term for a plethora of spiced dishes that originated on the Indian subcontinent and are enjoyed around the world.</p>

<p> stands for “paragraph.” This is the body text of the page.

<blockquote cite=”http://www.bbc.co.uk/food/0/24432750”>
. . .curry may be the oldest continuously prepared cuisine known in human history, although with modern ingredients like chilli and black pepper added centuries later, the exact definition of curry is still under scrutiny.
</blockquote>

<blockquote> stands for “block quote” and is used to quote outside sources.
 

CSS

CSS, or cascading style sheets, gives the web its sense of style. It is used to specify colors, type treatment, positioning, and other visual treatments. It can even be used for simple animations.

“Cascading” references the way style sheets are linked to the html files in a defined order of precedent. As a designer, CSS will be your best friend.

Here is an example of css applied to the markup we saw in the previous section:

blockquote {
  border: 1px solid red;
  background-color: gray;
  padding: 10px;
}

When learning CSS, be aware that it’s an opinionated and confusing language, not unlike English. You will eventually get used to it, but you won't be the first or last person to wonder if you're crazy when something doesn't work the way that it theoretically should.

SCSS and the Terminal

After you've mastered CSS, I recommend moving on to SCSS or “Sassy CSS” (yes, I’m serious. The web has a sense of humor.) SCSS builds off of CSS, making CSS more extendable and maintainable. It's especially useful if you're coding large websites with dozens of stylesheets.

Here is an example of how CSS can be extended through SCSS. The following code specifies the style of a blockquote when it occurs within an article. It also applies a mixin, that we have defined elsewhere, called “%quote-styles” to the blockquote.

article {
  blockquote {
    @extend %quote-styles;
    border: 1px solid red;
    background-color: gray;
    padding: 10px;
  }
}

You’ll likely also hear about Sass and LESS. Sass is a precursor to SCSS that uses a minimalist style of syntax. SCSS is often referred to as “Sass,” as the two are considered different syntaxes of the same language (it might be helpful to think of them as different English dialects.) Like Sass and SCSS, Less is an extension of CSS, but it is not as widely used as SCSS. 

In order to start coding with SCSS, you will need to learn how to use your terminal to install SCSS and compile the code into CSS. If you’ve been working with HTML and CSS up until now, this might sound confusing. Why does SCSS need to be installed? Why does it need to be compiled?

Browsers, such as Chrome, Safari, Edge, and Firefox, use rendering engines to parse code and deliver the visual representation of websites that we’re accustomed to seeing on our screens. These rendering engines understand CSS, but not SCSS. So, while SCSS makes it easier to write styles, it needs to be compiled into CSS so that it’s readable by a browser.

Working in the terminal is an enormously useful skill and will come in handy more and more often as you pick up new languages and tools, so don’t be shy about jumping in! To be clear, it will likely take some getting used to. The output is difficult to read, and it is very literally a black box on your screen. However, you will over time become accustomed to parsing the output, and I find that even when an alternative to using the terminal is provided, I still prefer the terminal for its straightforwardness and simplicity. I also recommend increasing the font size for easy reading and using the iTerm application (more on that under “Recommended Tools”, below), which has some great customization options that improve usability.

Here are the directions to install and compile SCSS using your terminal. If you have a Mac, please note that you will need to install the latest version of Ruby on Rails, rather than using the version that comes with the system. Here are the directions to install Ruby on your Mac. If you’re on a PC, check out The Friendliest Guide About INSTALLING and USING Sass on Windows.

jQuery

JQuery is a JavaScript library that simplifies JavaScript programming, making it easier to animate objects and craft interactions. You do not need to learn JavaScript in order to pick up jQuery. I like to think of jQuery as the programming language that handles “special effects” to your site’s markup. This might include any of the following:

• Automatically adding an asterisk to a form field that is required
• Opening and closing a “hamburger” menu so the user can see its contents
• Scrolling through a carousel of images

Here is an example of jQuery in action from the W3Schools website.

Unlike SCSS, jQuery does not need to be installed locally on your computer. To get started, simply add a link to the jQuery library in the <head> of your HTML file. Instructions can be found in the W3C’s jQuery tutorial.

The tricky thing about jQuery is that you typically don’t need to write very much of it on a per-project basis. A project might have only a few hundred lines of jquery but thousands of lines of SCSS and HTML. It can therefore take more time to become really proficient at jQuery.

PHP and Twig

PHP, or Hypertext Preprocessor, is a server-side scripting language. This means that it is able to execute tasks from a web server in response to a user’s actions. It makes a website both dynamic and interactive, rather than a static collection of pixels. PHP enables you to break your website up into reusable components. A single component might be the site header, or it could be a button. These components can be arranged and rearranged to create a variety of page templates that are compiled into markup. For this reason, PHP is the building block of many content management systems.

Twig is language that compiles page templates into PHP. Unlike PHP, it has an easily readable syntax, and it was specifically created to build templates. Learning PHP is not an essential precursor to becoming proficient in Twig, so I recommend going straight for Twig.

For example, if you have a file titled button.twig with markup for a button, you can place a button wherever you need on a website using the following syntax:

{% include ‘button.twig’ %}

When you start learning Twig, you will begin to break down your websites into small components with unique variables. This reframing can be difficult to grasp if you’re used to seeing your website as the sum of its parts, but it’s ultimately the way that templating works.

Git

“Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people” (source: Wikipedia). It allows you to collaborate on projects with other people. Things you can do with Git include:

• Uploading code to a source code repository, like GitHub, Bitbucket, and GitLab.
• Maintaining multiple, separate versions of a project
• Merging updates that were completed separately into a single file

Github is the biggest source code repository and the one we use here at Palantir. Github is where we collaborate, commenting on one another’s code, providing feedback, and asking questions.

Instructions for installing git can be found on the Git website. You can access git with software such as Sourcetree or GitHub Desktop. These programs help you visualize your repository and how different users are contributing to it. However, I prefer to use git via the terminal. For instance, typing $ git pull will download code from the source code repository to my computer.

Recommended tools

These are some of my favorite tools for building websites.

Prototyping Frameworks

A prototyping framework is basically a compiler paired with whatever handy tools you might like to use when prototyping a website, such as page templates or built-in qa tests. They often come with a lot of "out of the box" components that can be customized to suit your needs.

Foundation is my favorite open source prototyping framework for small projects. It uses Handlebar, a templating language that is syntactically similar to Twig (however, here is some information about what differentiates Twig from Handlebar from a technical standpoint). It’s easy to pick up one if you know the other.

PatternLab is a really popular framework in the Drupal community. Unlike Foundation, Patternlab uses Twig and PHP and is built around the concept of atomic design. It’s excellent for large-scale projects, but a bit too involved if you’re just getting started.

Text Editors and Terminals

Sublime Text is my text editor of choice. It has some great customization options and plugins (I use the SCSS Linter plugin all the time to ensure that my SCSS is semantic), and it color codes your code for better legibility.

Atom is an open source text editor created by GitHub. It boasts that it is “approachable on the first day without ever touch a config file,” which makes it a popular choice with those who are just beginning to code.

iTerm is a terminal that also offers excellent customization options, including color coding. This makes it more user-friendly than Apple’s default terminal.

Other things to know about

Keep your eye out for these subjects and develop a basic understanding of what they are.

• Web Accessibility: the practice of designing and developing websites that accommodate individuals with disabilities
• Atomic Design: the practice of breakdown down a website’s design into small components (often called “atoms”) for a modular approach to building page templates
• SEO: search engine optimization

Conclusion

At Palantir, we designers code the prototypes and build living style guides for every project. This makes us stronger designers in that we are able to wield control over our final medium - code and pixels, rather than relying on other team members to execute our vision. It also enables us to deliver greater value to our clients by smoothing out the inefficiencies and miscommunications that occur between design and development.

If you need more convincing as to why designers benefit from learning to code, check out my colleague Ashley’s post about the benefits of designing in the browser.

Resources to Get You Started

HTML

• W3Schools' HTML Tutorial
• html5 Doctor

CSS

• W3Schools' CSS Tutorial

SCSS

• The SCSS community website
• CSS Preprocessors – Sass vs LESS
• Web browser engine
• How browsers work: Behind the scenes of modern web browsers
• [Sass] For Beginners: The Friendliest Guide About INSTALLING and USING Sass on Windows

jQuery

• jquery learning center
• W3Schools' jQuery tutorial