Tutorial Blank Demo Cheatsheet

Hi there! I’m Gabriel, and I made GD with GD and DEMOLAND. I created this site because I needed a website to easily share code demos with my students. There are products out there that let you do this, but this one’s entirely open-source, which means that it’s free to run and you can launch your own DEMOLAND if you’d like!

The site’s still a work-in-progress, but in a future version I’ll include instructions on how to launch your own version. In the meantime, you can check out the GitHub repository to see this site’s code!

Credits

DEMOLAND was developed by GD with GD / Gabriel Drozdov. The site uses Limkin by Too Much Type and Geist Mono. Code editors are built using CodeMirror 5.

If you launch your own DEMOLAND, I’d appreciate it if you left these credits in! And send me an email if you’ve got questions or want to share your own DEMOLAND with me!

Welcome to DEMOLAND, a bookstore that runs on code and teaches it too!

Learn how to code websites using HTML, CSS, and JavaScript right in your web browser! Open a book to read chapters full of interactive demos you can edit and test without leaving this site.

Interested in diving deeper into learning design and development? Visit GD with GD for more resources!

🎓  Tutorial

DEMOLAND lets you books full of web demos that you can read, edit, and test right in your browser! Start here to learn how to use the site’s interface.

Chapter 1

How to use DEMOLAND

Get started with DEMOLAND and learn how to code websites!

Open chapter
1
Welcome to DEMOLAND!
2
What is HTML?
3
What is CSS?
4
What is JavaScript?
5
What are JavaScript Libraries?
6
Starter Template

🛠️  Workshops

Every now and then, I’m asked to run a coding workshop introducing web programming or a topic related to websites. Each of these chapters represents one workshop.

Chapter 1

Introduction to Coding [RISD Fall 2025]

An overview of practices related to web programming, covering HTML, CSS, JavaScript, and JavaScript libraries!

Open chapter
1
Introduction
2
What is a line of code?
3
Making code pretty
4
Reusing code
5
Document flow
6
CSS self-portrait
7
Grouping elements together
8
Weaving digital textiles
9
A quick CSS sidenote
10
Typesetting with code
11
Adding interactivity
12
Building a button
13
Animating elements
14
Styling based on screen size
15
Changing the page’s layout
16
Fun with flexbox
17
Fun with grid
18
Building a portfolio
19
Putting it together
20
But what about JavaScript?
21
Manipulating the page
22
Sometimes pink, sometimes green
23
One long realization
24
Please don’t touch
25
Conclusion
Chapter 2

Variable Fonts Workshop [RISD Fall 2024]

Tutorials on importing, animating, and interacting with variable fonts, featuring fonts by Too Much Type!

Open chapter
1
Importing variable fonts
2
Using variable fonts
3
Variable font weight
4
Animating variable fonts
5
Interacting with variable fonts
6
Toggling variable states
7
Targeting elements using “this”
8
Manually setting values
9
Using CSS variables for variable axis values
10
Swapping out content
11
Setting values using sliders
12
Randomizing variable axis values
13
Repeatedly randomizing variable axis values
14
Tracking variable axis values
15
Tracking the cursor position
16
Tracking the scroll position
17
Randomizing individual letters
18
Animating individual letters
Chapter 3

Motion Design for the Web [Boston University Fall 2024]

An introduction to animating using HTML and CSS!

Open chapter
1
Introduction
2
What you need to know
3
Styling text
4
Animating text
5
Bringing text to life
6
A story of a square
7
The humble button
8
How does that make you feel?
9
The end (for now!)
Chapter 4

Introduction to JavaScript [RISD Wintersession 2024]

An introduction to coding in JavaScript!

Open chapter
1
onclick, alert(), strings, numbers
2
<script>, functions, variables
3
inspect panel, console.log()
4
Booleans, if/else statements, arrays, .length
5
Exercise: a short story
6
Math.random()
7
document.querySelector(), .innerText, .style, .classList
8
Exercise: a bit of generative art
9
document.querySelectorAll(), setInterval(), template strings
10
Exercise: a bit more generative art
11
while loops, for loops, .innerHTML
12
Exercise: let the computer code the page

đź”   Type+Code v2

What is code? What can we use it for? This book is an introduction to coding through the lens of web programming. We’ll cover object-oriented programming using JavaScript, and use HTML and CSS to create visual and interactive outputs.

Chapter 1

The Basics

Covering the fundamentals of HTML and CSS!

Open chapter
1
What is HTML?
2
HTML Elements
3
What is CSS?
4
CSS Classes
5
CSS In-use
6
Inheritence
7
Box Model
8
Putting It All Together
9
Practice
Chapter 2

Making Things Fun

Taking what we learned so far to make some neat websites!!

Open chapter
1
Links
2
Links Worth Pressing
3
Building Your Foundry
Chapter 3

Testing Your Knowledge

Open chapter
1
Challenge 1: Card
2
Challenge 2: Navbar
3
Challenge 3: Linking to Sections
4
Challenge 4: Header
5
Challenge 5: Portfolio Grid
6
Bonus Challenge: Splash Screen
7
Challenge 1 Answer
8
Challenge 2 Answer
9
Challenge 3 Answer
10
Challenge 4 Answer
11
Challenge 5 Answer
12
Bonus Challenge Answer
Chapter 4

JavaScript!

Open chapter
1
Getting Started
2
Changing Things
3
Functions
4
Randomization
5
Sliders
6
Variable Font Sliders
7
Changing Classes
8
Tell a Story
Chapter 5

JavaScript Challenges!

Open chapter
1
Overview
2
Changing Styles
3
Changing Styles Solution
4
Changing Content
5
Changing Content Solution
6
Toggling Visibility
7
Toggling Visibility Solution
8
Keeping Track of Numbers
9
Keeping Track of Numbers Solution
10
Cycling Through Content
11
Cycling Through Content Solution
12
INFO: How to generate a random number
13
Randomizing Styles
14
Randomizing Styles Solution
15
INFO: How to get a random entry from an array
16
Random Content
17
Random Content Solution
18
Random Content Bonus Solution
19
Sliders
20
Sliders Solution
21
CSS Variables
22
Variable Axis Sliders
23
Variable Axis Sliders Solution
24
Randomizing Variable Axis Values
25
Randomizing Variable Axis Values Solution
Chapter 6

Snippets

Use this code for your type specimens!

Open chapter
1
CSS Variables
2
Marquees
3
Importing variable fonts
4
Using variable fonts
5
Variable font weight
6
Animating variable fonts
7
Interacting with variable fonts
8
Toggling variable states
9
Targeting elements using “this”
10
Manually setting values
11
Using CSS variables for variable axis values
12
Swapping out content
13
Setting values using sliders
14
Randomizing variable axis values
15
Repeatedly randomizing variable axis values
16
Tracking variable axis values
17
Tracking the cursor position
18
Tracking the scroll position
19
Randomizing individual letters
20
Animating individual letters

🤖  Introduction to Computation v1

What is code? What can we use it for? This book is an introduction to coding through the lens of web programming. We’ll cover object-oriented programming using JavaScript, and use HTML and CSS to create visual and interactive outputs.

Chapter 1

What is code?

Let’s get started by playing around with HTML and CSS!

Open chapter
1
Introduction
2
Splitting things up
3
Making it pretty
4
Programmatic poetry
5
Brought to life
6
Every click, a story
7
What’s next?
Chapter 2

The basics

Introducing the basics of JavaScript: variables, data types, operators, conditionals, and functions.

Open chapter
1
Recap
2
HTML template
3
Testing code
4
Variables
5
Data types
6
Operators
7
Conditionals
8
Functions
9
Side effects
10
Scope
11
Homework template
Chapter 3

Answers to Technical 1

Try to answer these questions on your own first! You can access the assignment here.

Open chapter
1
Question 1
2
Question 2
3
Question 3
4
Question 4
5
Question 5
6
Question 6
7
Bonus Question
Chapter 4

On a loop

How can we use code to do a whole bunch of things at once? With loops!

Open chapter
1
Warm Up: Poem generator
2
Running functions
3
Visualizing results
4
Repeating code with loops
5
Try It Out: “while” loops
6
Try It Out: “while” loops solution
7
Building an interface
8
Different kinds of loops
9
Try It Out: “for” loops
10
Try It Out: “for” loops solution
11
Looping through arrays
12
Looping through arrays
13
Helper functions
14
Getting random values
15
Try It Out: Random numbers
16
Try It Out: Random numbers solution
17
Weekly Challenge: Funky dice
18
Weekly Challenge: Funky dice solution
Chapter 5

Technical 2

Topics: random numbers, input elements, accessing data from arrays, for/while loops.

Open chapter
1
Question 1
2
Question 2
3
Question 3
4
Question 4
5
Bonus Question
Chapter 6

Technical 2 Answers

Topics: random numbers, input elements, accessing data from arrays, for/while loops.

Open chapter
1
Question 1
2
Question 2
3
Question 3
4
Question 4
5
Bonus Question
Chapter 7

Constructing data

We can store, access, and modify data (relatively) easily using arrays and objects.

Open chapter
1
The “select” element
2
Template literals
3
Modifying arrays
4
Playing with arrays
5
Modifying strings
6
Getting data from objects
7
Modifying objects
8
Weekly Challenge 1
9
Weekly Challenge 1 Solution
10
Weekly Challenge 2
11
Weekly Challenge 2 Solution
12
Weekly Challenge 3
13
Weekly Challenge 3 Solution
Chapter 8

Fun with CSS

Let’s make self-portraits!

Open chapter
1
CSS Self-portraits
Chapter 9

Reponsive design using flexbox and grid

A real mess of a week.

Open chapter
1
1990s web design
2
2000s web design
3
flexducks1
4
flexducks2
5
flexducks3
6
flexducks4
7
flexducks5
8
flexducks6
9
flexducks7
10
flexducks-payoff
11
gridcats1
12
gridcats2
13
gridcats3
14
gridcats4
15
gridcats5
16
gridcats-payoff
17
discodogs1
18
discodogs2
19
discodogs3
20
discodogs-payoff
21
portfolio
22
2010s web design exhibit A
23
2010s web design exhibit B
24
2010s web design exhibit C
25
2010s web design exhibit D
Chapter 10

Design Process

How can you use what we’ve learned so far to create something new?

Open chapter
1
Blank slate
2
Filling space
3
Applying styles
4
Making it move
5
Adding interaction
6
Randomizing styles
7
Repeating randomization
8
Typesetting content
9
Typographic hierarchy
10
Typographic hierarchy, flipped
11
Typographic hierarchy, skewed
12
Typographic hierarchy, blurred
13
Typographic hierarchy, randomized
14
Starting from nothing
15
Adding shapes
16
Incorporating new concepts
17
Incorporating new concepts, but fancier
18
Switching to an interactive experience
19
Adding sound
20
Adding sound, randomized
21
Incorporating sound into another design
22
Challenge
23
Variable fonts
24
Variable fonts and JavaScript
Chapter 11

Objects (recap) and APIs

How can we handle data using JavaScript?

Open chapter
1
Inputs (recap)
2
Building an interface
3
Objects (recap)
4
Tracking settings using objects
5
The Document Object Model (DOM)
6
APIs
7
Putting it all together
Chapter 12

Wrapping up

One last demo for fun!

Open chapter
1
No Replica