Start learning
Search the libraryStart learning

Search the library

What would you like to learn?

Type two or more characters to search.

You can also browse all tutorials or topics.

Practice in your browser

HTML, CSS, and JavaScript Playground

Write a small web page, run it in a protected preview, and inspect the result without installing anything.

  • Three focused code editors
  • A fresh sandbox for every run
  • Local drafts and share links

See how structure, presentation, and behavior work as three separate layers.

Read the related lesson

Run with Ctrl/⌘ + Enter. Auto-run is off by default.

Code

Write one layer at a time

HTML editor

Loading the code editor…

Tab moves to the next page control. Use Ctrl/⌘ + F to search inside the current file.

Preview

Inspect the result

Choose Run to create a fresh protected preview.

The editor is loading. Nothing has run yet.

Console

Messages and errors

  1. Console messages will appear here after you run the preview.

How to use the playground

Change one thing, then inspect what happened

Small experiments make it easier to connect a line of code with the result you see.

  1. Choose a starting point.Open a beginner example or begin with the blank page.
  2. Edit one file.Use HTML for structure, CSS for presentation, and JavaScript for behavior.
  3. Choose Run.A new protected preview is created from the current three files.
  4. Read the result.Inspect the preview and use the console to understand messages or errors.

What runs in the browser

Your code stays on this device

The editor, preview, console bridge, draft storage, and share-link encoding all run in your browser. Learn Basic Skills does not provide an application server that receives or executes playground code.

The first visit downloads the playground's local editor files from this site. Editing and running an example does not install packages or contact a code-execution service.

Safety and limitations

A protected preview, not a complete security boundary

Each run replaces the preview with a sandboxed frame. The frame cannot share the site's origin, submit forms, open popups, download files, navigate the top page, or make network connections under the playground policy.

Review unfamiliar code before running it. This playground is for small browser examples; it does not support npm packages, server code, build tools, modules fetched from the web, or long-running programs.

Keyboard guidance

The editor does not keep your Tab key

Press Tab to move to the next page control. Use Ctrl or Command with Enter to run. Use Ctrl or Command with F while editing to search the current file. Arrow keys move between the HTML, CSS, and JavaScript tabs when a file tab has focus.

Privacy and storage

Drafts stay in browser storage

Changes may be saved under a versioned local-storage key so you can continue later. Clearing this site's browser data removes that draft. A share link places compressed code in its URL hash; anyone who receives the link can read the code it contains.

Read the full privacy notice →

Learn before you experiment

Connect the code to a clear explanation

The playground is most useful when you understand the job of each language and change the examples deliberately.

If the editor cannot run, browse all tutorials or all projects instead.