Home / Learn / Web Development

🕸️ Web Development

Frontend, backend and the browser. 51 topics, from beginner to advanced.

Web development builds the applications that run in browsers and on servers. This area covers HTML and CSS for structure and layout, JavaScript for interactivity, HTTP for communication, and backend services and APIs. Together these skills let you build sites and web apps from the first page to a production deployment.

Who this area is for

Aspiring web developers, designers who want to understand what they hand off to engineers, and anyone building an app that people use in a browser.

Real-world use cases

Building a responsive landing page that works on phones and desktops.
Creating a REST API that a mobile app and a website both consume.
Adding form validation so users see errors before a request is sent.
Building a sign-up form that validates input in the browser and on the server.
Making a page usable with a keyboard and a screen reader so that more people can use it.

Topics in Web Development

Beginner (17)

How the Web Works — Browsers requesting pages from servers over the Internet.
HTML Basics — Markup language structuring web page content.
HTML Forms — Elements collecting user input in pages.
Semantic HTML — Using tags that convey meaning such as header and article.
CSS Basics — Stylesheet language controlling presentation.
CSS Selectors — Patterns choosing which elements a rule applies to.
Box Model — Content, padding, border and margin around every element.
Flexbox — One-dimensional CSS layout system.
CSS Grid — Two-dimensional CSS layout system.
Responsive Design — Layouts adapting to different screen sizes.
Media Queries — CSS conditions applying styles by device characteristics.
JavaScript Basics — Core scripting language of the browser.
DOM — Tree representation of a page that scripts can modify.
Events — Browser signals such as clicks that scripts respond to.
Fetch API — Browser interface for making HTTP requests.
JSON — Lightweight text format for structured data exchange.
Browser DevTools — Built-in tools for inspecting and debugging pages.

Intermediate (17)

Asynchronous JavaScript — Non-blocking code using callbacks, promises and async/await.
Promises — Objects representing eventual completion of an async operation.
Event Loop — Mechanism scheduling callbacks and microtasks in JavaScript.
ES Modules — Standard module system for JavaScript.
Local Storage and Cookies — Browser mechanisms for persisting small data.
CSS Animations — Declarative motion through transitions and keyframes.
Web Accessibility — Designing sites usable by people with disabilities.
ARIA — Attributes enhancing accessibility semantics.
Single Page Applications — Apps that rewrite the page dynamically without full reloads.
React Fundamentals — Component-based UI library using a virtual DOM.
State Management — Strategies for sharing and updating application state.
Routing in the Browser — Mapping URLs to views on the client.
TypeScript — Typed superset of JavaScript compiled to plain JS.
Build Tools and Bundlers — Tools combining and optimizing source files for delivery.
Server-Side Rendering — Generating HTML on the server for faster first paint.
Static Site Generation — Prebuilding pages at compile time.
Backend Basics — Server logic handling requests, data and business rules.

Advanced (17)

Node.js — JavaScript runtime for server-side programming.
Express and Middleware — Minimal server framework chaining request handlers.
Authentication Flows — Sessions, tokens and logins verifying users.
JWT — Signed tokens carrying claims between parties.
OAuth 2.0 — Delegated authorization framework.
CORS — Browser policy controlling cross-origin requests.
Web Security Basics — Protecting sites from XSS, CSRF and injection.
Web Performance — Optimizing load speed and responsiveness.
Core Web Vitals — Metrics for loading, interactivity and visual stability.
Caching Strategies — Storing responses to avoid repeated work.
Service Workers — Background scripts enabling offline and push features.
Progressive Web Apps — Web apps with installability and offline support.
WebAssembly — Binary format enabling near-native speed in browsers.
Web Components — Standard custom reusable elements with encapsulated styles.
Canvas and WebGL — Browser APIs for 2D and GPU-accelerated 3D drawing.
Micro-Frontends — Splitting a frontend into independently delivered pieces.
Edge Computing for Web — Running code at network edges close to users.

How to study Web Development

Build one small page in order: HTML structure, CSS layout, JavaScript behavior, then a request to a server. Open your browser developer tools for every step to inspect the DOM, the network calls and the console messages.

Frequently asked questions

Should I learn frontend or backend first?

Start with the frontend because you see results immediately, then learn HTTP and a backend language so you understand how data reaches the browser.

What is the difference between HTML, CSS and JavaScript?

HTML defines the structure and content, CSS controls presentation and layout, and JavaScript adds behavior such as responding to clicks and fetching data.

What is a REST API?

A REST API exposes resources at URLs and uses HTTP methods such as GET, POST, PUT and DELETE to read and change them. It is a common way for frontends and backends to communicate.

Should I learn frontend or backend development first?

Learn enough of both to build one complete page that talks to a server. Once you see the full path of a request, choosing a specialty is easier.

Do web developers need to know accessibility?

Yes. Accessible markup, labels and keyboard support are part of building a correct product, and they are easier to add from the start than to retrofit later.

Open the interactive Web Development area Take the Web Development quiz