Web development has a lot of words in it, and most beginner confusion comes from not knowing which word belongs where. This guide is a map, not a tutorial.
What happens when you visit a page#
- You type an address. Your browser asks DNS which computer that name belongs to.
- It sends a request to that computer — the server.
- The server sends back HTML, plus links to CSS, JavaScript and images.
- Your browser — the client — builds the page and runs the JavaScript.
Everything else in web development is a detail of one of those four steps.
The three languages of the front end#
| Language | Job | Analogy |
|---|---|---|
| HTML | Structure and content | The walls and rooms |
| CSS | Appearance and layout | Paint and furniture |
| JavaScript | Behaviour | The lights and doorbell |
You can build a real, useful website with only HTML and CSS. JavaScript is what makes it react.
Front end, back end, full stack#
- Front end — everything running in the visitor’s browser. HTML, CSS, JavaScript, and frameworks like React.
- Back end — everything running on the server. Handling requests, talking to a database, checking passwords. Python, Node.js, PHP and others live here.
- Full stack — someone who works on both.
The dividing line is simple: if a visitor could see it by pressing “view source”, it is front end.
Where data lives#
A database stores information between visits — users, orders, posts. The front end never talks to it directly. It asks the back end, which checks who you are and answers with just the data you are allowed to see.
That middle layer is an API: a set of URLs the front end can call. See the Fetch API guide for the browser side of that conversation.
A learning order that works#
- HTML — a week. Structure, links, images, forms.
- CSS — two or three weeks. The box model, flexbox, grid.
- Responsive design — make it work on a phone.
- Build a real page. A portfolio page is ideal.
- JavaScript — the longest stretch. Take your time.
- The DOM and events — make pages respond.
- Fetching data — connect to a real API.
- Git and GitHub — and publish what you built.
- Only now, a framework like React if you want one.
Words you will keep hearing#
- Responsive — the layout adapts to screen size
- Framework — a big toolkit with opinions (React, Django)
- Library — a smaller toolkit you call when you want it
- API — a way for one program to ask another for data
- Hosting — a computer that keeps your site online
- Domain — the name people type
- Deploy — putting your code where the public can reach it
What you do not need yet#
Ignore all of this until it solves a problem you actually have: TypeScript, Docker, Kubernetes, GraphQL, microservices, webpack configuration, server-side rendering. Every one of them exists to fix a problem you have not met.
Questions people ask#
How long before I can build a real website?
A simple multi-page site with HTML and CSS is achievable within a few weeks. Something interactive with saved data takes several months of consistent practice.
Do I need to learn design too?
Basic taste helps a lot: consistent spacing, two fonts at most, one accent colour, plenty of whitespace. You do not need to be a designer to avoid the things that make a page look amateur.
Is web development still worth learning?
The web is not going anywhere, and the fundamentals here transfer to almost every other kind of software. What changes is the tooling, not the model.
What about WordPress and site builders?
Excellent tools for getting a site online quickly, and they do not teach you to program. Both paths are valid — just be clear about which one you are on.