All programming in the world is based on 6 concepts. Yes, only 6. They’re like basic building blocks: few pieces, infinite combinations. With these you can build anything, from Flappy Bird to SpaceX. Remember LEGOs? With the same blocks you can build a castle, a spaceship, or the Eiffel Tower. Programming works EXACTLY like that.
🧠 Everything else? They’re just creative combinations of these 6 pieces.
Imagine you’re moving. You have labeled boxes: “Books”, “Clothes”, “Fragile”. Variables are the same thing, but for data.
let userName = "Mario"; // Box "userName" contains "Mario"
let age = 25; // Box "age" contains 25
let hasLicense = true; // Box "hasLicense" contains true (yes)
Without variables you’d have to rewrite the same function for “Mario” and then the same for “Luigi” in your code. With a variable, you write once for “userName” and reuse everywhere. Like the label on the box: write once, always know what’s inside.
Absurd names: x, aaa, variable1, thing
It’s like labeling moving boxes with “Box 1”, “Box 2”. After two days you don’t know what’s inside anymore!
Clear names: userName, totalPrice, attemptCount
🚫 WRONG
"put the data in variables"
"use variables to save"
"make some variables"
✅ RIGHT
"Create variables to save:
- The user's name (text)
- The current score (number starting from 0)
- Whether the game is over (true/false)
Use clear names in English"
And remember: Some variables (var, let) can mutate. Others (const) will always hold the data you assign initially, and are immutable.
let score = 10;
// then when the game level is passed
let score = score + 10; // Add 10 to the current value of "score" --> 20
// the variable changes
const playerName = "Mario";
// then you try to update playerName
playerName = "Luigi"; // ERROR, the value of a "const" cannot be modified
You know when you have many labeled boxes? An array is an ordered list where you organize your boxes (variables) in order.
let shoppingList = ["Bread", "Milk", "Eggs", "Pasta"]; // List with 4 products
let lotteryNumbers = [4, 17, 23, 42, 66, 90]; // List with 6 numbers
let completedTasks = [true, false, true, true]; // List with 4 states
let fruits = ["Apple", "Banana", "Orange"];
fruits[0]; // "Apple" (first element)
fruits[1]; // "Banana" (second element)
fruits[2]; // "Orange" (third element)
Why from 0? It’s like the floors of a building: ground floor = 0, first floor = 1…
Fun Fact: Did you notice that the first module of this Crash Course is Module 0? 😎
// Add a drawer
fruits.push("Pear"); // Add to the end of the list
// Remove the last element from the list
fruits.pop(); // Remove the last one
// Count the elements in the list
fruits.length; // How many elements are in the "fruits" list?
// Search in the list
fruits.includes("Banana"); // Is there a banana? true/false
let colors = ["Red", "Green", "Blue"];
colors[3]; // ERROR! Doesn't exist (count from 0, so 0,1,2)
It’s the most common error. Remember: 3 drawers = positions 0, 1, 2.
🚫 WRONG
"put all the data in an array"
"make a list of elements"
"create array of things to show on screen"
✅ RIGHT
"Create an array called 'daysOfWeek' with:
- All days from Monday to Sunday
- A function that tells me what day it is today
- A way to check if today is weekend
Show how to access the first and last day"
Imagine you’re driving. You arrive at a fork and have to decide which road to take:
The program works the same way: it makes decisions based on a condition. If that condition is true, it follows one path; otherwise, it takes another.
// Check if the person is at least 18 years old
if (age >= 18) {
// If age is greater than or equal to 18
console.log("You can vote!"); // Log that they can vote
} else {
// Otherwise (age less than 18)
console.log("You're too young to vote"); // Log that they're too young
}
Like highway junctions, you can have multiple options: if.. else if.. else…
if (grade >= 30) {
// If the grade is greater than or equal to 30
console.log("Excellent! 🎉"); // Log an excellence message
} else if (grade >= 18) {
// Otherwise, if the grade is at least 18
console.log("Passed 👍"); // Log a passing message
} else {
// In all other cases (grade < 18)
console.log("Try again 💪"); // Encourage to try again
}
The concept of boolean variable is based on the switch concept: yes/no, true/false, on/off, 1/0, …
// BAD: The if maze
if (x) {
if (y) {
if (z) {
if (w) {
// Where did we end up?
}
}
}
}
If you get lost in nested ifs, it’s time to rethink the logic!
🚫 WRONG
"check if everything works"
"show different messages"
"verify the conditions"
✅ RIGHT
"Add a check:
- IF the score is greater than 100 → show 'You won!'
- ELSE IF it's greater than 50 → show 'Almost there!'
- ELSE → show 'Keep playing!'"
The washing machine always does the same cycle: fill water → wash → spin → drain. Loops do the same thing: they repeat actions.
// Repeat 5 times
for (let i = 0; i < 5; i++) {
// "i" equals 0; IF "i" is less than 5, DO console log and then add 1 to variable "i". Repeat.
console.log("Round number " + i); // Will run 5 times, when "i" = 5, the loop stops
}
// Repeat while...
while (waterCounter < 8) {
console.log("Drink a glass!");
waterCounter++;
}
// The "++" operator adds 1 to your variable's value. i++, waterCounter++, is like writing:
level = level + 1; // level++
// DISASTER: Never ends!
while (true) {
console.log("Help I'm stuck!");
}
You must have a clear condition that changes from “true” to “false”, otherwise it’s like a washing machine that never stops. The browser freezes, the computer cries.
🚫 WRONG
"make a cycle"
"iterate over data"
"process the elements"
✅ RIGHT
"Create a loop that:
- Shows numbers from 1 to 10
- For each number, if it's even add '(even)'
- If it's odd add '(odd)'
Use a simple for loop"
A carbonara recipe: you write it once, use it when needed. Functions are recipes for code.
// The recipe (definition)
function greet(name) {
return "Hello " + name + "! 👋";
}
// Using the recipe (calling the function)
greet("Mario"); // "Hello Mario! 👋"
greet("Luigi"); // "Hello Luigi! 👋"
function calculateDiscount(price, percentage) {
// "price" and "percentage" are the parameters you bring to your recipe (the ingredients)
let discount = price * (percentage / 100);
return price - discount; // return gives you back the result of the operation
}
// Use the recipe with different ingredients
calculateDiscount(100, 20); // 80 (20% discount)
calculateDiscount(50, 10); // 45 (10% discount)
// BAD: The do-everything function
function doEverything() {
// Calculate taxes
// Send email
// Make coffee
// Solve world hunger
}
One function = one task. Like in the kitchen: one recipe for pasta, one for dessert.
🚫 WRONG
"create a function"
"put in a function"
"use functions to do"
✅ RIGHT
"Create a function called 'calculateAge' that:
- Receives birth year as parameter
- Calculates age by subtracting from current year
- Returns the calculated age
- Add usage examples"
The doorbell: someone rings (event) → you go to open (action). Code works the same way.
// When you click the button → do something
button.onclick = function () {
alert("You clicked!");
};
// When you press a key → do something
document.onkeypress = function (event) {
console.log("You pressed: " + event.key);
};
// The event can tell you WHERE you clicked, WHEN, etc.
document.onclick = function (event) {
console.log("Clicked at X:" + event.clientX);
console.log("Clicked at Y:" + event.clientY);
};
// BAD: 100 buttons, 100 separate events
button1.onclick = function () {
/* ... */
};
button2.onclick = function () {
/* ... */
};
button3.onclick = function () {
/* ... */
};
// ... up to button100
There’s always a smarter way (event delegation, loops, etc.).
🚫 WRONG
"make something happen when I click"
"add interaction to the button"
"create some events"
✅ RIGHT
"Add these events:
- When I click the 'Calculate' button → execute the calculation
- When I hover over the image → show a tooltip
- When I press ENTER in the text box → submit the form
Use addEventListener for modern events"
Now comes the fun part. These 6 concepts combine like Power Rangers:
// ARRAY: list of things to do
let todoList = [];
// FUNCTION: recipe to add tasks
function addTask(task) {
if (task !== "") {
// IF: check it's not empty
todoList.push(task); // ARRAY: add to list
showTasks();
}
}
// FUNCTION: recipe to show all tasks
function showTasks() {
for (let i = 0; i < todoList.length; i++) {
// LOOP: for each element in the list
console.log(todoList[i]); // VARIABLE: access the element
}
}
// EVENT: when you click the button
button.onclick = function () {
let newTask = input.value; // VARIABLE: get the value
addTask(newTask); // FUNCTION: use the recipe
};
See? All 6 concepts in a 15-line todo app!
let lightOn = false;
function toggleLight() {
lightOn = !lightOn; // Invert true/false
}
let counter = 0;
function increment() {
counter++; // Add 1
}
function isValid(email) {
if (email.includes("@")) {
return true;
}
return false;
}
function search(list, element) {
for (let i = 0; i < list.length; i++) {
if (list[i] === element) {
return i; // Found! Return position
}
}
return -1; // Not found
}
Create a "Guess the Number" game that uses ALL 6 basic programming concepts:
1. VARIABLES: secretNumber (random 1-100), attempts (count)
2. IF/ELSE: check if the attempt is too high/low/correct
3. LOOP: continue until you guess
4. FUNCTION: 'checkAttempt' that verifies and gives feedback
5. ARRAY: save all previous attempts
6. EVENTS: button to submit the attempt
Start simple: basic HTML with input and button.
Then add the JavaScript logic step by step.
If possible, work in a single file I can view on screen. Otherwise give me instructions to create the files on my PC.
Comment for educational purposes on the concepts you're using.
(Warning: you might need to iterate with some debug prompts with your chatbot for everything to work, but don’t lose heart 💪 trial and error is part of the game).
🐣 Easter Egg: Did you find the IF/ELSE present in your own instructions?
You don’t need to:
You need to:
It’s like LEGOs: you don’t memorize every possible combination, but you know that with those 6 pieces you can build anything.
Before moving to Module 5 (advanced blocks), verify:
If you checked everything → Great! You have the basic tools to build anything
If something is unclear → Reread that section and ask your AI for more examples and further explanations
In Module 5 you’ll discover the “advanced blocks”: objects (the organized archive), async (one thing at a time or multiple things together), and other power user tricks. But with these 6 you already have everything necessary to create working apps!
Remember: Instagram, WhatsApp, and any app on your phone are just creative combinations of these 6 basic concepts. You now know them. The rest is just practice and creativity! 🚀
P.S. Fun fact: The first programmer in history was a woman, Ada Lovelace, in 1843. In that year computers didn’t even exist! She wrote the first algorithm for a machine (Babbage’s analytical engine) that was never even built. She did it with paper and pen. And she didn’t even have AI to help her!