Tutorial
Get started with DEMOLAND! Learn how to use this website and what HTML, CSS, and JavaScript are.
Chapter 1
How to use DEMOLAND
Get started with DEMOLAND and learn how to code websites!
Open chapterCredits
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 the Parsons DEMOLAND site!
DEMOLAND is an open source website template that allows you to distribute editable code demos (HTML, CSS, JavaScript) entirely within your web browser. By GD with GD!
Core 2 Interaction (Spring 2025)
Weekly demos for Parson’s Core 2 Interaction lecture series during the Spring 2025 semester.
Chapter 3
Week 3 (2/7/25)
Exploring how designers consider structure, visual style, motion, and accessibility in the design of a single component in a design system.
Open chapter
Chapter 4
Week 6 (2/28/25)
We'll dive into the fundamental concept of a box as a container to hold text and other elements.
Open chapter
Chapter 5
Week 7 (3/7/25)
We'll dive into some parallel examples showing the same layout using different techniques.
Open chapter
Chapter 6
Week 8 (3/21/25)
We'll dive into all of the ways you can position an element.
Open chapter
Chapter 7
Week 9 (3/28/25)
We'll be creating microinteractions with the help of CSS transforms, transitions, and animations.
Open chapter
Chapter 9
Week 11 (4/11/25)
Introducing JavaScript, a way of dynamically altering a page’s content and style.
Open chapter1
A Normal Website
2
Sneak Peek: Toggling Classes
3
Sneak Peek: Randomizing CSS
4
Sneak Peek: Adding HTML
5
Sneak Peek: Repeating Code
6
Sneak Peek: Generative Art
7
Variables
8
Operators
9
Functions
10
Conditionals
11
Targeting Elements and Adding Event Listeners
12
Modifying CSS
13
Modifying CSS, Dynamically
14
Toggling Classes
15
Weekly Challenge
1
Last Week’s Challenge
2
Common Bugs: Naming Variables
3
Common Bugs: Quotes
4
Common Bugs: Brackets
5
Recap: Variables, Operators, Conditionals, and Events
6
Changing Content
7
Arrays
8
Arrays: Navigating Entries
9
Arrays: Edge Cases
10
Common Bugs: Scope
11
Arrays: Moving Backwards
12
Arrays: Putting It Together
13
Arrays: Other Kinds of Data
14
Randomization
15
Randomization: Within a Range
16
Randomization: Applied to CSS
17
Randomization: Random Entry in an Array
18
Weekly Challenge
Core 2 Interaction (Spring 2026)
Weekly demos for Parson’s Core 2 Interaction lecture series during the Spring 2026 semester.
Chapter 3
Week 3 (2/6/26)
An introduction in applying CSS to define interaction, accessibility, and responsiveness for a single component in a design system.
Open chapter
Chapter 4
Week 6 (2/27/26)
An introduction to element placement on the webpage through document flow (or CSS flow layout), the display property, and the position property.
Open chapter