The Designer’s Guide to
Web Programming
A project by GD with GD

Here’s a secret: no matter your skill level, you can always find wonderful ways to use code.

In this guided tour of web programming, we’ll walk through the resources that professional developers rely on everyday. And each time you learn something, you’ll unlock a wealth of new creative possibilities. We’ll break down these new possibilities through interactive demos and exercises.

Unit 1

Typography

To a designer, typography is everything. But unlike on other mediums, typography on the web is fluid because it has to adapt to a changing canvas — your screen size. This fluidity means that we can’t use traditional software to design a website. Instead, we have to use two programming languages: HTML and CSS.

Programming may seem scary, but web code is actually pretty simple. HTML and CSS basically just describe what should appear on your screen, and the most basic form of visual content is typography. So let’s jump right into coding and start making websites!

1.1

Online Resources

Online Resources

MDN

Web code documentation (more up-to-date, but sometimes overwhelming)

W3Schools

Web code documentation (less up-to-date, but friendlier)

DEMOLAND

In-browser editor for viewing code demos

test-project-1.html

Creative coding exercises

1.2

HTML Files

Demos and Exercises

A Basic HTML File

ascii-art.html

Turn text into art!

Concepts

HTML (HyperText Markup Language)

The main programming language for the web

HTML Elements

A piece of content on a website (text, images, metadata, etc.)

HTML Comments

Notes written into an HTML file

Basic HTML Elements

<html> _ </html>

Contains your entire HTML document

<head> _ </head>

Invisible metadata relating to your website

<meta> _ </meta>

Multi-use metadata element

<title> _ </title>

The title that appears in your browser tab

<body> _ </body>

The visible content on your site

<br>

Line breaks (no closing tag!)

<pre> _ </pre>

Preformatted text

1.3

Typesetting with HTML

Demos

HTML Elements for Typography

Overview of typographic HTML elements

Typographic Hierarchy

Example of how you might code a basic webpage

Concepts

HTML Attributes

HTML Entities

Special codes for specific characters you can’t type otherwise (like the < symbol)

HTML Text Fundamentals

Deep dive into typography on the web

Typographic HTML Elements

<p> _ </p>

Paragraphs

<h1> _ </h1>

Headings (<h1>-<h6>)

<ul> _ </ul>

Unordered (bulleted) lists

<ol> _ </ol>

Ordered (numbered) lists

<li> _ </li>

List items

<strong> _ </strong>

Bold (important) text

<em> _ </em>

Italic (emphasized) text

<sup> _ </sup>

Superscript

<sub> _ </sub>

Subscript

<a href="url.com"> _ </a>

Links

<table> _ </table>

Tables (and other related elements)

1.4

Styling Text with CSS

Demos

CSS Properties and Classes

Inline CSS

Color Codes

Using the Inspect Tool

Concepts

CSS Syntax

The rules for writing CSS

CSS Comments

Notes written within CSS

CSS Units

Adding CSS to HTML Elements

<style> _ </style>

Element for writing CSS in an HTML document

.class-name { color: red; font-size: 12px; }

CSS classes (applying CSS to multiple HTML elements)

style="color: red; font-size: 12px;"

Inline CSS (applying CSS to a single HTML element)

<span> _ </span>

Inline text element (for adding CSS to specific words)

CSS Properties for Typography

font-size: 24px;

Font size

color: rgb(255,0,0);

Font color

text-align: center;

Text alignment

letter-spacing: .02em;

Letter spacing (tracking)

word-spacing: .5em;

Word spacing

line-height: 1.4em;

Line height (leading)

text-transform: uppercase;

Forced capitalization

text-decoration: 1px green wavy underline;

Underline and similar decorations

text-underline-offset: .2em;

Gap between text and underline

text-shadow: 5px 5px 10px rgba(0,0,0,.5);

Drop shadow specifically for text

font-weight: bold;

Boldness

font-family: sans-serif;

Font/typeface

Tutorials

Baby Steps

Everything you need to know to launch a website

Concepts

HTML File Paths

External CSS

1.6

Web Fonts

Demos

Custom Fonts

Variable Fonts

Concepts

Web-safe Fonts

Fonts that are available on (nearly) every computer

Importing Custom Fonts with CSS

@font-face { _ }

Importing custom fonts via CSS

font-weight: 500;

Specify a font’s weight (or range of weights for variable fonts, e.g. 100 900)

font-style: italic;

Specify a font’s style

font-variation-settings: "wght" 500, "SRFF" 0;

Setting values for variable font axes

font-feature-settings: "wght" 500, "SRFF" 0;

Turning on or off OpenType features for your font

Unit 2

The Box Model

On the Internet, everything is a box. Even though we have different HTML elements, each one is essentially a preset style for the same boxy element. And each boxy element shares the same CSS properties, which together form the “CSS box model.”

By learning how the box model works, you’ll have the power to move beyond typography and begin laying out your page graphically.

Demos

Basics of the Box Model

Units

Concepts

The Box Model

CSS Units

CSS Properties for Sizing

width: 50%;

min-width: 100px;

max-width: 1200px;

height: 100vh;

min-height: 2em;

max-height: 600px;

aspect-ratio: 1 / 1;

CSS Properties for Spacing

margin: 0 auto;

padding: 10px 20px 30px 40px;

border: 1px solid black;

outline: 1px solid black;

outline-offset: 20px;

CSS Properties for Styling Boxes

border-radius: 10px;

background-color: red;

box-shadow: 10px 10px 20px rgba(0,0,0,.5);

opacity: .5;

transform: scale(2) rotate(10deg);

2.2

Box Sizing

Demos

Box Sizing

Concepts

box-sizing: border-box;

Overriding Default CSS Properties

* { _ }

Universal selector (apply CSS to every HTML element

Default CSS Properties

Demos

Using the “display” property

Working with Divs

Concepts

Inline vs. Block Elements

HTML Elements

<div> _ </div>

Generic block element

<span> _ </span>

Generic inline element

CSS Properties

display: block;

Set an element to block, inline, inline-block, or none (we’ll have more options later!)

overflow: scroll;

2.4

Images

Demos

Responsive Images

HTML Elements

<img src="url or file path">

Images (no closing tag!)

CSS Properties for Styling Images

object-fit: cover;

object-position: center;

filter: invert(100%) blur(2px);

Works on any element!

mix-blend-mode: overlay;

Works on any element!

Adding Images Using CSS

background-image: url("url or file path");

background-size: cover;

background-repeat: no-repeat;

background-position: center;

Demos

Grouping Elements

Anchor Links and IDs

Concepts

Semantic HTML Elements

Anchor Links

<a href="#section-name"> _ </a>

Anchor link element

id="section-name"

HTML element ID attribute

scroll-behavior: smooth;

CSS property for smoothly scrolling when clicking an anchor link

Semantic HTML Elements

<header> _ </header>

<nav> _ </nav>

<main> _ </main>

<section> _ </section>

<footer> _ </footer>

<figure> _ </figure>

<figcaption> _ </figcaption>

Floating Content with CSS

float: right;

clear: left;

Demos

Hover and Active States

Concepts

Pseudo-classes

Adding Hover States with CSS

:hover { _ }

:active { _ }

transition: 1s;

transition-timing-function: linear;

cursor: pointer;

Demos

@keyframes Animations

Creating Animations with CSS

@keyframes my-animation { _ }

animation-name: my-animation;

animation-duration: 5s;

animation-delay: -1s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

animation: my-animation 5s -1s infinite alternate ease-in-out forwards;

animation-play-state: paused;

Unit 3

Layout

Websites are vertical — as you add content, your page gets taller. That works great for basic articles, but what about non-vertical layouts? Help!

The need for more complicated web layouts arose, so CSS evolved to meet these needs. It became capable of changing depending on your screen size. On top of that, designers gained two brand new ways to lay out content: in two-dimensional grids, and a quirky little thing called flexbox.

3.1

@media Queries

Demos

Media Queries

Typical Device Breakpoints

3.2

CSS Grid

Tutorials

Grid Garden

An Interactive Guide to CSS Grid

CSS Grid Layout Guide

CSS Properties for Grid Parents

display: grid;

grid-template-columns: 1fr 2fr 1fr;

grid-template-rows: repeat(3, 1fr);

grid-auto-flow: row;

gap: 10px 20px;

grid-auto-columns: 1fr;

grid-auto-rows: 1fr;

grid-template-areas: "a b c";

CSS Properties for Grid Children

grid-column: span 2;

grid-row: 1 / 3;

grid-area: "a";

align-self: stretch;

justify-self: end;

3.3

Flexbox

Tutorials

Flexbox Froggy

An Interactive Guide to Flexbox

CSS Flexbox Layout Guide

CSS Properties for Flexbox Parents

display: flex;

flex-direction: column;

flex-wrap: wrap;

gap: 10px 20px;

align-items: center;

justify-content: center;

CSS Properties for Flexbox Children

flex-grow: 1;

flex-shrink: 0;

flex-basis: auto;

align-self: stretch;

justify-self: end;

Demos

Nested CSS Selectors

Concepts

CSS Selectors

Demos

Relative Positioning

Absolute Positioning

Fixed Positioning

Sticky Positioning

Concepts

CSS Positioning

CSS Properties

position: absolute;

top: 20px;

right: 5vw;

bottom: 10in;

left: 50%;

Unit 4

Interaction

Once you’re comfortable with HTML and CSS, you might find yourself asking a question: is this really all a website can do? Organize and present information?

Of course not! Websites are incredible not just because they give us information, but because they also make that information interactive. Unfortunately for us developers, that means we’re going to have to learn yet another language, namely JavaScript. Get ready for something a little different!

Unit 5

Loops

JavaScript is pretty darn powerful. Not only can we use it to make websites interactive, we can use JavaScript to make things happen on their own! To leverage this kind of power, we need to learn about a fundamental concept of computer science: loops.

In this section, we’ll use loops to automate repetitive tasks and make full use of the web medium.

Unit 5

Data

One way JavaScript is so different from HTML and CSS is that it can actually write HTML and CSS for you. Once you realize that, you might ask yourself: how much of my website can I code just using JavaScript? The answer is quite a lot, but it helps to have some data to pull from.

In this final unit, we’ll look at how we can use JavaScript and data to create complex websites without having to write much HTML or CSS by hand.

Even though this is the last unit, remember that there isn’t really a finish line to web programming. You can always run into a problem that requires learning a new skill. After this, you’ll at least have all the basics you need to solve those problems.