HTML playground

Write HTML, CSS & JavaScript and see it live

Type your page on the left and watch it appear on the right — nothing to install. Stuck on a word or a tag? Ask the free AI assistant below and it explains the concept in the simplest way possible.

Prefer Python? Open the Python playground or read the course notes.

index.html

Everything runs privately in your browser — your code is never uploaded unless you ask the assistant about it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first page</title>
    <style>
      body { font-family: system-ui, sans-serif; padding: 24px; background: #0b1020; color: #e6edf7; }
      h1 { color: #4ee6d0; }
      button { padding: 8px 14px; border-radius: 8px; border: 0; cursor: pointer; }
    </style>
  </head>
  <body>
    <h1>Hello, I am learning HTML</h1>
    <p>This paragraph is written with the &lt;p&gt; tag.</p>
    <button onclick="say()">Click me</button>
    <p id="out"></p>

    <script>
      function say() {
        document.getElementById('out').textContent = 'JavaScript is working!';
      }
    </script>
  </body>
</html>

Live preview

This is exactly how a browser reads your page.

Your saved code

Create a free account to save your code. You can still clear the screen and keep coding as a guest.

Try an example

Load a ready-made page, run it, then change it and see what happens.

AI assistant — explain anything simply

Ask about HTML, CSS, JavaScript, Python, maths, physics, chemistry, English or engineering. Your editor code is sent along so answers match what you are building.