A website is like a house: it has a structure (HTML), furnishings (CSS), and systems that make it work (JavaScript). The browser is the construction company that transforms these “blueprints” into something you can see and use. The code files live in folders on your computer, and localhost is like your private construction site where you build before going online.
🧠 We’ll go deeper into other terminology as we go!
Imagine building a house. You wouldn’t start with furniture or curtains, right? There’s a logical order, and websites work the same way.
The walls, rooms, doors. Without structure you don’t have a house, you have a pile of furniture exposed to the elements. On the web:
<!-- This is HTML: the structure -->
<div class="room">
<h1>Living Room</h1>
<button>Turn on light</button>
</div>
<!-- Open a div (a small container) "room" -->
<!-- Put a title (h1) "Living Room" -->
<!-- Put a button "Turn on light" -->
<!-- Close the div with class "room" -->
Wall colors, furniture, decorations. Makes the house livable and beautiful.
/* This is CSS: the style */
.room {
background-color: beige;
padding: 20px;
}
button {
background-color: yellow;
border-radius: 10px;
}
Electricity, water, heating. Make the house functional. On the web:
// This is JavaScript: the interaction
button.onclick = function () {
alert("Light on!");
};
You know when you go to IKEA instead of building furniture from scratch? “Frameworks” (React, Vue, Angular, …) are kind of like that: pre-assembled furniture to build faster. Let’s ignore them for now. Better to start with the basics and when you’re comfortable you can choose the expert tools.
The browser (Chrome, Firefox, Safari…) is like a super efficient construction company that:
The cool part? The same “floor plan” (code) works with all the “companies” (browsers) in the world! Chrome, Firefox, Safari… they all know how to read the same blueprints and build the same house.
Code doesn’t float in cyberspace. It lives in normal files on your computer, organized in folders.
my-webapp/
├── index.html (the starting point)
├── style.css (all the styles)
├── script.js (all the logic)
└── images/ (folder for images)
└── logo.png
It’s like organizing household documents:
index.html = always the main file (like the front door).html = structure files.css = style files.js = JavaScript filesstyle.css not my-super-beautiful-style-v2-final-FINAL.cssWhen you build a house, you don’t invite people right away. First you build it privately, then you have the grand opening. Localhost is exactly that: your private construction site.
http://localhost:3000 (or other numbers)Local development (localhost) → Test → Publish → Live site (www)
↑ ↑
Only you see it Everyone sees it
“I finished the site! Here’s the link: localhost:3000”
No! Localhost is ONLY on YOUR computer. It’s like saying “come to dinner at my place” and giving “my living room” as the address.
index.html file⚠️ Limitation: Some features don’t work this way
🚫 WRONG
"fix the css"
"make the site responsive for mobile"
"add javascript"
"make it more modern"
✅ RIGHT
"Create a basic HTML page with:
- An h1 title that says 'My first webapp'
- A welcome paragraph
- A blue button with rounded corners
- When I click the button, change the paragraph text
- CSS inside the HTML file, in the <style> tag
- JavaScript too, in the <script> tag
Comment the code for a beginner"
A site or web app is:
It really is that simple. There’s no black magic, no superpowers needed.
Let’s build a “digital house”
smart-houseindex.html fileCreate a complete HTML page that simulates a smart house with:
- Title "My Smart House"
- 3 rooms (divs) with different names
- Each room has a button to turn the light on/off
- When I click, the room's background changes color
- Use HTML, internal CSS and inline JavaScript
- Comment everything for a beginner
Ask the AI to add:
🧠 You don’t need to:
🎯 You need to:
What you’ve learned mainly applies to websites. But there are also:
In Module 6 we’ll see the differences. For now, focus on the web: it’s the simplest way to start and the basic concepts are the same everywhere!
Before going to the next module, make sure you:
If you checked everything → Great! You’re ready to learn how to “talk” better with AI
If something’s unclear → no worries! Re-read that section or ask AI to explain with other examples, it takes practice and experiments to get comfortable.
In Module 2 you’ll learn the art of giving clear instructions to AI. Spoiler: “make it pretty” isn’t a clear instruction. But “I want blue buttons with rounded corners that change color on hover” is!
Remember: every developer started with a “Hello World” that didn’t work. You already have your smart house. You’re making great progress! 🚀