Front-End Development Course

Lesson 1 • Setting Up Your Dev Environment

Installs and configures a code editor, terminal, and browser developer tools. Ensures every student has an identical, productive baseline before writing code.

Lesson 2 • Version Control with Git

Introduces Git concepts and daily workflows for tracking code changes. Prepares students to collaborate and recover from mistakes throughout the course.

Lesson 3 • Introduction to the Command Line

Teaches navigation, file manipulation, and running scripts from the terminal. Enables students to use build tools and package managers introduced in later chapters.

Lesson 1 • Semantic HTML5 Elements

Introduces landmark elements such as header, nav, main, article, section, and footer. Improves accessibility and machine readability of page content.

Lesson 2 • Accessibility Fundamentals in HTML

Applies ARIA roles, alt text, and keyboard-navigable markup to HTML documents. Ensures all projects meet baseline accessibility standards from the start.

Lesson 3 • HTML Forms and Input Types

Builds interactive forms using labels, inputs, selects, and buttons with proper accessibility attributes. Prepares students for form validation and submission handling in JavaScript chapters.

Lesson 4 • Core HTML Elements

Covers headings, paragraphs, lists, links, and images as the primary content building blocks. Establishes correct element usage before introducing semantic wrappers.

Lesson 1 • Positioning and Display Modes

Teaches static, relative, absolute, fixed, and sticky positioning alongside display values. Enables precise element placement before introducing modern layout systems.

Lesson 2 • CSS Specificity and Inheritance

Resolves style conflicts using specificity rules, the cascade, and inherited properties. Prevents debugging frustration in larger stylesheets built in later chapters.

Lesson 3 • CSS Syntax and Selectors

Covers rule sets, property-value pairs, and selector types from element to attribute. Builds selector precision needed for all subsequent styling work.

Lesson 4 • The Box Model in Depth

Explains content, padding, border, and margin as the four layers of every element. Resolves common spacing bugs by teaching box-sizing and margin collapse.

Lesson 1 • CSS Grid Advanced Techniques

Uses auto-fill, auto-fit, and subgrid to create adaptive, content-driven layouts. Rounds out layout mastery before students move to JavaScript interactivity.

Lesson 2 • Flexbox Fundamentals

Introduces the flex container and flex item model with axis-based alignment. Solves common one-dimensional layout problems such as navigation bars and card rows.

Lesson 3 • Advanced Flexbox Patterns

Applies flex-wrap, order, and align-self to build complex component layouts. Prepares students to choose between Flexbox and Grid for each design scenario.

Lesson 4 • CSS Grid Fundamentals

Defines grid tracks, areas, and placement rules for two-dimensional layouts. Enables students to build magazine-style and dashboard page structures.

Lesson 1 • Operators and Control Flow

Applies arithmetic, comparison, and logical operators inside conditionals and loops. Enables students to write decision-making and repetitive logic in their scripts.

Lesson 2 • Functions and Scope

Defines reusable logic with function declarations, expressions, and arrow functions. Explains lexical scope and closures as the foundation for modular code.

Lesson 3 • Arrays and Objects

Stores and manipulates collections using array methods and object literals. Prepares students to work with API data structures in later chapters.

Lesson 4 • JavaScript Syntax and Data Types

Covers variables declared with let and const, primitive types, and type coercion. Establishes the language rules that govern all subsequent JavaScript code.

Lesson 1 • Modifying DOM Elements

Changes text content, attributes, styles, and class lists on selected elements. Enables dynamic UI updates without full page reloads.

Lesson 2 • Selecting and Traversing the DOM

Uses querySelector, getElementById, and traversal properties to locate elements. Connects JavaScript to the HTML structure built in earlier chapters.

Lesson 3 • Forms and User Input Handling

Reads form values, prevents default submission, and validates input in real time. Bridges HTML form structure with JavaScript-driven interactivity.

Lesson 4 • Creating and Removing Elements

Builds new nodes with createElement and inserts or removes them from the DOM tree. Supports dynamic list rendering and component creation patterns.

Lesson 1 • Promises and Promise Chaining

Creates and chains Promises using .then(), .catch(), and .finally() for sequential async logic. Prepares students for the cleaner async/await syntax introduced next.

Lesson 2 • Fetching Data with the Fetch API

Sends GET and POST requests, parses JSON responses, and handles HTTP errors. Connects async skills to real data sources students will use in projects.

Lesson 3 • Asynchronous Programming Concepts

Explains the call stack, event loop, and callback pattern as the basis of async behavior. Resolves common misconceptions about JavaScript's single-threaded execution model.

Lesson 4 • Rendering API Data in the DOM

Displays fetched data dynamically, manages loading spinners, and shows error messages. Produces complete data-driven UI features ready for portfolio projects.

Lesson 1 • Component-Based UI Frameworks

Introduces the component model, props, and state using a popular front-end framework. Shifts students from imperative DOM manipulation to declarative UI rendering.

Lesson 2 • Deploying a Front-End Application

Builds and deploys a production SPA to a static hosting platform using CI/CD pipelines. Completes the full development lifecycle from local code to live URL.

Lesson 3 • State Management Patterns

Manages shared application state using context, stores, or lifting state up. Prepares students to architect data flow in complex multi-component applications.

Lesson 4 • ES Modules and Package Management

Organizes code with import/export syntax and manages dependencies using a package manager. Establishes the modular architecture used by all modern front-end frameworks.

Lesson 5 • Routing in Single-Page Applications

Implements client-side routing to navigate between views without full page reloads. Enables students to build multi-view SPAs with URL-driven navigation.