A hands-on guide to HTML, CSS & JavaScript — with AI as your coding partner. Go from zero to a live website, step by step.
HTML (HyperText Markup Language) is the foundation of every website you've ever visited. It defines the structure and content — headings, paragraphs, images, links, buttons, and more — using tags.
Tags are written with angle brackets. Most come in pairs: an opening tag and a closing tag (with a slash). Everything between them is the content.
<h1>This is a big heading</h1> <p>This is a paragraph of text.</p> <a href="https://google.com">Click me</a> <img src="photo.jpg" alt="A photo">
Every HTML file starts with a standard structure. Think of it as the "wrapper" that tells the browser what to expect.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Page</title> <!-- CSS goes here or in a linked file --> </head> <body> <h1>Hello, World!</h1> <p>This is my first website.</p> </body> </html>
<h1>–<h6> for headings, <p> for paragraphs, <strong> for bold, <em> for italic.
<a href=""> for links, <img src=""> for images, <video> for video embeds.
<div> is a general container. <section>, <header>, <footer>, <nav> are semantic tags.
<ul>/<ol> for bullet/numbered lists with <li> items. <table> for tabular data.
<form>, <input>, <button>, <textarea>, <select> for interactive forms.
Tags can have attributes: id, class, style, href, src, alt. They go inside the opening tag.
Use VS Code as your code editor. Open your .html file in a browser by right-clicking → "Open with Live Server" (install the Live Server extension). Every save instantly refreshes the page!
CSS (Cascading Style Sheets) is what makes websites look good. You use it to control colors, fonts, spacing, layouts, animations, and responsiveness — all without changing your HTML.
Create a style.css file and link it inside the <head> of your HTML. Or write CSS directly inside a <style> tag.
<!-- In your HTML <head> --> <link rel="stylesheet" href="style.css">
A CSS rule has a selector (what to style) and declarations (how to style it). Selectors can target tags, .classes, or #ids.
/* Target all <h1> tags */ h1 { color: #e96b4a; font-size: 2rem; font-weight: bold; } /* Target elements with class="card" */ .card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } /* Target by ID */ #navbar { position: sticky; top: 0; }
Every element in CSS is a box. Understanding the box model is key to controlling layout and spacing.
.box { width: 300px; padding: 20px; /* space INSIDE the border */ border: 2px solid #333; margin: 16px; /* space OUTSIDE the border */ }
Flexbox makes it trivial to align items horizontally or vertically, distribute space, and build responsive layouts.
.container { display: flex; justify-content: space-between; /* horizontal alignment */ align-items: center; /* vertical alignment */ gap: 1rem; /* space between children */ flex-wrap: wrap; /* wrap on small screens */ }
CSS Grid is perfect for building card layouts, dashboards, and any design that needs rows and columns simultaneously.
.grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 equal columns */ gap: 1.5rem; }
Media queries let you apply different CSS rules based on screen size — making your site look great on both desktop and mobile.
/* Default: desktop layout (3 columns) */ .grid { grid-template-columns: repeat(3, 1fr); } /* On screens smaller than 768px: stack vertically */ @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }
Explore CSS variables (--primary-color: #4affc4) to create a consistent theme across your whole site. Change one value, update everywhere!
JavaScript (JS) adds behaviour and interactivity to your pages. With JS you can respond to user clicks, fetch data from APIs, manipulate content dynamically, validate forms, build games, and much more.
<!-- Place at the end of <body> --> <script src="script.js"></script>
// Variables — use const when value won't change, let when it will let name = "Alice"; const age = 21; // Functions function greet(person) { alert(`Hello, ${person}!`); } // Selecting HTML elements & reacting to clicks const btn = document.querySelector("#myButton"); btn.addEventListener("click", () => { document.querySelector("#output").textContent = "You clicked!"; });
The DOM (Document Object Model) is the browser's live representation of your HTML. JS can read and rewrite it on the fly.
// Read a value from an input const input = document.querySelector("#nameInput").value; // Change text content document.querySelector("h1").textContent = "New heading!"; // Add / remove CSS classes document.querySelector(".card").classList.add("active"); document.querySelector(".card").classList.toggle("hidden"); // Create new elements dynamically const li = document.createElement("li"); li.textContent = "New item"; document.querySelector("ul").appendChild(li);
Use the fetch() function to load data from the internet (e.g. weather, jokes, crypto prices) and display it on your page.
fetch("https://api.adviceslip.com/advice") .then(res => res.json()) .then(data => { document.querySelector("#advice").textContent = data.slip.advice; }) .catch(err => console.error("Something went wrong:", err));
// Conditionals if (score >= 90) { console.log("Excellent!"); } else if (score >= 60) { console.log("Passed."); } else { console.log("Keep trying!"); } // Loops — iterate over an array const fruits = ["apple", "mango", "banana"]; fruits.forEach(fruit => { console.log(fruit); });
Always put your <script> tag at the end of the body, not in the <head> — otherwise JS will try to find HTML elements that don't exist yet and throw an error.
Modern developers use AI tools like Claude, ChatGPT, GitHub Copilot, and Cursor to write code faster, debug errors, and learn new concepts. Learning to prompt well is a skill in itself — and it will make you dramatically more productive.
Describe exactly what you want: the technology, the output format, and any constraints. Vague prompts lead to vague code.
Paste your existing code. Tell the AI what the code is supposed to do and what's going wrong.
Treat it as a conversation. Ask follow-up questions, request changes, or ask the AI to explain what it did.
Don't just copy-paste. Read the code, ask the AI to explain each part, and make sure you understand it.
"Create a responsive [component name] using [HTML/CSS/JS]. It should [describe behaviour]. Style it with a [dark/minimal/colourful] theme. Do not use any frameworks or libraries."
"I'm building a [type of project]. Here is my current HTML: [paste code]. Add a JavaScript function that [describe the feature] when the user [clicks/types/hovers]."
"Make this CSS layout fully responsive for mobile screens. The desktop layout has 3 columns — on mobile it should stack vertically. Here is the code: [paste code]."
"My JavaScript is throwing this error: [paste error message]. Here is the relevant code: [paste code]. What is causing it and how do I fix it?"
"My CSS isn't working as expected. I want [describe expected layout] but instead I'm getting [describe what's happening]. Here is my CSS: [paste code]."
Always ask the AI to explain the code it generates before using it. Try: "Can you explain this code line by line so I can learn from it?" This turns every AI session into a learning opportunity — not just a copy-paste shortcut.
Excellent for explaining concepts, writing clean code, and reviewing/debugging. Can render live HTML preview artifacts.
Inline AI code completion directly in VS Code. Suggests code as you type based on your current file context.
An AI-native code editor built on VS Code. Chat with your codebase, auto-fix bugs, and generate whole features.
Describe a UI in plain English and get production-ready HTML/React components instantly. Great for UI prototyping.
GitHub Pages lets you host any static website (HTML, CSS, JS) for completely free — forever. Your site gets a public URL like yourusername.github.io/project-name. Here's how:
my-portfolio). Set it to Public. Click "Create repository".
index.html, style.css, script.js and any images. Click "Commit changes".
main branch and click Save.
Your main file must be named index.html — that's the file GitHub Pages serves by default. Any other filename won't load automatically when someone visits your URL.
Instead of drag-and-dropping files every time, learn the 3 Git commands you'll use 90% of the time:
# 1. Stage all your changed files git add . # 2. Save a snapshot with a descriptive message git commit -m "Add contact form section" # 3. Upload / push to GitHub git push
"I'm new to Git. I've made changes to my project files and want to push them to GitHub. Walk me through the exact commands to run in my terminal, step by step."
Apply what you've learned by building real projects. Each one develops a different set of skills. Complete them in order, or jump to what interests you most.
Build a static page about yourself — photo, bio, interests, and social links. Your first real HTML & CSS project.
Create a scene or character using only CSS — no images. Explore shapes, gradients, borders, and positioning creatively.
Design a stylish menu for a fictional restaurant. Practice grid layouts, typography, and card components.
Build a fully functional calculator — number input, operations, clear & equals. Your first real JavaScript DOM manipulation project.
Add, complete, and delete tasks. Store data in localStorage so tasks persist after a page refresh.
Fetch live weather data from the OpenWeatherMap API and display temperature, humidity, and conditions for any city.
Multiple-choice questions with score tracking, timers, and a results screen. Practice arrays, conditionals, and dynamic rendering.
Search any GitHub username and display their avatar, bio, repos, and follower count using the GitHub public API.
A polished, fully responsive multi-section portfolio with an animated hero, project showcase, skills section, and contact form. Your capstone piece.
Build a Spotify-style player with a track list, play/pause/skip controls, a progress bar, and album art using the Web Audio API.
Product image gallery, size selector, cart counter, and an "add to cart" system with a dynamic sidebar. Mimics real shopping UX.
Build Snake, Tetris, or a platform runner using HTML5 Canvas and the game loop pattern. Combines math, logic, and creative design.