W3Schools Online Code Editor
With W3Schools online code editor, you can edit HTML, CSS and JavaScript code, and view the result in your browser.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color:
black;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img src="avatar.png" alt="Avatar"
style="width:200px">
</body>
</html>
This is a Heading
This is a paragraph.
Click on the "Try it Yourself" button to see how it works.
Web Editor Explained
The window to the left is editable - edit the code and click on the "Run" button to view the result in the right window.
You can control the size of a window with the bar in between the windows (draggable gutter).
The icons are explained in the table below:
Icon | Description |
---|---|
Go to www.w3schools.com | |
Menu button for more options | |
Save your code (and share it with others) | |
Change orientation (horizontally or vertically) | |
Change color theme (dark or light) |
Learn to Code
If you are new to coding, we suggest that you start with HTML, and move on to CSS and JavaScript:
HTML Tutorial CSS Tutorial JavaScript Tutorial