DEMOLAND is an open source website template that allows you to distribute editable code demos (HTML, CSS, JavaScript) entirely within your web browser. This project was created by GD with GD to make teaching code easier, without the need for subscribing to any premium code distribution services.

DEMOLAND is a metaphor for a library containing books featuring chapters of demos. Each book is organized via JSON files, and each demo is split up into two HTML files (content and information). A Node.js file generates the homepage as a static document, while the code editor page fetches demos dynamically. The editor is built using CodeMirror 5.

Interested in launching your own DEMOLAND site? Clone the GitHub repository and launch your site via GitHub pages!

CREDITS
DEMOLAND was developed by GD with GD / Gabriel Drozdov. The site features Limkin by Too Much Type and Monaspace by GitHub. Text editors are built using CodeMirror 5. The original DEMOLAND site is available at demoland.gdwithgd.com.

If you launch your own DEMOLAND, I’d appreciate it if you left these credits in. And sent me an email just to share your work!

Welcome to DEMOLAND!

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.

Tutorial

Get started with DEMOLAND and learn how to code websites!

Introduction to Computation

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.

Week 1

What is code?

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

Open chapter  ↗
Week 2

The basics

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

Open chapter  ↗
Week 3

Answers to Technical 1

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

Open chapter  ↗
Week 3

On a loop

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

Open chapter  ↗
Week 4

Technical 2

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

Open chapter  ↗
Week 4

Technical 2 Answers

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

Open chapter  ↗
Week 4

Constructing data

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

Open chapter  ↗
Week 5

Fun with CSS

Let’s make self-portraits!

Open chapter  ↗