The Designer’s Guide to
Web Programming
Learn to make websites with GD with GD

Chapter 1

What’s a website?

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!

@media Queries

What does it mean for a website to be responsive? For starters, it means that no matter your screen size, the site should adjust its layout keep a good user experience.

Chapter 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.

Online Resources

This guide is like a tour of the Internet. As you follow along, you’ll find links to a variety of resources that real-world developers use. In particular, you’ll find tons of links to MDN and W3Schools, two sites dedicated to documenting how web code works. While MDN usually provides more up-to-date information, W3Schools offers a friendlier interface. Together, the sites cover everything you need to know to make your own websites.

Additionally, you’ll find GD with GD links scattered throughout this guide. These include coding demos (via DEMOLAND) to help tie concepts together and exercises (via test-projct-1.html) to put said concepts in use.

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

HTML Files

A website is an HTML (or .html) file. What does that mean?

Code is just text stored in a file. We call this plaintext, because it doesn’t have any associated design (like font or color). Instead, it’s just text. The way we can tell programming languages apart is by their syntax, or their rules. HTML’s main rule is that we separate information by writing HTML elements.

This means that HTML doesn’t care that much about tabs, spaces, or line breaks. We’ll still use them, but mainly to organize our code. To get around this, we’ll need to use HTML elements.

Typesetting with HTML

We can think of HTML as the content on your website. There are different kinds of content, but the most basic kind is text. HTML handles text via several dedicated HTML elements, from paragraphs to headings to lists and more. Each of these elements comes with its own set of default styles (which we will soon be able to override). For now, let’s make a website that actually says something!

Note: this is NOT a complete list of HTML elements! These are just the most common elements you’ll encounter for typography.

Styling Text with CSS

There’s not much you can do with just HTML. To start making your website pretty, we’ll need to use CSS. CSS (Cascading Style Sheets) is another programming language that works with HTML to style HTML elements.

CSS mainly uses two things: properties and classes. Properties define the different visual characteristics of HTML elements, while classes organize sets of properties so that you can apply all of them at once wherever you want. We can even embed CSS right into an HTML element’s opening tag!

Concepts

CSS Syntax

The rules for writing CSS
CSS Comments

Notes written within CSS
CSS Specificity
CSS Units
CSS Colors

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
Chapter 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.

Laying Out an Article

Coming soon!

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;
Chapter 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!

@media Queries

What does it mean for a website to be responsive? For starters, it means that no matter your screen size, the site should adjust its layout keep a good user experience.

Chapter 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.

@media Queries

What does it mean for a website to be responsive? For starters, it means that no matter your screen size, the site should adjust its layout keep a good user experience.

Chapter 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 chapter, 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 chapter, 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.

@media Queries

What does it mean for a website to be responsive? For starters, it means that no matter your screen size, the site should adjust its layout keep a good user experience.