webdev.complete
🌍 How the Web Actually Works
🧱Foundations
Lesson 2 of 117
15 min

DNS, Domains, and Hosting

How example.com becomes pixels on your screen.

Nobody types 142.250.193.46 into a browser. We type google.com. Something in between translates one to the other, and that something is DNS- the internet's phone book. It's also the part most likely to break the night you ship your portfolio.

What DNS actually is

The Domain Name System is a globally distributed key-value store. The keys are domain names (example.com). The values are records that tell the world things like "here's my IP address" or "send my mail to this server." When you visit a site, your computer asks DNS "what's the address for this name?" and DNS answers. Usually in under 50 milliseconds.

Mental model
DNS is a tree, not a list. Reading right to left: com is the root region, example.com is a city in it, and www.example.com is a street in that city. Each level delegates to the next.

The four levels of resolution

When your browser needs to resolve www.example.com, it walks down the tree. Four players are involved:

  1. Recursive resolver- usually your ISP's DNS or a public one like 1.1.1.1 (Cloudflare) or 8.8.8.8 (Google). It does the legwork for you.
  2. Root nameservers- 13 logical servers that know where TLDs live. The resolver asks: "who handles .com?"
  3. TLD nameservers - they handle a specific top-level domain like .com or .io. The resolver asks: "who handles example.com?"
  4. Authoritative nameserver - the source of truth for that specific domain. It answers with the final IP. This is the server you (or your host) actually control.

The result gets cached at every layer along the way so we don't repeat the whole dance for every page load.

Record types you'll touch

A domain isn't just one IP. It's a bundle of records, each with a type:

  • A - maps a name to an IPv4 address. The most common one.
  • AAAA("quad-A") - maps to an IPv6 address.
  • CNAME - an alias. Says "www is really example.com." Resolver follows the chain.
  • MX - mail exchange. Tells the world which servers accept email for this domain.
  • TXT - arbitrary text. Used for domain verification, SPF/DKIM (anti-spam), and a hundred other tricks.
  • NS- nameserver. Says "the authoritative servers for this domain are these." This is what your registrar sets.
CNAME at the apex is forbidden
You can't put a CNAME on the root domain (example.com with no www). The spec disallows it. Hosts like Vercel give you an "ALIAS" or A record for the apex instead.

A live lookup with dig

dig is the diagnostic tool every web dev should know. It shows you DNS as it actually is, not as a dashboard summary.

bash
$ dig example.com

;; QUESTION SECTION:
;example.com.            IN  A

;; ANSWER SECTION:
example.com.    3600    IN  A   93.184.216.34

;; AUTHORITY SECTION:
example.com.    86400   IN  NS  a.iana-servers.net.
example.com.    86400   IN  NS  b.iana-servers.net.

;; Query time: 12 msec
;; SERVER: 1.1.1.1#53

Read the answer section: example.com has an A record pointing to 93.184.216.34. The 3600 is the TTL - how many seconds resolvers may cache this answer before checking again.

TTL: the part that ruins your evening

TTL stands for "time to live." A 3600 TTL means caches keep the answer for an hour. Set TTL low (60-300 seconds) when you're about to migrate. Set it high (86400) once you're stable. The nasty trap: you update a record at 5pm, then spend two hours wondering why nothing changed. The answer is usually that some resolver somewhere is still serving the cached value until its TTL expires.

Registrar vs nameserver vs host (the three things people confuse)

  • Registrar- who you bought the domain from (Namecheap, Cloudflare Registrar, Porkbun, Google Domains' replacement). They handle billing and let you set NS records.
  • Nameserver - the DNS provider that holds your records. Often the registrar (Cloudflare does both) but not always. You can register at Porkbun but host DNS at Cloudflare.
  • Host - where your app actually runs (Vercel, Netlify, your own server). Hosts give you an IP or a hostname to point DNS at.

Pointing a domain at Vercel

Concrete example. You bought my-site.com at Namecheap and you want it on Vercel. The flow:

  1. In Vercel, add the domain to your project. Vercel shows you which DNS records to set.
  2. For the apex (my-site.com): add an A record to 76.76.21.21.
  3. For www: add a CNAME to cname.vercel-dns.com.
  4. Wait. TTL is usually 5-30 minutes. Sometimes longer at the edges.
  5. Vercel detects the records, issues a TLS certificate via Let's Encrypt automatically, and you're live on HTTPS.
HTTPS for free, thanks to Let's Encrypt
Let's Encrypt is a non-profit that issues TLS certificates at no cost. Hosts like Vercel, Netlify, and Cloudflare automate the whole process - you do nothing, and you get the padlock. Ten years ago, this cost real money and took a week.

Quick quiz

Quiz1 / 4

Which record type maps a name to an IPv4 address?

Recap

  • DNS turns names into IPs. The tree resolves root → TLD → authoritative → cache.
  • Common records: A (IPv4), AAAA (IPv6), CNAME (alias), MX (mail), TXT (verification, SPF/DKIM), NS (nameservers).
  • TTL controls how long caches keep an answer. Lower it before migrations.
  • Registrar sells the domain. Nameserver holds the records. Host runs the app. Often three different services.
  • Hosts like Vercel auto-issue HTTPS certs via Let's Encrypt once DNS points at them.