WebCraft — Learn to Build Websites

The Learning Path

4 Steps to Your First Website

No experience needed. Each step builds on the last. Take your time — there's no rush.

HTML — The Skeleton HTML

HTML is like the bones of your website. It tells the browser what content to show — headings, paragraphs, images, buttons. Think of it like building with LEGO blocks. Each block is a "tag".

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>

    <!-- This is a heading -->
    <h1>Hello, World! 👋</h1>

    <!-- This is a paragraph -->
    <p>Welcome to my website.</p>

    <!-- This is a button -->
    <button>Click Me!</button>

  </body>
</html>

WHAT EACH TAG DOES

<h1> = Big heading
<p> = Paragraph of text
<button> = Clickable button
<img> = Shows a picture
<a> = A clickable link

REMEMBER THIS 🧠

Most tags need an opening and a closing tag.
Open: <p> Close: </p>
The slash / means "end of tag".

Which tag makes a big heading on a webpage?

<p>

<h1>

<div>

CSS — The Skin & Style CSS

CSS is like the clothes and makeup for your website. HTML puts the content there — CSS makes it look amazing. Change colors, sizes, fonts, and add spacing.

style.css

/* Style the whole page */
body {
  background: #1a1a2e;   /* dark background */
  color: #e0e0e0;       /* light text */
  font-family: Arial, sans-serif;
}

/* Style the heading */
h1 {
  color: #4f9eff;       /* blue color */
  font-size: 48px;     /* big text */
  text-align: center; /* middle of page */
}

/* Style the button */
button {
  background: #4f9eff;
  color: white;
  padding: 12px 24px;  /* space inside button */
  border-radius: 8px; /* rounded corners */
  border: none;
  cursor: pointer;
}

CSS IS LIKE GIVING INSTRUCTIONS 📋

selector = WHO to style
property = WHAT to change
value = HOW to change it

              h1 {

                color: red;

              }

What does the CSS property font-size do?

Makes text bold

Changes text size

Changes text color

JavaScript — The Brain JS

JavaScript is the brain of your website. It makes things happen when you click, type, or scroll. Without JS, a website is just a static page — with it, it becomes an app!

script.js

// Change text when button is clicked
function sayHello() {
  // Find the heading on the page
  let heading = document.getElementById("myTitle");

  // Change what it says
  heading.textContent = "You clicked me! 🎉";

  // Change its color too
  heading.style.color = "#3ddc84";
}

// Run when page loads
console.log("Website is ready! 🚀");

// Change text every second
let count = 0;
setInterval(() => {
  count = count + 1;
  console.log("Seconds: " + count);
}, 1000);

⚡ LIVE DEMO — Try it!

Click the button! 👇

What does console.log("hello") do?

Shows a popup

Shows text on the webpage

Prints to browser DevTools

Deploy — Go Live! 🚀 DEPLOY

Now you make it live for the whole world! Deploying means putting your website on a server so anyone can visit it with a link. Best part? It's completely free to start.

🌐

GitHub Pages

Free. Upload your files to GitHub, click one button, done. Your site is live at yourname.github.io

⚡

Netlify

Free. Drag and drop your folder onto Netlify and it's instantly live. Super easy for beginners!

🔥

Vercel

Free. Great for beginners and pros alike. Connect GitHub and it auto-deploys every time you save!

🎉 You did it! Once you know HTML, CSS, and JavaScript — you can build anything. A portfolio, a game, a store, an app. The web is yours.

Your Tools

The Developer Keyboard

Hover over keys to learn what developers use them for

Esc

F10

F11

F12

Delete

Tab

[

]

Caps

;

Return

Shift

Ctrl

Alt

⌘

SPACE

⌘

Alt

←

↑↓

→

LEFT CLICKSelect • Click links • Press buttons

RIGHT CLICKOpen context menu • Inspect element

SCROLL WHEELScroll up/down the page

RIGHT CLICK → INSPECTSee the code behind any website! 🔍

Learn to Build
Websites Fast

4 Steps to Your First Website

The Developer Keyboard

Got Questions? Just Ask!

Learn to BuildWebsites Fast

4 Steps to Your First Website

The Developer Keyboard

Got Questions? Just Ask!

Learn to Build
Websites Fast