Frontend development

Stage 1 · Lesson 1 of 9

From URL to page: DNS, TCP, TLS and HTTP

How the web works, HTML and CSS

When you type a web address (a URL), the browser first asks , the internet's phone book, for the server's IP address. It then opens a TCP connection, a reliable line to that server. For it adds a TLS handshake, where both sides agree how to encrypt what they send.

Only then does it send an HTTP request and wait for the response. The HTML that comes back is read top to bottom, and every stylesheet, script, image and font it mentions starts another request. The steps the browser takes to turn all of this into pixels are called the .

Knowing makes later work make sense. A slow page is usually slow DNS, too many , a stylesheet that blocks rendering or a huge image, not slow JavaScript.

Common traptreating the browser as magic, then having no idea where to look when a page is blank or slow.

A question to check yourself, an AI practice session and 4 cheat sheet entries come with the full roadmap. Unlock

Resources for this stage

Start with· follow one of these

  • CourseFree
    The Odin Project

    The Odin Project · Beginner

    Foundations course: HTML, CSS and the web built in your own editor, not a sandbox

  • GuideFree
    web.dev

    Google · Intermediate

    Free Learn HTML, Learn CSS and Learn Accessibility courses explain the why behind layout

Practise

  • Real designs to rebuild, which is where CSS layout finally sticks

Keep handy

  • The reference for every HTML element and CSS property, with browser support notes

  • Quick syntax lookups and try it editors when you only need a reminder

Also worth your time

Mark this stage as not done?