Introduction
What You Will Build Today

By the end of this tutorial, you will have:

A live web server running inside Docker

Your custom HTML page served from a container

A persistent website that survives container death

Screenshots proving every step works

Time required: 20 minutes
Prerequisites: Docker installed (I will show you how to check)

Why Project-Based Learning

When I started learning Docker, I watched hours of videos and forgot everything. Then I switched to building real projects. This is Project 1 of 6 in my "Docker Zero to Hero" series.

Let me show you what I built, step by step.

Section 1: Verifying Docker

Step 1: Is Docker Alive?
First, I opened my terminal (PowerShell on Windows with WSL2 enabled).
command: docker --version
docker ps

The docker ps command showed an empty table - that is normal. No containers running yet.

What I learned: docker ps only shows RUNNING containers. Use docker ps -a to see all containers including stopped ones.

Section 2: Running Your First Container

Step 2: The 5-Second Web Server

Here is where the magic happened. I ran one command and got a production-grade web server.

Command:
docker run -d --name my-first-website -p 8080:80 nginx

Breaking down what this means:

Command part What it does
docker run Create and start a container
-d Run in background (detached mode)
--name my-first-website Give it a friendly name
-p 8080:80 Map my computer's port 8080 to container's port 80
nginx The image name (web server used by Netflix)

I got back a long container ID - that is proof it worked.

My container appeared in the list with status "Up".

Section 3: Seeing It in the Browser

Step 3: Opening Your Website
I opened my browser (Chrome) and went to:
http://localhost:8080

"Welcome to nginx!" appeared.

In 5 seconds, I deployed the same web server that runs Netflix, Airbnb, and Uber.

My reaction: This is insane. No Apache setup. No Nginx installation. No dependency hell.

What I learned: Containers package the application AND its dependencies together. That is why it "just works."

Section 4: Making It Your Website

Step 4: Modifying the Website
A default "Welcome to nginx" page is useless for real work. Let me change it to a maintenance page my boss would actually use.

First, I created my own HTML file:

echo "

My First Docker Project - Under Maintenance

Back at 9am.

" > index.html

Then I copied it into the running container:

docker cp index.html my-first-website:/usr/share/nginx/html/index.html

Refreshed my browser:

What I learned: docker cp works like regular cp - but it copies files INTO a running container. The path /usr/share/nginx/html/ is where nginx looks for web files

Step 5: Simulating a Crash
Here is where I learned the most important lesson about containers.

I stopped and removed my container:

docker stop my-first-website
docker rm my-first-website

Checked if it was gone:
docker ps -a

Refreshed my browser:

The page was dead. My custom HTML was gone forever.

Why? Containers are ephemeral - when they die, everything inside them dies too.

The problem: If I deployed a real app this way, a simple restart would wipe all my data. That is unacceptable for production.

Section 6: Fixing It with Volumes (Production Solution)

Step 6: Persistent Storage with Volumes
The solution is volume mounts - share a folder from MY computer with the container.

I created a dedicated project folder:

mkdir docker-project-1 && cd docker-project-1

Created a new HTML file:
echo "

PERSISTENT WEBSITE

This survives container death.

" > index.html

Ran the container with a volume mount (-v):

docker run -d --name persistent-site -p 8080:80 -v "$(pwd):/usr/share/nginx/html" nginx

What -v "$(pwd):/usr/share/nginx/html" means:

Part Meaning
-v Volume mount flag
"$(pwd)" My current folder on my computer
: Separator
/usr/share/nginx/html Folder inside the container
Translation: "Docker, mirror my computer's folder inside the container. When I change files on my computer, change them in the container too."

Refreshed my browser: