Course overview

Course introduction, learning mindset, and how to effectively use AI tools for web development.

Overview of professional development tools: Git, GitHub, VS Code, Node.js, and the modern web development workflow.

Complete setup instructions for Mac users: Homebrew, VS Code, Node.js, and Git.

Step-by-step setup instructions for Windows users with direct downloads and installations.

Make Warp easier to read and use: themes, font size, cursor/input settings, and beginner-friendly AI tips.

Install coding fonts, choose themes, and set up GitHub Copilot for AI-assisted development.

A balanced look at AI's role in development: separating hype from reality, addressing concerns, and using AI as a learning tool.

Get comfortable using the terminal and working with plain-text files. Learn essential commands for navigating and managing files in a coding environment.

Master the basics of Markdown syntax for formatting text documents.

Learn Git workflow with text files and how to write meaningful commit messages from day one.

Learn how to collaborate using Git and GitHub, including branching, pull requests, and merging.

Understanding the foundational concepts of how computers process information and how the web functions under the hood.

Learn what this template provides, clone it, and understand the project structure you'll use for the next few weeks.

Introduction to JavaScript: what it is, what it can do, and how it fits into modern web development.

Learn about variables, program structure, and hands-on JavaScript coding using the browser console.

Explore some computer science fundamentals through JavaScript, including conditional statements

Master ternary operators, switch statements, guard clauses, and the art of refactoring. Learn why clean code matters—especially when working with AI.

Let's learn about ➿s. Let's learn about ➿s. Let's learn about ➿s.

Learn how programs make decisions with conditionals and handle repetitive tasks with loops - the building blocks of intelligent programs.

Learn to create reusable blocks of code with functions - the building blocks of organized programming and modular applications.

Master JavaScript's fundamental data structures for organizing information - objects for related properties and arrays for collections.

Learn to process collections efficiently using callback functions with map, filter, and forEach - turning data transformation into simple, readable code.

Intro to built-in Object helpers: keys, values, entries, assign, and spread. Learn how they pair with map/filter for shaping and inspecting data.

Understand how to split your code into reusable modules using modern JavaScript import/export syntax.

Understanding the browser environment, developer tools, and how JavaScript runs in web pages. Setting up your development workflow.

What is the DOM? Understanding the document tree structure, nodes vs elements, and how browsers parse HTML into JavaScript objects.

Master querySelector and querySelectorAll to find elements. Learn CSS selectors, NodeList vs Arrays, and element relationships.

Learn to build reusable UI components with JavaScript functions that return DOM elements. Understand component structure and composition.

Learn to work with HTML forms using JavaScript: reading values, handling submissions, and understanding form behavior in the browser.

Use the Constraint Validation API to validate user input. Provide feedback and ensure data integrity before form submission.

Connect your validated Request a Tutor Session form with function components and localStorage to build a persistent tutor requests inbox.

Understand how browsers store data with localStorage. Learn when to use it, how to handle errors, and build persistent applications.

Understanding variables and data types in JavaScript.

A review of function concepts in JavaScript, focusing on their relevance in React.

Master JavaScript objects and arrays - essential data structures for React development.

An overview of different programming paradigms (e.g., imperative, functional, object-oriented) and their significance in JavaScript.

Review the DOM API and learn component-based thinking patterns in vanilla JavaScript - the foundation for React development.

Learn the fundamentals of testing - from console.log debugging to automated testing with Vitest. Perfect introduction for beginners.

Advanced testing practices including complex data structures, immutability testing, and test-driven development workflow.

Walk through Vite’s React starter: index.html root mount point, createRoot/StrictMode in main.jsx, App component with useState and HMR.

Build a complete tic-tac-toe game following React's official tutorial. Learn state management, component hierarchy, and time travel with immutable updates.

Learn how to use localStorage to persist React state across sessions. Build a simple app that saves user preferences and data locally.

Learn immutability by flushing out a React to-do app. Understand why immutable updates are crucial for React's rendering performance.

Build a contact form using modern uncontrolled React inputs with the form action prop and FormData.

Build a registration form with live validation, password strength indicators, and controlled inputs using value and onChange.