Course overview

A modern web development course that teaches you how to build using real world tools and practices. From getting comfortable with the terminal and Git to understanding JavaScript as a programming language and onwards to React and NextJS.

Start the course
Part 1

Development Environment & Setup

Get your development environment configured and learn essential tools for professional web development.

  1. Welcome to SWIC Web Development

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

  2. Modern Developer Tools

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

  3. Mac Setup Guide

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

  4. Windows Setup Guide

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

  5. Customize Warp

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

  6. Customize VS Code

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

  7. AI Reality Check: Beyond the Hype

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

  8. Terminal and TXT Files: Your First Steps in Coding

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

  9. Learn Markdown

    Master the basics of Markdown syntax for formatting text documents.

  10. Git Fundamentals

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

  11. Git & GitHub Workflow

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

  12. How Computers and the Web Work

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

  13. Bun Biome Template

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

Part 2

JavaScript Basics

Learn the fundamentals of JavaScript, including variables, data types, operators, and basic syntax.

  1. What is JavaScript?

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

  2. Program Structure & Variables

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

  3. Comp. Sci. Fundamentals 1

    Explore some computer science fundamentals through JavaScript, including conditional statements

  4. Comp. Sci. Fundamentals 2

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

  5. Comp. Sci. Fundamentals 3

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

  6. Comp. Sci. Fundamentals 4

    Move beyond numbered indices. Learn how objects use named properties to store and access complex data.

  7. Comp. Sci. Fundamentals 5

    Wrap code into reusable blocks. Learn how functions reduce duplication and make programs flexible and maintainable.

  8. Callbacks and Array Methods

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

  9. Object Methods Basics

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

  10. Advanced Array Methods

    Learn powerful array methods like reduce, find, some, and every for complex data manipulation.

Part 3

Modules

Learn how to organize JavaScript code using ES Modules (ESM): import, export, and best practices for modular development.

  1. JavaScript ES Modules (ESM)

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

Part 4

Testing

Learn how to write automated tests with Bun's built-in test runner.

  1. Testing with Bun

    Write your first automated tests using Bun's test runner and the Arrange-Act-Assert pattern.

Part 5

Browser JavaScript & DOM

Bridge from console JavaScript to interactive web applications by mastering DOM manipulation, event handling, and browser APIs.

  1. From Console to Browser

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

  2. DOM Fundamentals

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

  3. Selecting DOM Elements

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

  4. Function Components

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

  5. Form Fundamentals

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

  6. Form Validation

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

  7. Persistent Tutor Requests with localStorage

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

  8. Browser Storage Fundamentals

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

Part 6

JS Review & React Prep

This review will reacquaint you with the core concepts of JavaScript, including variables, functions, and control flow.

  1. Variables and Types

    Understanding variables and data types in JavaScript.

  2. Functions and Scope

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

  3. Objects and Arrays

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

  4. Programming Paradigms

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

  5. DOM Review & Component Patterns

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

Part 7

React Fundamentals

Build interactive UIs with React. Learn components, state management, props, and modern React patterns through hands-on projects.

  1. React + Vite Starter Walkthrough

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

  2. Building Tic-Tac-Toe

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

  3. localStorage

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

  4. Immutability

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

  5. React Forms (Uncontrolled)

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

  6. React Forms (Controlled)

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