Sandbox — dolteddown.com

What is this?

A web page is just text in three flavors:

HTML — the words and structure (<h1>Title</h1>, <p>Paragraph</p>)
CSS — how it looks (colors, fonts, spacing). Lives inside <style> tags.
JavaScript — how it behaves when clicked or moved. Lives inside <script> tags.

How to use this sandbox

Type in the left pane. The right pane updates as you type.
Hit the Examples dropdown above to load a starter you can poke at.
Your work auto-saves to this browser — close the tab and come back, it'll still be here.
Press Ctrl+S to force a save (it's automatic anyway).

Try this first

Pick example #1 (Hello, world) from the dropdown. Read the comments — the bits between  in HTML and /* */ in CSS. They explain what each line does. Change a word, change a color, see what happens. You can't break anything.

Tags 101

Most HTML looks like <tag>stuff</tag>. The opening tag, your content, then a closing tag with a slash. Common ones:

<h1> through <h6> — headings, big to small
<p> — a paragraph of text
<a href="/somewhere">Link text</a> — a clickable link
<img src="cat.jpg"> — an image (no closing tag)
<div> — a generic box that holds other things

CSS 101

Inside a <style> tag, write selector { property: value; }:

h1 { color: red; } — all h1s become red
.fancy { font-size: 40px; } — anything with class="fancy" gets big
body { background: black; color: white; } — dark mode!

Ready for the real thing?

Once you can change a sandbox example and make it look how you want, you're ready to edit the actual home page of dolteddown.com.