Welcome to our next lesson!
In the last session, we drew a crucial line between static and dynamic websites. We established that our project—a landing page—is a static site, meaning its content is fixed and delivered the same way to every visitor, much like a printed brochure or a finalized Figma mockup. The files for our site (HTML, CSS) are self-contained.
1. What We Are Learning
Today, we'll answer the question: "Once we have these files, where do they live, and how do we make them public?"
Our goal is to define hosting (renting space on a server) and deployment (making the site public). These are the final conceptual pieces you need before we can start setting up your developer toolkit.
2. Why This Matters
Understanding hosting and deployment is like knowing the difference between a design file on your computer and a live, shareable prototype link. One is private and local; the other is public and accessible to anyone with the address.
- Hosting is the "where." It's the secure, public place on the internet where your website's files will live.
- Deployment is the "how." It's the action of putting those files there.
For our project, knowing this helps you understand the final steps required to take your creation from a folder on your computer to a live website that you can share with the world.
3. Step-by-Step Instructions
Let's break these two concepts down.
Step 1: Defining Hosting – A Home for Your Website
Your website's files (HTML, CSS, images) need to live on a special, powerful computer that is always on and always connected to the internet. This computer is called a server. Since most people don't own and maintain their own servers, we rent space from companies that do. This service is called hosting.
To help you visualize this, let's use a couple of analogies.
This article uses an excellent analogy for a designer: it compares deploying a website to moving a painting from a private studio to a public gallery. Let's start here to understand the core idea.
Please read the first two sections, titled 'From Your Computer to the World' and 'Finding a Home for Your Website'. Focus on how it defines 'hosting' as renting space, using the analogy of a landlord and a plot of digital land.
The key takeaway is that hosting is like renting a plot of land on the internet where you can build your house (your website). The hosting company is the landlord who makes sure the land has power and road access (i.e., is connected to the internet).
Step 2: Defining Deployment – Making Your Site Public
Once you have your rented space (hosting), you need a way to move your website's files from your computer to that server. This process is called deployment.
Think of it as the moving day for your website. You're packing up all the files from your local "studio" and transporting them to the public "gallery."
There are two main ways to deploy a website:
-
The "Old" Way (FTP): This is like using a program to drag and drop your files from a folder on your computer to a folder on the server. It's manual and straightforward.
-
The "Modern" Way (Git-based): This is a more automated and powerful method, and it's what we will be using. You connect your hosting service to your project on GitHub (which we'll learn about soon). Whenever you "push" an update to your project, the hosting service automatically detects the change, grabs the new files, and updates your live website. This is called Continuous Deployment or CD.
This modern workflow is fantastic because it makes updating your site fast and reliable. The article you just read briefly touches on this.
Let's revisit the 'Deployment Basics' article to see how it describes this modern workflow.
Please read the section 'The Moving Process'. Focus on the description of the modern method using Git and hosting platforms like Vercel or Netlify. This is a preview of the exact workflow we'll use later in this course.
4. What Could Go Wrong?
The single most common point of confusion is mixing up hosting and a domain name.
- Hosting is the space where your site's files live (the house).
- A Domain Name is the address people use to find your site (the street address, like
www.google.com).
You need both to have a functioning website. A house is useless without an address, and an address is useless if it doesn't point to a house. We will cover domain names in detail in our very next lesson, but it's important to know they are two separate things.
5. Mini Exercise
Let's apply these concepts with a quick scenario.
Scenario: You've finished designing a landing page in Figma. You used an AI tool, and now you have a folder on your computer containing index.html, style.css, and an images folder. You want to make this page live so anyone can visit it.
Based on what you've just learned, answer these questions:
- You need to rent space on a server for your files to live online. What is this service called?
- The process of moving your
html,css, and image files from your computer to that online space is called what? - To allow people to find your site using a simple address like
www.mynewlandingpage.com, what would you need to acquire?
Think about your answers for a moment before checking the solutions below.
Solutions:
- This service is called hosting.
- This process is called deployment.
- You would need a domain name.
6. Checklist Before Moving Ahead
Make sure you're comfortable with these key ideas.
- I can explain what hosting is using the "renting space" or "house" analogy.
- I can explain that deployment is the action of moving files to a server to make a website public.
- I understand the difference between hosting (the space) and a domain name (the address).
- I know that our goal is to use a modern, automated deployment workflow.
Excellent work. We've now covered all the high-level concepts of how a website works, from the code itself to where it lives on the internet.
A Look Ahead: In our next and final lesson of this "Foundations" module, we'll zoom in on that last piece of the puzzle: the domain name. We'll explore how a human-friendly address like google.com directs a browser to the correct server anywhere in the world. After that, we'll be ready to start setting up your computer with the tools you need to build