<div class="dream"> code it. build it. </div>
const create = () => imagination + code;
.zen { color: #ff6baa; creativity: infinite; }
ZEN IS โ†’

Welcome to
Zen's World.

Code is just instructions โ€” and you already know how to give instructions. Zen will show you how to turn your ideas into real things on a screen.

Creative Thinking Digital Design Coding Basics
Start Lesson 1 โ€” Free โ†“
Zen
1
What is Code?
๐Ÿ”’
Your First Tag
๐Ÿ”’
Colors & Style
๐Ÿ”’
Build Your Page
Lesson 01 ยท Free

What is Code?

Before you can build anything, you need to understand what you're actually doing. Spoiler: it's simpler than you think.

๐Ÿ“–
Read ยท 2 min

"Hey, I'm Zen. I build things with code โ€” websites, animations, digital art. Before I learned how, I had one question: what even IS this stuff?"

Code is just a set of instructions. That's it. When you tell your little sibling to make a sandwich โ€” get bread, add peanut butter, put it together โ€” that's basically code. You're giving step-by-step instructions to make something happen.

Computers are the same. They just follow instructions really, really fast. The language we use to write those instructions for websites is called HTML โ€” and it's made of something called tags.

Tags are like labels. You wrap them around things to tell the browser what they are. A heading. A paragraph. An image. Once the browser knows what something is, it knows how to show it.

โšก
See It Live ยท Interactive

Watch how a tag turns plain text into a real webpage element. Hit Run when you're ready.

/* This is HTML โ€” it tells the browser what things are */
<h1>Hello, I'm Zen.</h1>
<p>I build things with code.</p>
<p>What will YOU build?</p>
Hello, I'm Zen. I build things with code.
What will YOU build?
๐ŸŽฏ
Try It ยท Drag to Sort

Zen is building her first webpage. Put these steps in the right order โ€” from first to last. Drag them into place!

โ ฟ ? Add tags to tell the browser what each part is
โ ฟ ? Have an idea for what to build
โ ฟ ? Open your browser and see it appear
โ ฟ ? Write your content โ€” words, titles, sentences
โœฆ
Reflect ยท Your Turn

Zen always starts with a vision. If you could build one thing on the internet โ€” anything at all โ€” what would it be? Don't worry about how. Just dream it.

Members Only โ€” Unlock All Lessons
Lesson 02
Your First HTML Tag
Write real HTML. Make a heading, a paragraph, and a link โ€” and see them appear live.
Start Lesson 2 โ†’
Lesson 03
Colors & Style with CSS
Change colors, fonts, and sizes. Make your page look exactly how you imagine it.
Start Lesson 3 โ†’
Lesson 04
Build Your Own Page
Put it all together. Build a real webpage about something you love โ€” from scratch.
Start Lesson 4 โ†’

Zen has 4 full lessons, project challenges, and a bonus creative lab waiting for you. Join the crew to unlock everything.

You're in the crew. All of Zen's lessons are unlocked โ€” keep building.