Beginner Code Sandbox

Write HTML, CSS and JavaScript in one place and see the result immediately. This practice area runs entirely in your browser, so you can experiment, make mistakes and try again without setting up any software.

Try the starter page

Edit the starter code below, then choose Run Code. Your page will appear in the preview after the editor.

Result preview

How the sandbox works

  1. Read the starter code. HTML creates the page content, CSS controls its appearance, and JavaScript adds behavior.
  2. Make one small change. For example, replace “Hello, coder!” with your name or change the background color.
  3. Choose Run Code. The browser reads everything in the editor and displays the result in the preview frame.
  4. Compare and repeat. If the result is unexpected, check spelling, brackets and closing tags, then run it again.

Good to know: Clear removes both the editor code and preview. Restore Starter brings the original example back. Your changes are not permanently saved, so copy any code you want to keep before leaving the page.

What are HTML, CSS and JavaScript?

HTML describes the structure and meaning of a webpage. Elements such as <h1>, <p> and <button> create a heading, paragraph and button. Most elements use an opening tag and a matching closing tag.

CSS changes how those elements look. In the starter example, the rules inside <style> set colors, spacing, fonts and button styling. A selector such as body chooses an element, and declarations such as background: #eef6ff; define its appearance.

JavaScript makes the page respond to actions. The example button calls a function when it is clicked. That function finds the paragraph with id="message" and changes its text. Try changing only one part at a time so it is easy to see which language produced the result.

Five beginner exercises

  1. Personalize the heading: change the text inside the <h1> element and run the code.
  2. Choose new colors: replace #eef6ff with lightyellow, and replace the button background with seagreen.
  3. Add a subheading: below the <h1> element, add an <h2> element with a short introduction to your page.
  4. Create a second paragraph: add another <p> and write one thing you want to learn about web development.
  5. Change the click result: find the sentence inside the JavaScript function and replace it with your own message.

If a change does not work, look for missing quotation marks, semicolons or closing tags. Browser code is case-sensitive in many places: message and Message are not the same identifier.

Continue learning

Once you have completed the exercises, explore the HTML examples, CSS examples and JavaScript examples. Copy a small example into this sandbox, predict what it will do, and then test your prediction. This learn–edit–run cycle is one of the quickest ways to build confidence.

Use this tool only for code you understand and trust. Code entered here runs in your browser preview. Do not paste passwords, private information or unknown scripts into the editor.