What a Web App Actually Is
The genie hands you 'a web app'. What is that, physically? Files. Just files, and a browser that reads them. Plus the three jobs every app does.
Last lesson the genie "made a web page". But what did it actually hand over? What IS the thing you built?
Here's the whole secret: a web app is a set of files that a browser reads and turns into something you can see and click. That's it. No magic box, no special machine.
Two quick glosses so we're speaking the same language. A file is a named chunk of text saved on a computer, like a document. A browser is the program you're probably reading this in right now (Chrome, Safari, Edge, Firefox): its entire job is reading web files and painting them onto your screen.
And those files? Plain text. Here is a complete, working web page, all six lines of it:
<html>
<body>
<h1>Book Club</h1>
<p>We meet on Thursdays.</p>
</body>
</html>The words in angle brackets, like <h1>, are labels that tell the browser what each piece IS: "this is a big heading", "this is a paragraph of text". The browser reads the labels, follows them, and shows you the words. It never shows you the labels themselves. You'll learn to read these properly in Module 2. For now, just soak in the big idea: everything the genie builds for you is text you could open and look at.
Here is that complete web page file. A browser opens it. What appears on the screen?
<html>
<body>
<h1>Book Club</h1>
<p>We meet on Thursdays.</p>
</body>
</html>- AA big heading reading Book Club, with a smaller line under it: We meet on Thursdays.
- BAll the text, including the angle-bracket labels like <h1> and <body>
- CNothing, because the file contains no design instructions yet
- DOnly the words Book Club, because browsers show one line at a time
Every web app, from a to-do list to a giant social network, does three jobs. Naming them will sharpen every wish you ever make:
- Content: what the page says. The words, images, and buttons that exist on it.
- Appearance: how it looks. Colors, sizes, fonts, where things sit.
- Behavior: what it does when you interact. What clicking, typing, or tapping causes.
When you want a change, it always lands in one of these buckets. "Add my email address to the page" is content. "Make the heading purple" is appearance. "When I click Next, show the next card" is behavior. Sorting your wishes this way is a habit that pays off for the rest of the course.
One more distinction while we're here. A website is something you mostly read: articles, photos, scrolling. A web app is something you interact with: it reacts to you, remembers things, changes as you use it. A recipe blog is a website; StudyDeck, with cards that flip when you click, is an app. The line between them is blurry, plenty of things are a bit of both, and that's completely fine. The word matters less than the habit of asking: what should this thing DO when someone uses it?
You send the genie this wish: "Make the button blue." Which of the three jobs is that wish about?
- AAppearance: it changes how the button looks, not what it says or does
- BBehavior, because buttons are things you click
- CContent, because the button is part of what's on the page
- DAll three at once, because every change touches everything
A recipe blog shows articles you scroll and read. StudyDeck shows cards that flip and change when you click. Based on this lesson, what's the clearest way to describe the difference?
- AThe blog is closer to a website (you mostly read it); StudyDeck is closer to an app (you interact and it responds); and the line between the two is blurry, which is fine
- BThe blog is not really on the internet, while StudyDeck is
- CA website is always free, while an app always costs money
- DA website is made of files, while an app is something other than files
- A web app is a set of files, plain text with labels, that a browser reads and turns into something you can see and click.
- The browser follows the angle-bracket labels and shows you the words, never the labels themselves.
- Every app does three jobs: content (what it says), appearance (how it looks), and behavior (what it does when you interact).
- Every wish you send the genie lands in one of those three buckets; sorting them makes your asks sharper.
- A website you mostly read; a web app you interact with. The line is blurry and that's fine.
Next: you watch StudyDeck get born. Four messages, one working app, and your first lesson in what happens when a wish is vague.