How the web works

Two computers and a conversation

A website is a conversation between a client — your browser — and a server, a computer that is always on and has the files. The browser asks for something, the server answers. That is the whole model, and everything else is detail on top of it.

The language of the conversation is HTTP. The s in https means the conversation is encrypted, so the network in between can see who you are talking to but not what you said.

What happens when you press Enter

The URL is parsed. The browser splits it into a scheme, a host, a path and the rest.
DNS. The host name, domvybe.com, is looked up and turned into an IP address — the actual number of the machine. The answer is cached, which is why the second visit is faster.
A connection is opened to that address, and a TLS handshake agrees on encryption.
A request is sent: a method (GET), a path (/learn/), and headers describing the browser and what it will accept.
The server answers with a status code, headers and a body — usually the HTML.
The browser parses the HTML into the DOM, finds the CSS and JavaScript it references, requests those too, and paints.

The request and the answer

You can see all of this in the Network panel of your browser's developer tools. Learning to read that panel is worth more than most tutorials.

what actually travels

GET /learn/html/ HTTP/1.1
Host: domvybe.com
Accept: text/html
User-Agent: Mozilla/5.0 …

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: public, max-age=3600

<!doctype html> …

Status codes, in the shape you meet them

Code	Means	You see it when
`200`	OK	Everything worked.
`301` / `308`	Moved permanently	A URL changed and the browser should remember.
`302` / `307`	Moved temporarily	A redirect after signing in, for example.
`304`	Not modified	Your cached copy is still good, so nothing was sent.
`400`	Bad request	You sent something malformed.
`401` / `403`	Unauthorised / Forbidden	Not signed in, or signed in but not allowed.
`404`	Not found	No such path on this server.
`500`	Server error	Their code crashed. Not your fault.

What a URL is made of

scheme — https: almost always.
host — the domain. A different host is a different origin, and that is the boundary browsers enforce for security.
port — which door on that machine. 443 for https, 80 for http; both are implied and normally left out.
path — where on that host. On most servers the case matters.
query — ?key=value&other=2. Searches, filters, tracking.
fragment — #id. Never sent to the server at all; the browser uses it to scroll.

the parts

https://domvybe.com:443/learn/html/?from=home#urls
 scheme    host       port  path        query      fragment

The DOM is not the file

View source shows the HTML the server sent. The Elements panel shows the DOM: the live tree, after the browser repaired any broken markup and after your JavaScript changed it. They are often different, and confusing them costs people hours.

That tree is what CSS styles and what JavaScript manipulates. When you write document.querySelector, you are searching the tree, not the file.

The first thing to check

If an element is not styled the way you expect, look at it in the Elements panel first. Very often it is not the element you thought it was, or an attribute did not survive the parse.

Static and dynamic

A static site answers with a file that already exists — this is one. A dynamic server builds the HTML for each request, usually from a database. A single-page app is served once and then rewrites its own DOM as you navigate.

They differ in where the HTML is assembled, not in what arrives: in every case the browser receives HTML, CSS and JavaScript.

What you need to work

A text editor. VS Code is the common choice.
A browser with developer tools — any modern one.
A local server. Opening a file with file:// works for simple pages but breaks modules, fetch and anything else that needs an origin. npx serve or the editor's live-server extension is enough.