You've covered the internet, the frontend, the backend and the cloud. Cool. Now let's watch them all work together in real life, because by the end of this lesson you'll know what's happening behind every single click.
The Big Picture
Here's how the pieces fit together.
The Internet moves information between your device and servers
The Frontend runs on your device and shows you what's going on
The Backend runs on servers and does the heavy thinking
The Cloud is where those servers live and run
Let's follow a real example and catch all four in action.
Real Example: Buying a Book Online
Picture yourself buying a book from an online store. We're gonna follow your trip one step at a time.
Step 1. You Open the Website
You type www.bookstore.com into your browser.
What happens
Your browser uses the internet to send a request to the bookstore's servers
Those servers are running in the cloud (probably on AWS or Google Cloud)
The backend gets your request and gathers up the data for the homepage
It sends back files your browser uses to build the frontend, which is the page you see
Step 2. You Search for a Book
You type "learn to cook" into the search box and hit Enter.
What happens
The frontend grabs what you typed
It sends your search through the internet to the servers
The backend digs through a database of thousands of books
It finds matches and sends the results back
The frontend shows you the list of cooking books
Step 3. You Click on a Book
You spot "Simple Cooking for Beginners" and click it.
What happens
The frontend notices your click
It asks the backend for details on that exact book
The backend looks up the title, price, reviews and availability
The frontend shows you the book's page with all of that info
Step 4. You Add to Cart
You click "Add to Cart."
What happens
The frontend sends an "add to cart" request to the backend
The backend saves it to your shopping cart (stored in a database in the cloud)
It confirms the item got added
The frontend updates to show "1 item in cart"
Step 5. You Checkout
You click "Checkout" and type in your payment info.
What happens
The frontend collects your address and card number
It sends that securely over the internet to the backend
The backend connects to a payment processor (also in the cloud)
The payment gets verified and the order is saved to the database
A confirmation email goes out (using yet another cloud service)
The frontend shows "Order Confirmed!"
Visualizing the Flow
Here's a simplified picture of what just happened.
Every action you take follows this path, from your device, through the internet, to the cloud servers. The arrows show your request heading out, and the response makes the same trip back the other way to land on your screen.
Another Example: Posting on Social Media
Let's speed-run one more example, posting a photo on social media.
Your Action
Frontend
Internet
Backend (Cloud)
Open app
Shows your feed
Fetches latest posts
Gets posts from database
Take photo
Opens camera
-
-
Add filter
Applies filter visually
-
-
Type caption
Captures text
-
-
Hit "Post"
Shows "Posting..."
Sends photo + caption
Saves photo to storage, saves post to database
See confirmation
Shows "Posted!"
Receives success message
Updates your profile
Friend sees it
Their app shows your post
Delivers post to friend
Sends your post data
Fun fact, this applies to the stuff I build too. Seedly CRM's backend runs on Convex, which is a cloud service... so yes, even the own-your-tools guy is running on somebody else's computers (the code is mine, the servers are rented).
Where Things Can Go Wrong
Knowing how it all connects also helps you figure out what broke when something breaks.
Why This Matters for You
You don't have to build any of this yourself. So why bother learning it?
Talk to tech teams confidently - You can describe problems accurately ("Is this a frontend or backend issue?")
Understand what's possible - You'll know what can be built and roughly how hard it is
Use AI tools better - When you ask Claude Code to build something, you'll actually get what it's making
Make better decisions - Pick the right tools and services for what you need
Congratulations!
You finished the Foundations module! Here's everything you've got under your belt now.
What code is - Instructions for computers
How the internet works - Requests and responses traveling between devices
Frontend vs backend - What you see vs. what happens behind the scenes
The cloud - Servers owned by others that run our software
How it all connects - The complete picture of modern web applications
TL;DR
Every web action has the frontend, backend, internet and cloud working together
Data flows from your device, through the internet, to cloud servers, and back
Understanding that flow helps you troubleshoot problems and talk to technical folks
You don't have to build this yourself, but knowing how it works makes you way more effective
What's Next?
Next module you're getting hands-on with Claude Code. You'll learn how to talk to it, give it instructions and start building real things, using everything from this module as your foundation...
