Skip to content

Lab · Frontend Web Development

Lab: follow a web request from your laptop

Labbeginner· about 1 hour· 5 steps

The brief

Set up the folder every website starts from, then follow a real request the way a browser does: look up the IRCTC server's address, watch GitHub send you from http to https, read the response headers, and check it all again in DevTools.

Why it matters

When a client says "the site is not opening", a front-end developer checks the same things in the same order: does the name resolve, is there a redirect, what status and headers come back. Knowing this saves hours of guessing, and interviewers love the question "what happens when you type a URL?".

Skills you practise

  • a project folder structure
  • DNS lookups with nslookup
  • HTTP status codes and redirects
  • response headers with curl -I
  • the DevTools Network tab

You need

  • A computer with a terminal: Terminal on macOS or Linux, or PowerShell / Command Prompt on Windows 10 or 11 (curl.exe and nslookup are built in)
  • Chrome, Edge or Firefox

What you will have at the end

A my-site folder ready for the next modules, and notes.txt with the IRCTC IP address, the two status codes you saw and the headers you learned.

How it is marked (rubric, 100 points)
Everything checkedEvery pasted output passes: the folder, the DNS answer, the 301 and the 200 with its headers.50
Understands the journeyYou can explain, in order, DNS lookup, connection, request, redirect and response.30
Uses DevToolsYou can find a request's status, headers and timing in the Network tab.20

0/5 steps done

Step 1 of 5

Make the project folder

A folder my-site holds index.html, css/styles.css, js/app.js and an empty images folder.

Almost every website starts with the same layout: index.html at the top (the page a server sends for "/"), and folders for styles, scripts and images. Use small letters and no spaces in names, because URLs are case-sensitive on most servers and spaces turn into %20.

Make the folders and empty files in VS Code (New Folder, New File) or in the terminal, then list them.

mkdir -p my-site/css my-site/js my-site/images
touch my-site/index.html my-site/css/styles.css my-site/js/app.js
ls -R my-site
On Windows PowerShell, use mkdir and ni (New-Item) instead of touch, and list with: Get-ChildItem -Recurse -Name my-site
Run this on your machine, then paste the output below
$ ls -R my-site
Your notes: notes.txt

Write down each command you ran. It goes into your project summary.