Web Code Editor

Find & Replace

Find

Replace with

Ready

Code Library

Choose a template to get started instantly. Warning: This will overwrite your current files.

Project Files

Upload code (.html, .css, .js) to edit, or assets (images) to reference.
Maximum file size: 5MB.

Privacy Policy

The Ultimate Web Coding Guide

1. Getting Started: Files & Tabs

The Basics

Entry Point: Your project starts with index.html. This is the file that gets rendered in the preview.
Creating Files: Click the button to add new files. Name them with extensions like .css or .js (e.g., style.css).
Linking Files: To make them work, you must link them in your HTML:
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

2. Editor Tools & Shortcuts

Keyboard Shortcuts

Ctrl + Z : Undo changes
Ctrl + Y : Redo changes
Tab : Indent code (or use the toolbar button)

Toolbar Functions

Insert Tab: Adds a tab character at cursor.
Auto Align: Beautifies your messy code automatically.
Export: Downloads your entire project as a .zip file.

3. Working with Assets

Need images or external data? Use the File Manager .

Open the File Manager from the bottom toolbar.
Click/Tap the upload area to select an image or file from your device.
Once uploaded, reference it in your code using its exact filename:
<img src="my-image.png">

4. Debugging & Console

Errors: If your code crashes, the console bar at the bottom right will automatically expand and show the error message in red.
Logging: Use console.log('message') in your JS to print info to this panel.
Toggle: Click the "Console" header to minimize or maximize the panel.

5. HTML Tags Reference

Structure

<div> - Generic container used for grouping.
<div class="box">Content</div>
<p> - Paragraph of text.
<p>Hello World</p>
<h1> - Heading (h1 to h6).
<h1>Main Title</h1>

Interactive

<button> - Clickable button.
<button onclick="run()">Click</button>
<input> - User input field.
<input type="text" placeholder="...">
<img> - Displays an image.
<img src="pic.png" alt="Desc">

6. JavaScript Functions Reference

Common Actions

Finding Elements:

Use this to control HTML elements from JS.

const element = document.getElementById('my-id');

Changing Content:

Update text or HTML inside an element.

element.innerText = 'New Text';
element.innerHTML = '<b>Bold Text</b>';

Handling Clicks:

Run code when a user clicks something.

element.addEventListener('click', function() {
alert('Clicked!');
});

Changing Styles:

Modify CSS dynamically.

element.style.backgroundColor = 'red';
element.style.display = 'none'; // Hide

Title