Week 1: HTML Fundamentals & Internet Basics Available

Monday, September 29 & Wednesday, October 1, 2025

Week Overview: This week we build our foundation in HTML while exploring how the internet works. You'll create your first web pages using GitHub Codespaces and deploy them with Netlify.

Theme: Understanding the Internet & HTML Foundations

Learning Objectives

  • Understand the difference between the Internet and the Web
  • Write semantic HTML from scratch
  • Set up and use GitHub Codespaces for development
  • Create and link multiple HTML pages
  • Deploy a live website with Netlify
  • Analyze web design evolution through history

Designer-Coder Lens

Designer Focus

Creating mood boards in Figma 101, analyzing website evolution through design lens, understanding how visual trends shape user experience over time, connecting domain names to brand identity

Coder Focus

Understanding IP addresses and DNS as the foundation of web architecture, analyzing how technical infrastructure affects user experience, connecting domain structure to website organization

The Connection: When you analyze a website's evolution from its earliest archived version to today, you're seeing both technical progress (faster DNS, better hosting) and design evolution (visual trends, UX improvements) working together. Your mood board skills help you identify visual patterns, while understanding IP/DNS helps you grasp the technical foundation that makes those designs possible.

Day 1: The Internet, DNS, IPs Oh my! Monday, Sept 29

Opening: Programming is NOT Easy 10:00-10:15 AM

Setting Realistic Expectations: Feeling overwhelmed is normal. You are not stupid!
  • Start with Kate Ray's "Programming is Easy" slides
  • Discuss the Dunning-Kruger effect in learning to code
  • Review the confidence vs. competence curve
  • Tips for success: Take notes, tackle challenges, understand before moving on

Part 1: How the Internet Works 10:15-11:15 AM

Video Marathon - Watch Together & Discuss:

1. How the Internet Works in 5 Minutes (10:15-10:25 AM)
2. Don't Fear the Internet - Not Tubes (10:25-10:40 AM)
  • View Tutorial
  • Framework for understanding the web as documents
  • What is a website on a practical level?
3. A Packet's Tale (10:40-10:55 AM)
  • Watch on YouTube
  • Visual journey of how data travels
  • Understanding routing and packet switching

Quick Discussion (10:55-11:15 AM)

  • Internet vs. Web - what's the difference?
  • Networks of networks concept
  • Brief preview of submarine cables map

Part 2: IP Addresses, DNS & Domains 11:15 AM-12:00 PM

Understanding Addresses on the Internet

Key Concepts (Lecture with Slides):
  • IP Addresses: Every device's unique identifier (like 91.198.174.192)
  • Domains: Human-readable names (wikipedia.org)
  • DNS: The phonebook of the internet
  • URL Structure: protocol://domain/path

Interactive Demo: Traceroute

traceroute google.com
Instructor Script: Each line is a 'hop'—a router or server that our request passes through. Watch for geographic jumps and time increases!

Try it yourself: GSuite Traceroute Tool

Resources:

Hands-On Activities:

  1. Find IP Addresses:
    • Visit IP Lookup Tool
    • Look up your favorite website
    • Record the IP address(es)
  2. Trace Geographic Location:
    • Visit IP Location Tool
    • Enter: 171.67.215.200 (Stanford's IP)
    • Screenshot the results
  3. Discover Your IP:
    • Google "what is my IP"
    • Is it IPv4 or IPv6?
    • What location does it reveal?

Part 3: Web History & Evolution 12:00-12:20 PM

Quick Timeline Review:

  • ARPANET to Internet evolution
  • Tim Berners-Lee and the birth of WWW (1989)
  • FTP vs HTTP - why the web won
  • Browser wars and standardization
  • From 1 website (1991) to 2 billion today
Key Takeaways:
  • The web is just 35 years old!
  • HTML as the foundation
  • Evolution driven by user needs
  • Standards bodies: W3C and WHATWG
Reflection: Write 150-300 words on DNS, IP addresses, and privacy implications

Complete Week Information

You can find this week's complete information, assignments, and resources in:

Milanote Board

All week content, assignments, and visual resources

View Milanote Board

Canvas Course

Assignment submissions and gradebook

Go to Canvas

Micro-Theory Concepts

The Internet vs. The Web

Before we build, let's understand the foundation:

  • The Internet: The global network of connected computers—the infrastructure
  • The World Wide Web: The information system that runs on top, connected by links
  • DNS & IP: How domain names (google.com) map to IP addresses (142.250.80.46)
  • HTTP: The protocol that transfers web pages from servers to browsers

Think of it like this: The Internet is the road system, the Web is all the buildings you can visit.

How Browsers Read Your Code

When you type a URL and hit enter, here's what happens:

  1. Your browser sends a request to a server
  2. The server sends back an HTML file (just text!)
  3. The browser reads it top to bottom, like a recipe
  4. Each tag tells the browser what to display
  5. The browser paints pixels on your screen