In its simplest form, a web page is a text file with an .html extension. Save one, double-click it, and a browser displays it. Press F12 and the browser's developer tools open, letting you inspect, change and debug the page while it runs. You could build a website with nothing more than that, and for your first experiments you should.
Professional front-end work adds layers around that file. A code editor with language support and an AI assistant helps you write it. A local development server reloads the page as you save. Node.js 2,131 and a package manager install libraries; a bundler such as Vite 25,978 turns hundreds of modules into a few optimized files; linters, formatters and test runners catch mistakes before your users do; Git 1,932 records every change; and a host, CDN or server of your own puts the result on the Internet under your domain name, secured with HTTPS.
This chapter sets up that environment and explains how its pieces fit together. It starts with how the web itself works, because every tool you install exists to serve some stage of a browser's request for a page. It then moves from the editor on your desk, through browser developer tools, hosting and servers, to the Node.js toolchain, testing, version control and the major front-end frameworks, and it closes with a checklist of engineering practices that separate a hobby project from a professional one.
You do not need to install everything before moving on. Read How the Web Works to Browser Developer Tools now, set up an editor, then return to the later sections when a chapter first asks you to run npm 2,036 install or deploy a site.
What you will learn
How a browser fetches a page over DNS, TCP or QUIC, TLS and HTTP, and how it turns HTML and CSS into pixels
Who writes web standards, and how to use Baseline to decide whether a feature is safe to use
How to choose and configure a code editor, and where AI coding assistants fit
How to use Chrome 1 , Firefox 555 and Safari 10 developer tools to debug layout, scripts, network and storage
The options for hosting a site, from shared hosting and CMSs to static hosts, CDNs and your own server
How to install and secure a web server with a domain name and HTTPS
How Node.js, package managers, bundlers, code-quality tools and test runners work together
Enough Git to version your work, and enough about frameworks to choose one