Hi there, young coder! 🎉
Have you ever wanted to build your own website or app? Today, you’re going to learn how to make a simple web app—even if you’ve never coded before.
Let’s go step-by-step. We’ll build a “Fun Facts” web app that shows a new random fact every time you click a button!
🧰 Step 1: Tools You’ll Need
Before we write any code, let’s get our tools ready:
✅ A computer
✅ A code editor (We recommend VS Code)
✅ A web browser (like Chrome or Firefox)
🧱 Step 2: Create Your Project Folder
Make a new folder on your computer called:
fun-facts-web-app
Inside that folder, we’ll create three files:
index.html— for the web pagestyle.css— for the designscript.js— for the code that makes things happen
🌐 Step 3: Build the Web Page (HTML)
Open index.html in your code editor and paste this:
<!DOCTYPE html>
<html>
<head>
<title>Fun Facts App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>🎉 Fun Facts!</h1>
<p id="fact">Click the button to see a fun fact!</p>
<button onclick="showFact()">Show Me a Fact</button>
<script src="script.js"></script>
</body>
</html>
👉 This is your web page layout. It has a title, a message, and a button.
🎨 Step 4: Add Some Style (CSS)
Open style.css and paste this:
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f0f8ff;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
👉 This makes your page look colorful and friendly.
💻 Step 5: Make It Work (JavaScript)
Open script.js and paste this:
const facts = [
"A day on Venus is longer than a year!",
"Octopuses have three hearts.",
"Honey never spoils.",
"Bananas are berries, but strawberries aren't!",
"Sloths can hold their breath longer than dolphins."
];
function showFact() {
const randomIndex = Math.floor(Math.random() * facts.length);
const factElement = document.getElementById("fact");
factElement.textContent = facts[randomIndex];
}
👉 This is where the magic happens. When you click the button, it shows a random fun fact!
🚀 Step 6: Run Your Web App
Here’s how to see your creation:
Open the
fun-facts-web-appfolder.Double-click on
index.html.It will open in your browser. Click the button!
🎉 Boom! You’ve just built your first web app!
🧠 What You Just Learned
HTML: Builds the structure of your page.
CSS: Adds colors and styles.
JavaScript: Makes your page interactive.
💡 Bonus Ideas!
Want to make it even cooler? Try these:
Add more facts to your list.
Change the background color when you click.
Use an image or emoji next to each fact.
📦 Final Project Folder Structure
fun-facts-web-app/
├── index.html
├── style.css
└── script.js
You did it! 🎉
Now you’re not just a student—you’re a web developer!
Wanna build more? Let me know, and I’ll guide you to your next cool project. 🧑💻💡
