COURSE: WEBSITE 101

Lesson 4 — Making it Interactive with JavaScript

Beginner / Free Track

// 01. The Third Layer

HTML is structure. CSS is style. JavaScript is behaviour. It listens for what users do — clicks, typing, scrolling — and changes the page in response. No reload required.

// 02. Variables, Functions, DOM Selectors

JavaScript runs inside <script> tags at the bottom of your body. It can find any element on the page and change it. Here is the pattern you will use constantly:

// Find an element on the page
const btn = document.querySelector('.my-button');

// Define what should happen
function changeColor() {
    document.body.style.backgroundColor = '#a8ff78';
    document.body.style.color = '#0a0a06';
}

// Listen for a click and run the function
btn.addEventListener('click', changeColor);

The DOM: When the browser loads your HTML it builds a live map of every element — the Document Object Model. JavaScript reads and rewrites that map in real time. That is how pages update without reloading.

// 03. Variables and Data

const — a value that never changes. Use this by default.

let — a value that can change. Use when you need to update it.

document.querySelector() — finds the first matching element. Pass a CSS selector.

addEventListener() — listens for an event. Common events: click, input, submit.

[TRY IT NOW]

Add <button class="my-button">Click me</button> to your HTML. Add a <script> tag at the bottom of your body. Type the example above. Click the button. Watch the page change. That is JavaScript working.

< Lesson 3: Flexbox Layout Lesson 5: Live Code Builder >