Lesson 1 of 5 12 min read
How websites and browsers work
Follow a web request from the address bar to the server and back, and learn the roles of HTML, CSS and JavaScript.
In this lesson you will
- Describe the steps between entering a URL and seeing a rendered page
- Explain the client-server model, DNS and HTTP at a high level
- Name the job of HTML, CSS and JavaScript in a web page
Clients and servers
The web is built on a simple idea: a client asks for something and a server responds. Your browser (Chrome, Firefox, Safari, Edge) is the client. A server is a computer, usually in a data centre, that stores websites and answers requests.
What happens when you open a URL
Suppose you type https://www.example.com/about into the address bar.
Browser sends to DNS: Where is www.example.com?. DNS replies to Browser: 93.184.215.14. Browser sends to Server: GET /about (over HTTPS). Server replies to Browser: 200 OK + HTML. Browser sends to Server: GET the CSS, JavaScript and images. Server replies to Browser: the files, then the page is drawn
- The URL is parsed.
httpsis the protocol,www.example.comis the domain and/aboutis the path. - DNS lookup. Computers find each other by IP address (such as
93.184.215.14). The Domain Name System translates the domain name into the server's IP address, like a phone book. - Connection. The browser opens a connection to the server. With
https, the connection is encrypted using TLS so nobody in between can read or change the data. - HTTP request. The browser sends a request such as
GET /about. - HTTP response. The server replies with a status code (
200 OK,404 Not Found) and the page's HTML. - Rendering. The browser reads the HTML, requests the CSS, JavaScript and images it references, and draws the page.
The three languages of the front end
| Language | Job | Analogy |
|---|---|---|
| HTML | Structure and meaning: headings, paragraphs, links, images | The walls and rooms of a house |
| CSS | Presentation: colours, fonts, spacing, layout | Paint, furniture and decoration |
| JavaScript | Behaviour: reacting to clicks, updating content | Electricity and plumbing |
Seeing it for yourself
Open any website, right-click and choose Inspect (or press F12) to open the browser's developer tools.
- The Elements panel shows the page's HTML and the CSS applied to each element.
- The Network panel lists every request the page made, with its status code and size. Reload the page with it open to watch the requests happen.
Static and dynamic pages
A static page is the same for every visitor: the server sends a stored file. A dynamic page is generated per request, for example a dashboard showing your courses. Dynamic sites combine a front end (what runs in the browser) with a back end (code and a database on the server). The Introduction to Full-Stack Development path covers how those parts fit together.
Hands-on exercise
Open a website you use often, open developer tools and switch to the Network panel. Reload the page. How many requests were made? Find the very first request (the HTML document) and note its status code. Then find one CSS file and one image. Which file was the largest?
Knowledge check
3 questions • 70% to pass • Practice only, no certificate
Key concepts
- The browser is the client; it requests resources from a server over HTTP or HTTPS.
- DNS translates a domain name into the IP address of the server.
- Servers respond with a status code and content such as HTML, CSS, JavaScript and images.
- HTML gives structure, CSS gives presentation and JavaScript gives behaviour.