JavaScript Day 1
Great—this is exactly the best way to learn JavaScript: step-by-step + building real projects. I’ll guide you like a mentor from beginner → professional level, with a clear roadmap and projects at each stage.
🚀 Complete JavaScript Learning Path (Beginner → Pro)
We’ll follow this structure:
🔹 Phase 1: Fundamentals (You are here)
Learn core concepts while building small projects
🔹 Phase 2: Intermediate
DOM, events, APIs, async JS
🔹 Phase 3: Advanced
Closures, OOP, modules, performance
🔹 Phase 4: Professional Level
Frameworks (like React), backend (Node.js), real-world apps
🧠 PHASE 1: JAVASCRIPT FUNDAMENTALS
DAY 1: JavaScript Basics + First Project
✅ What is JavaScript?
JavaScript is a programming language used to:
- Make websites interactive
- Build web apps, servers, mobile apps
🧩 1. Your First JavaScript Code
<script>
console.log("Hello, World!");
</script>👉 Open browser → Inspect → Console → See output
🔢 2. Variables (Store Data)
let name = "John";
const age = 25;
var country = "USA";let → can change
const → cannot change
var → old way (avoid)
➕ 3. Data Types
let text = "Hello"; // String
let number = 10; // Number
let isTrue = true; // Boolean
let empty = null; // Null
let notDefined; // Undefined🔄 4. Operators
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a > b); // true🔀 5. Conditions (Decision Making)
let age = 18;
if (age >= 18) {
console.log("You are an adult");
} else {
console.log("You are a minor");
}🔁 6. Loops
for (let i = 1; i <= 5; i++) {
console.log(i);
}⚙️ 7. Functions
function greet(name) {
return "Hello " + name;
}
console.log(greet("Kwizera"));🛠️ 🧪 MINI PROJECT 1: Simple Calculator
👉 You MUST build this yourself (very important)
<!DOCTYPE html>
<html>
<body>
<h2>Simple Calculator</h2>
<input id="num1" type="number">
<input id="num2" type="number">
<button onclick="add()">Add</button>
<p id="result"></p>
<script>
function add() {
let n1 = Number(document.getElementById("num1").value);
let n2 = Number(document.getElementById("num2").value);
let result = n1 + n2;
document.getElementById("result").innerText = result;
}
</script>
</body>
</html>🎯 YOUR TASK (IMPORTANT)
Before we move to Day 2:
✅ Do this:
- Run the calculator
- Add:
- Subtract button
- Multiply button
- Divide button
DAY 2 (Next Step – After You Finish)
We will learn:
- DOM (how JS controls HTML)
- Events (click, input)
- Project: To-Do List App
⚡ Pro Developer Mindset (Important)
Don’t just read—build and struggle.
✔ Make mistakes
✔ Debug errors
✔ Try without looking at solution
This is how real developers grow.
q0wn3s