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.

Learn the basics of using the terminal, including navigation, file manipulation, and command execution.

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

Master the basics of Markdown syntax for formatting text documents.

Reinforce using Git and Terminal commands.

Learn how to set up a Node.js template repository for your projects.

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

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

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

Learn the importance of semantic HTML for accessibility, SEO, and maintainable code. Avoid common mistakes and write clean, meaningful markup.

Review essential CSS concepts: selectors, properties, box model, and layout basics. Build the foundation needed for Tailwind and browser-based styling.

Explore JavaScript's core data types, operators, and how to work with them effectively.

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

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.

Change text, HTML content, and styles dynamically. Work with classList to toggle Tailwind classes and create interactive interfaces.

Generate new DOM elements programmatically. Learn createElement, appendChild, and building dynamic content from JavaScript data.

Respond to user interactions with addEventListener. Handle clicks, form input, and other events to create responsive web applications.

Apply DOM manipulation skills to build a functional task manager app with add, edit, delete, and toggle functionality.

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.