HTML, CSS, JavaScript Course

Lesson 1 • Setting Up Your Dev Environment

Installs and configures a code editor, browser dev tools, and local file structure. Ensures every student has an identical, functional workspace.

Lesson 2 • Version Control with Git Basics

Teaches init, commit, and push workflows so students track every project from day one. Establishes professional habits before code complexity increases.

Lesson 3 • How the Web Works

Covers client-server communication, HTTP requests, and browser rendering pipelines. Grounds all later coding decisions in real browser behavior.

Lesson 1 • Lists, Links, and Navigation

Builds ordered, unordered, and description lists plus anchor elements with attributes. These patterns form the backbone of every site's navigation structure.

Lesson 2 • Text and Heading Elements

Covers h1–h6, p, strong, em, and blockquote for content hierarchy. Proper heading order directly impacts SEO and screen-reader navigation.

Lesson 3 • Images, Media, and Figures

Embeds images, audio, and video with correct attributes for accessibility and performance. Alt text and captions are treated as required, not optional.

Lesson 4 • Semantic Layout Elements

Replaces generic divs with header, main, section, article, aside, and footer. Semantic markup improves machine readability and accessibility scores.

Lesson 1 • The Box Model Explained

Teaches content, padding, border, and margin as the four layers of every element. Mastery of box-sizing prevents layout bugs throughout the course.

Lesson 2 • CSS Variables and Custom Properties

Defines and reuses design tokens via CSS custom properties for maintainable stylesheets. Variables reduce repetition and enable theme switching in later projects.

Lesson 3 • Typography and Color

Sets font families, sizes, weights, line heights, and color values using modern CSS units. Consistent type and color scales are the foundation of visual design systems.

Lesson 4 • CSS Selectors and Specificity

Covers element, class, ID, attribute, and pseudo-class selectors with specificity calculation. Understanding specificity prevents cascading conflicts in larger stylesheets.

Lesson 1 • Grid Placement and Named Areas

Places items using line numbers, span keywords, and named template areas. Named areas make complex layouts readable and easy to restructure.

Lesson 2 • Flexbox Container Properties

Controls flex-direction, justify-content, align-items, and flex-wrap on the parent. These properties govern how children are distributed along both axes.

Lesson 3 • Responsive Design with Media Queries

Applies breakpoints and mobile-first strategy to adapt layouts across screen sizes. Combines Flexbox and Grid with media queries for production-ready responsiveness.

Lesson 4 • CSS Grid Fundamentals

Defines grid-template-columns, grid-template-rows, and grid-gap for two-dimensional layouts. Grid solves layout problems that Flexbox handles awkwardly.

Lesson 1 • Variables, Data Types, and Operators

Declares variables with let, const, and var and identifies primitive data types. Operator precedence and type coercion are addressed to prevent common bugs.

Lesson 2 • Functions and Scope

Defines functions with declarations, expressions, and arrow syntax while explaining scope chains. Scope mastery prevents variable leakage and closure bugs.

Lesson 3 • Objects and Object Methods

Constructs objects with properties and methods, and accesses them via dot and bracket notation. Objects model real-world data structures used in every JS application.

Lesson 4 • Arrays and Array Methods

Creates and manipulates arrays using push, pop, map, filter, and reduce. Functional array methods are used throughout DOM manipulation and API work.

Lesson 1 • Modifying Elements and Styles

Changes textContent, innerHTML, attributes, and classList to update the page without reloading. These techniques power live UI updates in single-page applications.

Lesson 2 • Creating and Removing DOM Nodes

Builds new elements with createElement, appends them, and removes stale nodes. Dynamic node creation enables list rendering and component-style patterns.

Lesson 3 • Event Delegation and Bubbling

Leverages event bubbling to attach single listeners to parent containers for dynamic children. Delegation reduces memory usage and handles runtime-generated elements.

Lesson 4 • Selecting and Traversing the DOM

Uses querySelector, getElementById, and traversal properties to target elements precisely. Accurate selection is the foundation of all dynamic page behavior.

Lesson 1 • Async/Await Syntax

Rewrites Promise chains using async functions and await expressions for readable code. Async/await is the modern standard for all fetch-based workflows.

Lesson 2 • Promises and Promise Chaining

Creates and consumes Promises with .then(), .catch(), and .finally() for cleaner async code. Promise chaining replaces nested callbacks in sequential async operations.

Lesson 3 • Rendering API Data in the DOM

Maps fetched JSON arrays to HTML elements and handles loading and error states visually. Connects async data retrieval to DOM manipulation from the previous chapter.

Lesson 4 • Fetching Data with the Fetch API

Sends GET and POST requests using fetch(), parses JSON responses, and handles errors. Fetch is the browser-native tool for all REST API communication.

Lesson 1 • Deployment and Code Review

Deploys the project to a static hosting platform and conducts a structured peer code review. Deployment and review simulate real professional delivery standards.

Lesson 2 • Styling with CSS and Responsive Layout

Applies a design system using CSS variables, Flexbox, and Grid with full responsiveness. Consistent visual design demonstrates mastery of chapters 3 and 4.

Lesson 3 • Project Planning and Architecture

Defines user stories, wireframes, and component breakdown before writing code. Planning prevents scope creep and establishes a professional development workflow.

Lesson 4 • JavaScript Logic and API Integration

Implements fetch calls, DOM rendering, event handling, and state management in vanilla JS. Integrates all JS skills from chapters 5, 6, and 7 into one codebase.