HTML, CSS & JavaScript Playground and Error Checker

Build a webpage in one minute

The included page shows My First Webpage, a welcome message, and a button. CSS turns those plain parts into a centred white card. JavaScript makes the button replace the welcome message with The JavaScript worked!

That three-part description is simplified, but it is a useful first model. The same sample carries the rest of the beginner path, so you will not have to decode a new project in every section.

Load the example and see it work

1. Select Load example. The three editors fill with code, and the HTML/CSS preview appears without running JavaScript.
2. Look at the preview. You should see My First Webpage, the welcome message, and a Change message button.
3. Select Preview HTML & CSS. Press the page’s button. Nothing changes yet because the JavaScript editor was not executed.
4. Select Run all code. Press Change message inside the fresh preview.

The message should now read The JavaScript worked! You have already used the central workflow: preview structure and appearance, then run behaviour deliberately.

HTML makes the page structure

This is the exact HTML loaded by the example:

<main class="card">
  <h1>My First Webpage</h1>
  <p id="message">Welcome to my page.</p>
  <button id="change-message" type="button">Change message</button>
</main>

Element

<h1>My First Webpage</h1> is a heading element.

Opening and closing tags

<p> starts the paragraph; </p> ends it. The words between them are its text.

Class

class="card" gives CSS a reusable name for the outer main element.

ID

id="message" and id="change-message" give JavaScript exact elements to find. Each ID should be unique.

Button type

type="button" states that this button is an ordinary button rather than an accidental form submit control.

The normal HTML editor is for markup that belongs inside a page’s body. Put styles in CSS and scripts in JavaScript; Foxger reports and removes <style> and<script> elements from preview HTML. Complete-document import can wait until the advanced path.

CSS changes what the page looks like

The example’s CSS centres the card, adds spacing, and sets its colours:

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background: #f3f4f6;
}

.card {
  width: min(90%, 32rem);
  padding: 2rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 1rem 2rem rgb(0 0 0 / 10%);
  text-align: center;
}

button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

Focus on one line first:

background: #f3f4f6;

body

The selector chooses the page body.

background

The property names what will change.

#f3f4f6

The value supplies the light-grey colour.

The complete line

A property and value form a declaration. The colon separates them, and the semicolon ends the declaration.

Braces

The opening and closing braces hold the declarations for one rule.

Before trying it, predict the result of changing #f3f4f6 tolightblue. Only the area behind the card should change. Make the edit, then use Preview HTML & CSS if automatic preview is off.

JavaScript makes the button do something

This is the exact JavaScript loaded by the example:

const button = document.querySelector("#change-message");
const message = document.querySelector("#message");

button.addEventListener("click", () => {
  message.textContent = "The JavaScript worked!";
});

const creates the variables named button and message. An event is something that happens, such as a click. You do not need deeper DOM terminology to use this pattern yet: find → listen → change.

JavaScript does not run automatically after an edit. Foxger marks the script as changed and waits for Run all code, giving you a chance to review it before execution.

Problems versus Console

The deliberate missing parenthesis appeared in Problems before the script ran. That context makes the two panels easier to separate.

Problems can be filtered by language and by Error, Warning, or Information. Errors come first, followed by warnings and information, then language and source position. Foxger keeps the combined list to at most 500 visible diagnostics and explains when more are hidden.

Clear console removes its visible entries; Copy console output copies their bounded text. The Console is a report, not a command prompt.

Syntax, runtime, and logic mistakes

const button =
  document.querySelector("#change-message";

const missing =
  document.querySelector("#missing");
missing.textContent = "Hello";

message.textContent = "Welcome to my page.";

Static syntax mistakes are often detectable. Runtime failures can be captured only when the code runs. A logic mistake can produce no error at all because Foxger does not know what you intended.

Read the line and column after you have a problem

A line is the numbered row. A column is the approximate character position on that row. Select a Problem to open its editor, move the cursor near that location, and scroll it into view. Runtime locations can be less exact because Foxger builds a temporary preview document and labels user code foxger-user-code.js.

Preview HTML & CSS versus Run all code

Automatic HTML and CSS preview is enabled by default and refreshes after a short pause. It still omits the script: JavaScript does not run automatically. After a JavaScript edit, read the preview status. Foxger marks the displayed behaviour as stale until you choose Run all code again.

What Foxger checks—and why broken code may still appear

Why Preview and Problems can disagree

• HTML: browsers repair some incomplete markup into a usable document.
• CSS: browsers can ignore an invalid declaration and keep the rest of a rule or stylesheet.
• JavaScript: valid syntax can still fail at runtime or do the wrong thing.

A visible page is useful evidence, not proof of correctness. Check the source, run the behaviour, read Console, and compare the result with your intention.

Arrange and edit code when you need more room

Import a complete HTML document after learning the editors

The normal starting point is three separate editors. If you already have a complete HTML document, open Paste a complete HTML document, paste it, and select Import into editors.

• Foxger uses the browser’s disconnected template parser when available and extracts page/body markup.
• Inline <style> blocks are combined in source order and prepared for the CSS editor.
• Ordinary inline classic scripts are combined in source order. Module scripts are imported in module mode when no classic script is present.
• If classic and module scripts are mixed, Foxger keeps the classic scripts, skips the modules, and warns instead of merging them silently.
• External scripts and stylesheets, JSON/JSON-LD, import maps, and unsupported script types are skipped and reported.
• Restricted HTML and CSS resources are removed. Import never executes JavaScript automatically.

Import is local, conservative, and not a lossless round trip. Review every warning and all three editors before deciding whether to run the result. The complete-document limit is 300,000 characters; an oversized paste remains in the import box without replacing the editors.

Download the combined page

Download HTML creates foxger-web-playground.html with the MIME typetext/html;charset=utf-8. Foxger prepares the current HTML and CSS with the same resource-removal rules, then places HTML, CSS, and JavaScript into one fixed encoded bootstrap. Copy combined HTML creates the same document text on the clipboard.

When you open the file, its JavaScript runs as part of a normal local page—not inside Foxger’s opaque-origin iframe sandbox. The generated file still includes its restrictive CSP plus link and form protections, but it does not gain missing packages or remote dependencies. Review the code before opening, sharing, or adapting it.

What the restricted preview can—and cannot—do

The practical safety explanation

• The preview runs in a separate restricted iframe with an opaque origin.
• It cannot read Foxger’s parent DOM, cookies, stored theme preference, or parent JavaScript objects through same-origin access.
• Ordinary external requests and remote resources are blocked or removed during normal preview use.
• Links cannot navigate the Foxger parent page, and forms cannot submit normally.
• Run only code you understand or trust. An endless synchronous loop can still freeze the tab.

What external-resource blocking means

Version one intentionally does not support ordinary remote scripts, stylesheets, fonts, images, frames, API/fetch requests, WebSockets, workers, or npm packages. If an online tutorial tells you to paste a CDN link, that part may not work here. This is a deliberate preview boundary, not a broken CDN.

Data and Blob image or media resources, data fonts, and local fragment references may work where the CSP allows them, but the Playground has no file upload. Do not add workarounds that weaken the preview boundary.

Size limits

Each editor warns above 50,000 characters and stops language analysis and preview execution above 100,000. Run, combined copy, and download also stop when the three editors exceed 300,000 characters in total. Foxger does not silently truncate the editor code.

Troubleshooting the Playground

Compact beginner glossary

HTML

The markup language that describes webpage content and structure.

CSS

The style-sheet language that controls presentation and layout.

JavaScript

The programming language used here to add behaviour and interaction.

Element

One part of an HTML page, such as a heading, paragraph, or button.

Tag

The angle-bracket text that begins or ends many HTML elements, such as <p> and </p>.

Attribute

Extra information in an opening tag, such as id="message".

Class

A reusable HTML name that CSS or JavaScript can use to find a group of elements.

ID

An HTML name intended to identify one element on the page.

Selector

A pattern used to find elements, such as .card or #message.

Property

The named part of a CSS declaration, or a named value on a JavaScript object.

Variable

A JavaScript name that refers to a value, such as the selected button.

Event

Something that happens in the page, such as a button click.

DOM

The browser’s structured representation of a webpage, which JavaScript can read and change.

Syntax

The rules for arranging code so a language parser can understand it.

Syntax error

Code that cannot be parsed because its structure breaks a language rule.

Runtime error

A failure that happens after JavaScript starts executing.

Logic error

Code that runs but produces a result different from the intended one.

Problems panel

Foxger’s list of static findings and captured runtime failures, with source locations when available.

Console

The panel that shows messages and failures from the running preview.

Preview

A temporary rendering of the current code in Foxger.

Sandbox

Browser restrictions that remove permissions from the preview; it is not a separate virtual machine.

Practice: make a Science Club card

Load the example, then make only these three changes:

1. Change the heading to Science Club.
2. Change the page background to light blue.
3. Make the button change the message to Welcome to the club!.

Select Check code, Preview HTML & CSS, and Run all code. Press the button and compare the result with all three requests before opening the solution.

<h1>Science Club</h1>

background: lightblue;

message.textContent = "Welcome to the club!";

Final checklist

• My HTML describes the intended content.
• My CSS changes the intended appearance.
• My JavaScript adds the intended behaviour.
• I checked Problems and understood any remaining warnings.
• I ran JavaScript deliberately and checked Console afterward.
• I know that no errors does not prove correct logic or complete accessibility.
• I know ordinary external resources are restricted.
• I tested the visible result, not only the source.
• I reviewed the downloaded page before using it outside Foxger.