Tutorial
Get started with DEMOLAND and learn how to code websites!
Start here
How to use DEMOLAND
Get started with DEMOLAND and learn how to code websites!
Open chapter ↗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.
2010s web design exhibit Cflexducks3Weekly Challenge: Funky dice solutionTesting codeModifying arraysgridcats1Question 41990s web designGetting data from objectsQuestion 32010s web design exhibit CQuestion 3ConditionalsVariablesHelper functionsWeekly Challenge: Funky diceMaking it prettyLooping through arraysdiscodogs2flexducks-payoffQuestion 1Weekly Challenge 2Modifying stringsQuestion 42010s web design exhibit DportfolioQuestion 4Homework templatediscodogs1Question 22010s web design exhibit BQuestion 1Question 2Bonus Questionflexducks-payoffLooping through arraysWeekly Challenge 3 SolutionStarter TemplateEvery click, a story1990s web designPlaying with arraysCSS Self-portraits2010s web design exhibit BSide effects2010s web design exhibit Aflexducks2Weekly Challenge: Funky diceTesting codeWarm Up: Poem generator2000s web designIntroductionWeekly Challenge 3 SolutionOperatorsdiscodogs3flexducks4Question 3Weekly Challenge 3HTML templateWhat is CSS?What’s next?Splitting things upData typesVariablesflexducks3discodogs1flexducks-payoffRepeating code with loopsQuestion 4Playing with arraysPlaying with arrays2010s web design exhibit BLooping through arrays2010s web design exhibit CQuestion 5Warm Up: Poem generatorThe “select” elementQuestion 4flexducks-payoffStarter TemplateCSS Self-portraitsCSS Self-portraitsGetting random valuesHomework templateWeekly Challenge 2VariablesTry It Out: “for” loopsQuestion 4Question 1gridcats-payoffgridcats3Question 3Bonus Questionflexducks1Question 4Playing with arraysStarter Templatediscodogs1Helper functionsMaking it pretty2010s web design exhibit A
2010s web design exhibit Cflexducks3Weekly Challenge: Funky dice solutionTesting codeModifying arraysgridcats1Question 41990s web designGetting data from objectsQuestion 32010s web design exhibit CQuestion 3ConditionalsVariablesHelper functionsWeekly Challenge: Funky diceMaking it prettyLooping through arraysdiscodogs2flexducks-payoffQuestion 1Weekly Challenge 2Modifying stringsQuestion 42010s web design exhibit DportfolioQuestion 4Homework templatediscodogs1Question 22010s web design exhibit BQuestion 1Question 2Bonus Questionflexducks-payoffLooping through arraysWeekly Challenge 3 SolutionStarter TemplateEvery click, a story1990s web designPlaying with arraysCSS Self-portraits2010s web design exhibit BSide effects2010s web design exhibit Aflexducks2Weekly Challenge: Funky diceTesting codeWarm Up: Poem generator2000s web designIntroductionWeekly Challenge 3 SolutionOperatorsdiscodogs3flexducks4Question 3Weekly Challenge 3HTML templateWhat is CSS?What’s next?Splitting things upData typesVariablesflexducks3discodogs1flexducks-payoffRepeating code with loopsQuestion 4Playing with arraysPlaying with arrays2010s web design exhibit BLooping through arrays2010s web design exhibit CQuestion 5Warm Up: Poem generatorThe “select” elementQuestion 4flexducks-payoffStarter TemplateCSS Self-portraitsCSS Self-portraitsGetting random valuesHomework templateWeekly Challenge 2VariablesTry It Out: “for” loopsQuestion 4Question 1gridcats-payoffgridcats3Question 3Bonus Questionflexducks1Question 4Playing with arraysStarter Templatediscodogs1Helper functionsMaking it pretty2010s web design exhibit A
2010s web design exhibit Cflexducks3Weekly Challenge: Funky dice solutionTesting codeModifying arraysgridcats1Question 41990s web designGetting data from objectsQuestion 32010s web design exhibit CQuestion 3ConditionalsVariablesHelper functionsWeekly Challenge: Funky diceMaking it prettyLooping through arraysdiscodogs2flexducks-payoffQuestion 1Weekly Challenge 2Modifying stringsQuestion 42010s web design exhibit DportfolioQuestion 4Homework templatediscodogs1Question 22010s web design exhibit BQuestion 1Question 2Bonus Questionflexducks-payoffLooping through arraysWeekly Challenge 3 SolutionStarter TemplateEvery click, a story1990s web designPlaying with arraysCSS Self-portraits2010s web design exhibit BSide effects2010s web design exhibit Aflexducks2Weekly Challenge: Funky diceTesting codeWarm Up: Poem generator2000s web designIntroductionWeekly Challenge 3 SolutionOperatorsdiscodogs3flexducks4Question 3Weekly Challenge 3HTML templateWhat is CSS?What’s next?Splitting things upData typesVariablesflexducks3discodogs1flexducks-payoffRepeating code with loopsQuestion 4Playing with arraysPlaying with arrays2010s web design exhibit BLooping through arrays2010s web design exhibit CQuestion 5Warm Up: Poem generatorThe “select” elementQuestion 4flexducks-payoffStarter TemplateCSS Self-portraitsCSS Self-portraitsGetting random valuesHomework templateWeekly Challenge 2VariablesTry It Out: “for” loopsQuestion 4Question 1gridcats-payoffgridcats3Question 3Bonus Questionflexducks1Question 4Playing with arraysStarter Templatediscodogs1Helper functionsMaking it pretty2010s web design exhibit A
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 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 ↗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
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 ↗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
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