Every lesson, video, quiz, and download — organized by unit in one place. Follow the path from Unit 1 to 6, or jump to wherever you are.
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).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Page Title</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
Semantic elements clearly describe their meaning. Use <header>, <main>, <section>, <article>, <nav>, and <footer> instead of generic <div> elements. Semantic markup improves accessibility, SEO, and code readability.
Great work. Review the lesson above to reinforce any questions you missed.
All essential HTML elements, attributes, semantic tags, and form inputs with examples — one page.
A clean HTML5 boilerplate with semantic structure, viewport meta, and CSS reset — ready to use.
Every HTML element is treated as a rectangular box with four layers: content, padding, border, and margin.
.box { width: 300px; padding: 20px; /* space inside border */ border: 2px solid #ccc; margin: 16px; /* space outside border */ box-sizing: border-box; }
Setting box-sizing: border-box makes the browser include padding and border inside the declared width. Apply it globally: *, *::before, *::after { box-sizing: border-box; }.
Nice work. Revisit the CSS Box Model lesson to reinforce anything you missed.
Properties, selectors, flexbox/grid shorthand, custom properties, and media query breakpoints.
Pastel and neutral palettes with hex codes, HSL values, and WCAG contrast ratios for safe pairings.
Flexbox is a CSS layout model for one-dimensional layouts — either a row or a column. It makes aligning, distributing, and ordering elements trivial.
.container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
No quiz or downloads for this unit — head to Unit 4 after finishing the videos.
JavaScript is the programming language of the web. HTML structures content, CSS styles it, and JavaScript makes it interactive.
// 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."); }
Use const for values that won't change and let for values that will. Avoid var — it has confusing scoping rules. JavaScript is dynamically typed: a variable can hold a string, number, boolean, array, or object.
typeof "hello" return?Excellent. Keep building — next up is DOM Manipulation.
Essential syntax, array/string methods, DOM selection, event handling, and async patterns.
The DOM 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.
// Select elements const btn = document.querySelector('#myButton'); const items = document.querySelectorAll('.list-item'); // Modify content & styles btn.textContent = 'Click me!'; btn.classList.add('active'); // Handle events btn.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); });
addEventListener listens for user events (click, submit, keydown, scroll) and runs a callback. Always prefer this over inline onclick="" attributes — it keeps JS and HTML separated.
No quiz or downloads for this unit yet — check back soon.
Responsive design means building websites that look and work well on any screen size. In 2024, over 60% of web traffic comes from mobile devices (StatCounter, 2024), making this a non-negotiable skill.
/* Mobile-first */ .grid { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> — without it, mobile browsers render at desktop width and scale down, breaking your layout.
A launch checklist covering accessibility, responsive breakpoints, performance, SEO basics, and cross-browser testing.
No video or quiz for this unit yet — check back soon.