Chapter 0: Getting Started

What is programming? Let's set up your computer and write your very first code.

What is Programming?

Full Stack

First JavaScript

First HTML

Quiz

What is Programming?

You give instructions to people every day: "Go straight, turn left, stop at the bakery." Programming is the same thing — but you're giving instructions to a computer instead of a person. The only difference? You write them in a programming language (like JavaScript) instead of English.

A program is just a list of instructions. Here's what a simple program looks like in plain English vs JavaScript:

Plain English	JavaScript Code
Show the text "Hello!"	`console.log("Hello!")`
Remember that the user's age is 25	`let age = 25`
If age is 18 or more, show "You can vote"	`if (age >= 18) { console.log("You can vote") }`

Don't worry about understanding the code yet — you'll learn all of this step by step!

What is Full Stack?

Think of a website like a restaurant:

🍽️ Frontend = The dining area (what customers see — tables, menu, decor)
👨‍🍳 Backend = The kitchen (where food is prepared — customers don't see this)
📦 Database = The pantry (where ingredients are stored)

Full Stack means you learn to build ALL three parts.

Our Tools (Tech Stack)

Part	Tool	What it Does
Frontend	HTML	Structure of pages (the skeleton)
Frontend	CSS	Styling (the skin, clothes, colors)
Frontend	JavaScript	Interactivity (the brain)
Frontend	React	A tool for building UIs faster
Backend	Node.js	JavaScript running on a server
Backend	Express	Makes building servers easier
Database	PostgreSQL	Stores your data in organized tables
Database	Sequelize	Talk to the database using JavaScript

Your First JavaScript Code!

console.log() is how you print messages in JavaScript. It's like saying "Computer, show this on screen!" Try it below — edit the code and click Run:

🎯 Try It Yourself!

Read the code below
Click the green ▶ Run button to see the output
Change "Hello, World!" to your own name
Click Run again to see YOUR message
Try adding a new line: console.log(2 + 2);

JavaScript — Press Ctrl+Enter to run

// This is a comment — the computer ignores it
// Comments help humans understand the code

// console.log() prints a message to the screen
console.log("Hello, World!");

// You can print numbers too
console.log("2 + 2 =", 2 + 2);

// Try adding your own line below:

console.log() is the #1 most used command in JavaScript. You'll use it thousands of times to check what your code is doing. Think of it as a "peek inside" tool.

Let's Try More!

JavaScript can do math, store information, and make decisions. Try running this:

JavaScript — Variables & Math

// VARIABLES — storing information in labeled boxes
let myName = "Rahul";       // A box labeled "myName" with "Rahul" inside
let myAge = 25;              // A box labeled "myAge" with 25 inside
let isStudent = true;        // A box labeled "isStudent" with true inside

// Print the variables
console.log("My name is", myName);
console.log("My age is", myAge);
console.log("Am I a student?", isStudent);

// MATH
console.log("Next year I'll be", myAge + 1);
console.log("10 x 5 =", 10 * 5);

// DECISION MAKING
if (myAge >= 18) {
    console.log(myName + " can vote! 🗳️");
} else {
    console.log(myName + " is too young to vote");
}

🎯 Challenge!

Change myName to YOUR name
Change myAge to YOUR age
Run the code — does it say you can vote?
Try setting age to 15 — what happens?

Your First HTML Page!

HTML is the language that creates the structure of web pages. Every website you've ever visited is built with HTML. Let's try it live!

If a web page is a house, HTML = the walls, rooms, doors, windows (the structure). CSS = the paint, furniture, decoration (the looks). JavaScript = the electricity, plumbing, smart home (the behavior).

🎯 Try It Yourself!

Read the HTML code below
Click ▶ Run to see the web page appear in the preview
Change the text inside <h1>...</h1> to your own title
Add a new paragraph: <p>I love coding!</p>
Click Run again to see your changes

HTML — Edit and click Run to preview

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 0 20px;
            background: #f5f5f5;
        }
        h1 { color: #6c5ce7; }
        .highlight { background: yellow; padding: 2px 6px; }
    </style>
</head>
<body>
    <h1>Hello! I am learning to code!</h1>
    <p>This is my <span class="highlight">very first</span> web page.</p>
    <p>I am learning HTML, CSS, and JavaScript.</p>
    <ul>
        <li>HTML = Structure</li>
        <li>CSS = Style</li>
        <li>JavaScript = Behavior</li>
    </ul>
    <button onclick="alert('You clicked me!')">Click Me!</button>
</body>
</html>

What Each Tag Does

Tag	What It Does	Analogy
`<h1>`	Big heading (title)	The sign on top of a shop
`<p>`	Paragraph of text	A page in a book
`<ul>`	Unordered list (bullet points)	A shopping list
`<li>`	One item in a list	One item on the shopping list
`<button>`	A clickable button	A doorbell

Every opening tag like <h1> needs a closing tag </h1> (notice the /). Forgetting the closing tag is the #1 beginner mistake!

📝 Chapter 0 Quiz

Let's test what you learned! Select an answer for each question and click "Check Answers".

1. How do you print a message in JavaScript?

print("Hello")

console.log("Hello")

echo("Hello")

display("Hello")

2. What is the "frontend" of a website?

The database

The server

What users see in the browser

The code editor

3. Which language controls how a website LOOKS (colors, fonts, spacing)?

HTML

CSS

JavaScript

React

4. What does let age = 25; do?

Creates a variable named "age" with value 25

Prints the number 25

Checks if age equals 25

Deletes the age value

5. What is the closing tag for <h1>?

<h1/>

<h1>

</h1>

← Home Chapter 1: HTML →