Introduction to Web Development
What web developers actually do
Web development isn't one job. It's a set of overlapping roles that share a common workflow. Here are the main ones you'll see in job listings:
Frontend Developer. Builds what users see and interact with. Pages, layouts, animations, forms, responsive design. HTML, CSS, JavaScript, and frameworks like React or Next.js. The work is visual and immediate. You see the result in a browser.
Backend Developer. Builds what happens behind the scenes. APIs, databases, authentication, server-side logic. The user never sees this work directly, but everything depends on it.
Full-Stack Developer. Does both. This is the most common role, especially at smaller companies where one person handles the entire application. This track follows a full-stack path.
DevOps / Platform Engineer. Focuses on deployment, infrastructure, CI/CD pipelines, monitoring. Makes sure the application runs reliably in production. You'll encounter this work in the second half of the track.
These roles overlap significantly. A frontend developer at a small company writes backend code. A backend developer deploys their own services. The underlying workflow is the same regardless of title.
The professional loop
Every web development project, whether it's a landing page or a complex application, moves through the same cycle:
1. Discovery and success criteria. What needs building? For whom? What does "done" look like? A surprising amount of web development fails because nobody answered these questions clearly before coding started.
2. Design. What will it look like (UX) and how will it work under the hood (architecture)? These co-evolve. A design decision constrains the architecture, and vice versa. AI generates functional UI prototypes from prompts, collapsing the gap between design and code.
3. Implementation. Build it. In slices, not all at once. AI writes the code; you direct it and verify what it produces. Each slice is a working piece you can see and test.
4. Verification. Does it work? Tests, performance checks, accessibility audits, AI output review. Not just "does it load" but "does it work for everyone, on every device, at acceptable speed?"
5. Release. Ship it. CI/CD pipelines, Docker containers, deployment targets. The gap between "works on my machine" and "works in production" is where most of the engineering lives.
6. Production verification. Check that what you shipped actually works in the real environment. Not the same as step 4. Production has real users, real data, and real network conditions.
7. Observability and iteration. Watch how it performs. Fix what breaks. Improve what's slow. The application is never finished. It's maintained.
You'll run this loop in every project. What changes is the complexity: early projects give you a complete design and a clear spec. Later projects give you a vague client need and expect you to figure out the rest.
What you'll work on
Each project is built for a client with a specific problem. You'll direct AI to build the site or application, interact with the client to clarify requirements, verify the output, and deliver something that works. Here's a sample of what that looks like across the track:
- A portfolio site for a client who needs to showcase their work
- A responsive web application with database-backed features
- An authenticated system with role-based access
- A full-stack application with CI/CD pipeline and automated testing
- A performance-optimized site meeting real accessibility standards
- An inherited codebase you didn't write, with bugs to diagnose and features to add
The projects get harder in specific ways. The designs disappear. The specs get vaguer. The client stops telling you exactly what they want. You move from static sites to full-stack applications to production deployments with monitoring. And throughout, AI is your primary tool, capable and fast, but prone to specific mistakes that you'll learn to catch.
Core tools
These are the tools web developers use daily. You'll set up the core ones in the track setup; the rest are introduced as projects need them.
Terminal. Your command line. Everything runs through it: code, tools, deployments, Claude Code itself.
Claude Code. Your AI coding agent. You'll direct it to write HTML, CSS, JavaScript, React components, API routes, database queries, and deployment configs. It's fast and capable, and it makes specific, predictable mistakes that you'll learn to catch.
Git and GitHub. Version control. Every project lives in a repository. Every change is tracked.
VS Code. Your code editor. You'll read code in it, browse files, preview sites, and use extensions for linting and formatting. In web dev, the editor is more central than in some other tracks. You'll spend time looking at the code AI writes.
HTML, CSS, and JavaScript/TypeScript. The languages of the web. You don't need to write them from memory (you're directing AI), but you need to read them and understand what they do.
React and Next.js. The dominant frontend framework and its full-stack companion. React handles UI components; Next.js adds routing, server-side rendering, and API routes.
Node.js and npm. JavaScript runtime and package manager. How you run JavaScript outside the browser and install libraries.
PostgreSQL. A relational database. Where your application stores data. Enters the track when projects add backend features.
Docker. Packages your application into containers. The bridge between development and production.
You'll install additional tools as the track progresses: testing frameworks, deployment platforms, monitoring tools, and others. Each project tells you what's needed.