The curriculum is split into 6 units, moving from beginner to intermediate. Each unit contains a lesson, curated videos, a quiz, and downloadable references. Follow them in order or jump to whichever unit covers what you're working on.
Suggested path: Start with Unit 1 and work sequentially — each unit builds on the last. Use the Lessons, Videos, Quizzes, and Downloads tabs to browse all resources of a given type, filtered by difficulty.
What is HTML?
HTML — HyperText Markup Language — is the standard language for creating web pages. It describes the structure of a page using a series of elements, which tell the browser how to display content. Think of HTML as the skeleton of a website: it determines what goes where, but doesn't directly control how things look (that's CSS's job).
The Document Structure
Every HTML document follows a standard structure. Here's the most basic version:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Page Title</title> </head> <body> <!-- Visible content goes here --> <h1>Hello, World!</h1> </body> </html>
Semantic HTML
Semantic elements clearly describe their meaning in a human-readable way. Instead of using <div> for everything, use elements that convey purpose:
<header>— introductory content or navigation<main>— the primary content of the page<section>— a standalone section of content<article>— self-contained content (like a blog post)<footer>— footer of a page or section<nav>— navigation links
Using semantic HTML improves accessibility, SEO, and makes your code much easier to read and maintain.
The Box Model Explained
Every HTML element is treated as a rectangular box in CSS. That box has four layers: content, padding, border, and margin. Understanding how these interact is fundamental to controlling layout.
.box { width: 300px; /* content width */ padding: 20px; /* space inside border */ border: 2px solid #ccc; margin: 16px; /* space outside border */ box-sizing: border-box; /* include padding in width */ }
box-sizing: border-box
By default, CSS adds padding and border to an element's declared width — so a 300px box with 20px padding is actually 340px wide. Setting box-sizing: border-box makes the browser include padding and border inside the declared width. Most developers apply this globally with *, *::before, *::after { box-sizing: border-box; }.
What is Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout model designed for one-dimensional layouts — either a row or a column. It makes it trivial to align, distribute, and order elements in a container, solving problems that were previously awkward with floats or positioning.
.container { display: flex; justify-content: space-between; /* main axis */ align-items: center; /* cross axis */ gap: 16px; flex-wrap: wrap; }
Key Properties
- justify-content — aligns items along the main axis (start, center, space-between, space-around)
- align-items — aligns items along the cross axis (flex-start, center, stretch)
- flex-wrap — allows items to wrap to the next line when they overflow
- flex: 1 on children — allows items to grow and fill available space equally
- flex-direction — sets the main axis (row or column)
What is JavaScript?
JavaScript is the programming language of the web. While HTML structures content and CSS styles it, JavaScript makes it interactive. From form validation to animated menus to fetching live data, JavaScript powers the dynamic behavior of virtually every modern website.
// Variables const name = "Alex"; let score = 0; // Function function greet(student) { return `Welcome, ${student}!`; } // Conditional if (score >= 60) { console.log("Passed!"); } else { console.log("Keep studying."); }
Variables and Types
Modern JavaScript uses const for values that won't change and let for values that will. Avoid var in modern code — it has confusing scoping behavior. JavaScript is dynamically typed: a variable can hold a string, number, boolean, array, or object.
The Document Object Model
The DOM (Document Object Model) is the browser's live representation of an HTML page as a tree of objects. JavaScript can read, modify, add, and remove any element in this tree — enabling the rich interactivity we see on the web.
// Select elements const btn = document.querySelector('#myButton'); const items = document.querySelectorAll('.list-item'); // Read and modify content btn.textContent = 'Click me!'; btn.classList.add('active'); btn.style.color = '#8aab8a'; // Handle events btn.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); });
Event Listeners
Events are the bridge between user actions and JavaScript code. The addEventListener method listens for a specific event (click, submit, keydown, scroll, etc.) and runs a callback function when it fires. Always use addEventListener rather than inline HTML event attributes like onclick="" — it keeps your JS and HTML cleanly separated.
What is Responsive Design?
Responsive design means building websites that look and work well on any screen size — from a 375px mobile phone to a 1440px desktop monitor. In 2024, over 60% of web traffic comes from mobile devices (StatCounter, 2024), making responsiveness a non-negotiable requirement.
/* Mobile-first: start with mobile styles */ .grid { display: grid; grid-template-columns: 1fr; gap: 16px; } /* Tablet: 2 columns */ @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop: 3 columns */ @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
The Viewport Meta Tag
Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your HTML head. Without it, mobile browsers will render your page at a desktop width and then scale it down, making text tiny and layouts broken.
HTML Full Course for Beginners
CSS Tutorial — Full Course for Beginners
Flexbox CSS In 20 Minutes
CSS Grid Layout Crash Course
JavaScript for Beginners — Full Course
JavaScript DOM Manipulation Crash Course
HTML Basics Quiz
5 questions · ~4 min1. What does HTML stand for?
2. Which element is used for the largest heading?
3. Which HTML element defines the content of a web page's body?
4. What is the correct HTML for creating a hyperlink?
5. Which HTML attribute specifies an alternate text for an image?
Quiz Complete!
Great work on the HTML Basics quiz. Review the lesson above to reinforce any questions you missed.
CSS Styling Quiz
5 questions · ~5 min1. How do you select an element with the id "header" in CSS?
2. Which property is used to change the background color?
3. Which value of the display property creates a flex container?
4. Which CSS property controls the font size?
5. How do you make text bold in CSS?
Quiz Complete!
Nice work on the CSS Styling quiz. If you'd like to review, revisit the CSS Box Model and Flexbox lessons above.
JavaScript Fundamentals Quiz
5 questions · ~5 min1. Which keyword is used to declare a variable that cannot be reassigned?
2. What will typeof "hello" return?
3. Which method adds an item to the end of an array?
4. How do you write a comment in JavaScript?
5. Which method is used to listen for a user event on a DOM element?
Quiz Complete!
Excellent work on the JavaScript Fundamentals quiz. Keep building — next up is DOM Manipulation.
HTML Cheat Sheet
A comprehensive one-page reference covering all essential HTML elements, attributes, semantic tags, and form inputs with examples.
HTML Starter Template
A clean, modern HTML5 boilerplate with semantic structure, viewport meta, font links, and CSS reset — ready to use.
CSS Reference Card
Quick reference for CSS properties, selectors, flexbox and grid shorthand, custom properties, and media query breakpoints.
Web Color Guide
Curated pastel and neutral color palettes with hex codes, HSL values, and accessibility contrast ratios for safe pairings.
JavaScript Quick Reference
Essential JS syntax, array and string methods, DOM selection, event handling, and async patterns in one clean document.
Web Design Checklist
A practical launch checklist covering accessibility, performance, responsive breakpoints, SEO basics, and cross-browser testing.