Skip to main content
Interactive Code Playground·Lesson 1 of 3

HTML Playground

Use the three tabs to write HTML, CSS, and JavaScript. Click ▶ Run (or Ctrl+Enter) to update the preview on the right. All three work together — changes in any tab are included when you run.

HTML · CSS · JS
Ctrl+Enter
HTML
CSS
JS
Preview

How the Tabs Work

  • HTML tab — body content only (the playground wraps it in a full document)
  • CSS tab — injected into <head> as a <style> block; your rules override the defaults
  • JS tab — runs after the HTML is rendered; console.log() output appears below the preview when JS is present

Things to Try

  1. Switch to the CSS tab and change background: #f9f9f9 to background: #1a1a2e, then update text colors.
  2. Switch to the JS tab and add console.log('Hello from JS!') — a console panel appears below the preview.
  3. Delete the button click handler and write your own from scratch.