Lesson Title: Introduction to Web Development and How Websites Work
Time: 60–75 minutes | Tone: Friendly and clear
Goal: Learn what websites are, how they work, and build your first page. Then use Python to serve a page on your own computer.
Learning Goals
By the end of this lesson, you will be able to:
- Explain what happens when you visit a website.
- Describe the roles of HTML, CSS, and JavaScript.
- Tell the difference between frontend, backend, and a database.
- Identify the parts of a URL.
- Build a simple web page.
- Use Python to serve a page locally (and optionally try a tiny Flask server).
Materials
- A computer with Python 3 installed
- A simple text editor (Notepad, TextEdit, VS Code, etc.)
- A web browser (Chrome, Firefox, Edge, or Safari)
- Internet connection (only needed for installing Flask in the optional part)
Key Words (Plain Language)
- Internet: The global network that connects computers.
- Web: The part of the internet with websites and web pages.
- Browser: The app you use to visit websites (Chrome, Firefox, etc.).
- Client: Your device (and browser) that asks for web pages.
- Server: A computer that stores websites and sends them to clients.
- URL: The web address you type (like https://pyverse.com/learn).
- HTTP/HTTPS: The rules (protocols) for how browsers and servers talk. The S means "secure."
- HTML: The structure of the page (headings, paragraphs, images).
- CSS: The style of the page (colors, layout, fonts).
- JavaScript: The behavior on the page (interactivity).
- Frontend: What you see and interact with in the browser.
- Backend: The server side, often using Python or other languages.
- Database: A place to store data (users, scores, posts).
- Static page: Same content for everyone.
- Dynamic page: Content can change based on data or user input.
Warm-Up (2 minutes)
Question: When you type a web address and press Enter, what do you think happens?
- Think quietly for 30 seconds.
- Share one idea with a partner or write it down.
How the Web Works (The Big Picture)
Imagine ordering a pizza:
- You (the client) ask for a pizza (a web page).
- The restaurant (the server) receives the order.
- The chef cooks it (the server processes your request).
- A pizza is delivered to you (the server sends back a web page).
In web terms:
- You type a URL in your browser.
- Your browser finds the server for that website.
- It sends a request using HTTP/HTTPS.
- The server receives the request and decides what to send back.
- The server sends a response (HTML, CSS, JavaScript, images).
- Your browser displays the page.
That's the request–response cycle.
What Is a URL?
Example: https://pyverse.com/learn?page=1
https://is the protocol (how to talk; HTTPS is secure).pyverse.comis the domain name (easy name for a server's address)./learnis the path (which page on the site).?page=1is a query string (extra info to customize the response).
What Is a Web Page Made Of?
- HTML (HyperText Markup Language): The structure and content.
- CSS (Cascading Style Sheets): The look and design.
- JavaScript: Makes pages interactive.
Think: HTML = bones, CSS = clothes, JavaScript = muscles.
Frontend, Backend, and Database
- Frontend: Runs in your browser. Built with HTML, CSS, JavaScript.
- Backend: Runs on the server. Can be written in Python (Flask, Django), etc.
- Database: Stores information (like users and posts). The backend talks to it.
Static vs Dynamic:
- Static: Same page for everyone (like a poster).
- Dynamic: Page changes based on data or user (like a personal dashboard).
Hands-On: Build Your First Web Page (HTML + CSS)
Goal: Make a simple, styled home page that runs on your computer.
Step 1: Create the HTML file
- Open your text editor and paste the code below.
- Save the file as
index.htmlon your Desktop (or any folder you like).
Code (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Simple, readable styles */
body {
font-family: Arial, Helvetica, sans-serif;
background: #f5f8ff;
color: #222;
margin: 0;
padding: 24px;
}
.card {
background: #ffffff;
max-width: 720px;
margin: 0 auto;
padding: 20px 24px;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
h1 {
color: #2a6cf4;
margin-top: 0;
}
p {
line-height: 1.6;
}
a {
color: #1a7f37;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
padding-left: 18px;
}
.tag {
display: inline-block;
background: #e9f0ff;
color: #2a6cf4;
padding: 4px 8px;
border-radius: 999px;
font-size: 12px;
margin-right: 6px;
}
</style>
</head>
<body>
<div class="card">
<h1>Hello, Web!</h1>
<p>Welcome to my first web page. This page uses <strong>HTML</strong> for structure and a little <strong>CSS</strong> for style.</p>
<h2>Things I Will Learn</h2>
<ul>
<li>How the internet works</li>
<li>HTML, CSS, and JavaScript basics</li>
<li>Python for the backend</li>
</ul>
<p>Want to explore more? <a href="https://www.python.org/" target="_blank" rel="noopener">Visit Python.org</a></p>
<p>
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">Python</span>
</p>
</div>
</body>
</html>Step 2: Open it in your browser
- Double-click
index.htmlto open it. - You should see a nicely styled page with headings and a list.
If you can see the page, congratulations! You just made a static web page.
Serve Your Page With Python (No Install Needed)
Goal: Use Python's built-in simple server to host your page locally.
Step 1: Open a terminal/command prompt
- Windows: Press Windows Key, type "cmd", and open Command Prompt.
- Mac: Open Terminal (Applications > Utilities).
- Linux: Open your terminal app.
Step 2: Go to the folder with index.html
Example: if it's on your Desktop:
Windows:
cd %USERPROFILE%\DesktopMac/Linux:
cd ~/DesktopStep 3: Start the server
Run one of the following commands (choose the one that works on your system):
python -m http.server 8000or
python3 -m http.server 8000Step 4: Visit your local site
- Open your browser and go to
http://localhost:8000 - Click
index.htmlif needed. - To stop the server, go back to the terminal and press
Ctrl + C.
What just happened?
- Your computer acted as a server.
- Your browser (client) made a request to
http://localhost:8000. - Python's simple server responded with your
index.htmlfile.
Optional: A Tiny Dynamic Website With Python (Flask)
Goal: Send a page from Python code (dynamic).
Install Flask:
Windows:
py -m pip install flaskMac/Linux:
python3 -m pip install flaskCreate app.py
(in the same folder as your index.html, or any folder you like):
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "Welcome to my Python website
This page is sent by a Python server.
"
@app.route("/hello/<name>")
def hello(name):
# Capitalize the first letter to make it look nice
return f"Hello, {name.capitalize()}!
Welcome to Flask.
"
if __name__ == "__main__":
app.run(debug=True)Run your Flask server:
- In the terminal:
- Windows:
py app.py - Mac/Linux:
python3 app.py
- Windows:
- Open
http://127.0.0.1:5000in your browser. - Try
http://127.0.0.1:5000/hello/sky
What's dynamic here?
The page changes based on the name in the URL (that's dynamic content).
How Files Become a Website (Hosting)
To share your site with the world:
- You need a domain name (like mysite.com).
- You need hosting (a server on the internet).
- You upload your files to the host.
- The domain points to your server's IP address.
- Then anyone can visit your site using the domain.
For now, using localhost is perfect for learning.
Debugging Tips
- If the page looks blank:
- Check that your HTML file is named
index.html(or open the correct file). - Make sure your tags are closed (
</h1>,</p>, etc.).
- Check that your HTML file is named
- If the Python server won't start:
- The port might be busy. Try another port number, like 8001.
- Check your Python command:
pythonvspython3vspy(Windows).
- If Flask won't run:
- Make sure Flask installed correctly (
pip install flask). - Run the file from the folder where
app.pyis saved.
- Make sure Flask installed correctly (
Practice Tasks
Task 1: Customize Your Page
- Change the h1 text to your name.
- Add an image to your page using HTML:
<img src="https://picsum.photos/400" alt="Random image"> - Add a new "tag" badge (like "JavaScript").
Task 2: Add a Second Page
- Create a new file
about.htmlwith a heading and a short paragraph. - In
index.html, add a link:<a href="about.html">About This Site</a> - Open it in the browser and test the link.
Task 3: Dynamic Flask Greeting (Optional)
- Use the Flask
/hello/<name>route. - Try your name and a friend's name.
- Add another route,
/about, that returns a small paragraph about you.
Extension (Curious Minds)
- View Page Source: Right-click your page in the browser and choose "View Page Source." Spot the HTML tags you wrote.
- DevTools: Press F12 or right-click and choose "Inspect" to see the Elements panel.
- Learn more tags: Try
<strong>,<em>,<ol>,<blockquote>, and<hr>.
Summary
- The web works using a request–response cycle between clients (browsers) and servers.
- URLs are addresses with a protocol, domain, and path.
- HTML, CSS, and JavaScript each have a job: structure, style, and interactivity.
- Frontend happens in the browser, backend happens on the server, and databases store data.
- You built your first page and served it locally with Python. Great job!