🌐 Lesson 1: Welcome to the Web

What Is the Web?

Every time you visit a website — whether it's a news article, a social media feed, or an online store — your browser is doing something remarkably simple behind the scenes: it's downloading text files from another computer and drawing what they describe on your screen.

That's it. That's the web. Text files on computers, connected by the internet.

The computer that stores those files is called a server (because it serves files to anyone who asks). Your computer — the one running the browser — is the client (because it requests those files).

When you type a web address (like www.example.com) into your browser and hit Enter, here's what happens:

1. Your browser sends a request over the internet to the server at that address
2. The server finds the requested files and sends them back as a response
3. Your browser reads those files and renders (draws) the page on your screen

The files your browser receives are primarily written in two languages: HTML and CSS. Those are the two languages you're about to learn.

HTML and CSS — The Two Languages

Think of building a web page like building a house:

HTML (HyperText Markup Language)

HTML is a markup language, not a programming language. That's an important distinction. It doesn't do calculations or make decisions — it simply labels content so the browser knows what each piece is.

For example, HTML lets you say:

• "This text is a heading"
• "This text is a paragraph"
• "This is an image"
• "This is a link to another page"

HTML uses tags — special keywords wrapped in angle brackets — to label content. Here's a sneak peek:

<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<img src="photo.jpg" alt="A photo">

Don't worry about memorizing this yet. You'll write plenty of HTML starting in the next lesson.

CSS (Cascading Style Sheets)

CSS controls how things look. Without CSS, every web page would look like a plain text document with blue underlined links — like the internet circa 1995.

CSS lets you say things like:

• "Make all headings dark blue and bold"
• "Give this section a light gray background"
• "Put these three items side by side"
• "On small screens, stack everything vertically"

Here's what CSS looks like:

h1 {
    color: darkblue;
    font-size: 2rem;
}

p {
    line-height: 1.6;
    max-width: 700px;
}

Again — don't memorize this. We'll cover CSS in depth starting in Module 3.

How Browsers Turn Code into Pages

Your web browser (Chrome, Firefox, Edge, Safari) is essentially a very sophisticated file reader. When it receives HTML and CSS files from a server, it goes through a process to turn that code into the visual page you see.

Here's the simplified version:

1. The browser reads the HTML and builds a structured representation of the page (this is called the DOM — Document Object Model — but you don't need to worry about that term yet)
2. It reads the CSS and figures out how each element should look
3. It combines the structure with the styles and paints the result on your screen

This all happens in milliseconds. Every time you visit a page, this process runs from scratch.

Front-End vs. Back-End

You'll sometimes hear people talk about "front-end" and "back-end" development. Here's the simple breakdown:

This course is 100% front-end. You'll learn HTML and CSS — the core languages that every web page is built with. No server required. No databases. No complicated setup.

In fact, the website you build in this course will be made entirely of static files — HTML pages and CSS stylesheets that don't need any server-side processing. That's what makes it possible to host them for free on Netlify in the final lesson.

What You'll Build in This Course

By the end of this course, you will have built a complete, multi-page website and published it live on the internet. Here's the journey:

• Module 1 (Lessons 1–4): Understand the web, try the messy way first, then set up proper tools and write your first real HTML page
• Module 2 (Lessons 5–9): Learn every major HTML element — headings, paragraphs, links, images, lists, tables, forms, and semantic structure
• Module 3 (Lessons 10–15): Learn CSS — colors, typography, spacing, Flexbox layout, Grid layout, and responsive design
• Module 4 (Lessons 16–19): Plan, build, and polish a complete multi-page website using everything you've learned
• Module 5 (Lessons 20–21): Test your site, fix issues, and publish it live on Netlify — for free

You'll walk away from this course with a live URL you can share with anyone. That's the goal. Let's get there.

Summary

🚀 What's Next?

In the next lesson, you'll get your hands dirty immediately. You're going to open Notepad (yes, plain old Notepad), type some HTML, and see it render in a browser. It'll be rough, it'll be ugly, and it'll be wonderful — because you'll realize just how simple the web really is at its core.