No experience needed. By the end of this page you'll understand how websites are built, and you'll edit real, working code with your own hands.
<!-- this is a real webpage -->
<h1>Hello, I'm learning to code!</h1>
↑ this line right here is what that code produces. Scroll down and you'll be writing lines just like it.
This is lesson 1 of a 2-part beginner path. Here's the full time commitment, broken down.
Reading & concepts ~8 min · guided build ~7 min · playground activity ~5 min
Installing WordPress locally, and building your first page, post, and menu
No need to finish in one sitting. Your playground progress on this page is saved automatically in your browser, so you can leave and pick up right where you stopped.
Think of building a website like building a person: a skeleton to hold everything up, skin and clothes to make it look good, and muscles to make it move.
The skeleton. It tells the browser what each piece of content is: a heading, a paragraph, an image, a link.
THE STRUCTUREThe skin and clothes. It controls colors, fonts, spacing, and layout, basically how everything looks.
THE STYLEThe muscles. It reacts to clicks, scrolling, and typing, and makes the page do things.
THE BEHAVIORFollow along on your own computer. Open Notepad (Windows) or TextEdit in plain-text mode (Mac), and type each step below in order.
Every HTML page starts with this basic shape. Type this first.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
</body>
</html>
Everything visitors actually see goes between <body> and </body>. Add a heading and a paragraph.
<body> <h1>Welcome to my website!</h1> <p>This is my very first webpage. I built it myself!</p> </body>
Add a <style> block inside <head> to control colors and fonts.
<style>
body { font-family: Arial; text-align: center; background: #f1f5f9; }
h1 { color: #2563eb; }
</style>
Add a button and a <script> block so the page can respond to clicks.
<button onclick="sayHi()">Click me</button>
<script>
function sayHi() {
alert("You just ran your first JavaScript!");
}
</script>
Edit the code below and watch the result update instantly on the right. Nothing you do here can break anything, so experiment freely.
In the next tutorial, we'll use WordPress, the tool behind over 40% of websites on the internet, to build a full website with pages, images, and a blog. No coding required to start, and everything you learned today will make you even better at it.
