1/8

HTMLCSS

Building your first webpage

By the end you'll have a real webpage with colours, headings and styled text — built by you!

2/8 Agenda

What we'll cover today

What is HTML?

5 min

HTML tags

7 min

Intro CSS

7 min

Style page

8 min

Challenge

3 min

HTML = the structure (like walls of a house)
CSS = the styling (like paint and furniture)
Together they make every website you've ever visited!

3/8 HTML

What is HTML?

HTML tells the browser what to show — using tags wrapped in angle brackets

Every webpage is saved as a .html file
Most tags have an opening and a closing tag
The browser reads the tags and displays the page

<h1>Hello World</h1>
<p>I am a paragraph.</p>

Hello World

I am a paragraph.

4/8 HTML

Essential HTML tags

<h1>Big heading</h1>
<h2>Smaller heading</h2>
<p>A paragraph</p>
<a href="https://google.com">Click</a>
<ul><li>List item</li></ul>
<div>A container box</div>

Big heading

Smaller heading

A paragraph

Click

List item

img and br have no closing tag

These are self-closing — they don't wrap content

5/8 HTML

A complete HTML page

Every HTML file follows this skeleton — save as index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>I am learning HTML.</p>
  </body>
</html>

<head> = browser settings

Title and CSS — not shown on page

<body> = what the user sees

Everything visible goes inside body

6/8 CSS

What is CSS?

CSS controls the look of your HTML — add a <style> block inside <head>

h1 { color: blue; font-size: 32px; }

p { color: gray; font-family: Arial; }

Welcome!

I am learning HTML.

selector { property: value; }

h1 selects the element, color: blue styles it

7/8 CSS

Common CSS properties

body { background-color: #f0f0f0;
  font-family: Arial; }

h1 { color: #2a5fa5;
  text-align: center; }

p { font-size: 18px;
  margin: 10px; padding: 10px; }

Key properties

color — text colour
background-color — bg colour
font-size — text size
margin — space outside
padding — space inside
text-align — left / center / right
border — outline around element

8/8 Your turn

Challenge — About Me page

Create aboutme.html and style it with your own colours

<!DOCTYPE html><html><head>
  <style>/* your CSS here */</style>
</head><body>
  <h1>Hi, I'm ___</h1>
  <p>I love ___</p>
  <p>My hobby is ___</p>
</body></html>

Bonus challenges

Change background to your fav colour
Add a list of favourite foods with <ul>
Add a link to your favourite website
Add a border around your paragraphs

To preview — open the file in Chrome

Right-click your .html file → Open with Chrome

1/8

JavaScriptHTMLCSS

Making your webpage come alive with JavaScript

You'll build a page that reacts when you click — your first interactive web app!

2/8 Agenda

What we'll cover today

What is JS?

5 min

Variables

5 min

Functions

7 min

DOM magic

8 min

Challenge

5 min

HTML = structure, CSS = style, JavaScript = behaviour
JS makes pages interactive — buttons, popups, animations
We'll build on the About Me page from last lesson

3/8 JavaScript

Variables and data types

let name = "Sarah";
let age = 17;
let isStudent = true;

const school = "ITE";

console.log(name);
console.log("Age: " + age);

Data types

String — text in quotes
Number — any number
Boolean — true or false

Use let, not var

Use const when the value never changes

4/8 JavaScript

Functions — reusable blocks of code

function greet(name) {
let msg = "Hello, " + name + "!";
console.log(msg);
}

greet("Sarah");
// Hello, Sarah!

Function anatomy

function — keyword to define it
greet — the name you give it
(name) — input it receives
{ } — the code that runs

5/8 JavaScript

Connecting JS to your HTML

Add a <script> tag at the bottom of your body to run JavaScript

<p id="greeting">Hello!</p>
<button onclick="changeGreeting()">Click me!</button>

<script>
  function changeGreeting() {
    let el = document.getElementById("greeting");
    el.innerHTML = "You clicked it!";
  }
</script>

6/8 JavaScript

The DOM — how JS talks to HTML

document.getElementById("id") — find element
element.innerHTML — change text inside
element.style.color — change CSS style
alert("msg") — show a popup

function makeRed() {
  let el = document.getElementById("greeting");
  el.style.color = "red";
  el.style.fontSize = "24px";
}

7/8 JavaScript

if/else — making decisions

function checkAge() {
  let age = parseInt(
    document.getElementById("age").value);

  if (age >= 18) {
    alert("You are an adult!");
  } else {
    alert("You are a minor.");
  }
}

Comparison operators

=== exactly equal
!== not equal
>= greater or equal
<= less or equal

parseInt() converts text to number

Input fields always return text — wrap in parseInt() for maths

8/8 Your turn

Challenge — interactive About Me

<h1 id="title">About Me</h1>
<input id="nameInput" type="text"
  placeholder="Enter a name">
<button onclick="changeName()">Go</button>

<script>
function changeName() {
  let n = document.getElementById("nameInput").value;
  document.getElementById("title").innerHTML = "Hi, I'm " + n;
}</script>

Bonus

Button that changes page background colour
Counter that goes up each click
Alert saying "Welcome!" on page load

Press F12 → Console tab

See errors and test your JS here

1/8

CSSFlexboxLayout

Making your page look great on any screen

You know HTML and basic CSS — now lay things out like a real web designer using Flexbox!

2/8 Agenda

What we'll cover today

Box model

6 min

CSS classes

6 min

Flexbox

8 min

Build card

7 min

Challenge

3 min

Every element is a box — understanding this changes everything
Flexbox arranges boxes side by side, centered, spaced — effortlessly
We'll build a profile card that looks like a real app UI

3/8 CSS

The CSS box model

Every HTML element is a box with 4 layers — from inside out:

margin (outside)

border

padding (inside)

content

div {
  width: 200px;
  padding: 16px;
  border: 2px solid black;
  margin: 10px;
}

Padding vs margin

Padding = space inside. Margin = space outside pushing others away.

4/8 CSS

CSS classes — style many elements at once

/* CSS — dot = class */
.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
}

<div class="card">...</div>
<div class="card">...</div>

Class vs ID

.card — class, reuse on many elements
#title — id, use on one element only

HTML: class="card" — CSS: .card { }

The dot in CSS targets a class name

5/8 Flexbox

Flexbox — arranging elements in a row

Add display: flex to a container and its children line up automatically

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

justify-content examples

flex-start

space-between

center

6/8 Flexbox

Building a navbar with Flexbox

.navbar { display: flex; justify-content: space-between;
  align-items: center; background: #2a5fa5; padding: 12px 24px; }
.navbar a { color: white; text-decoration: none; margin-left: 16px; }

<div class="navbar">
  <h2>MyWebsite</h2>
  <div><a href="#">Home</a><a href="#">About</a></div>
</div>

MyWebsite

HomeAboutContact

7/8 Layout

Building a profile card

.card { border: 1px solid #ddd;
  border-radius: 12px; padding: 20px;
  text-align: center; }
.avatar { width: 60px; height: 60px;
  border-radius: 50%; /* circle! */
  background: #2a5fa5; margin: 0 auto 10px; }
.btn { background: #2a5fa5; color: white;
  border-radius: 20px; padding: 8px 20px; }

Sarah Tan

IT Student

8/8 Your turn

Challenge — 3-card row

Use Flexbox to display 3 profile cards side by side

.card-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="card-row">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Card 1

Card 2

Card 3

Bonus

Add a navbar above the cards
Give each card a different colour
Try flex-direction: column — what happens?

1/8

JavaScriptArraysEvents

JavaScript power-up — arrays, loops & events

You know variables, functions and the DOM. Now let's handle real data and build a to-do list app!

2/8 Agenda

What we'll cover today

Arrays

6 min

Loops

7 min

Events

7 min

To-do app

8 min

Challenge

2 min

Arrays = a list of items in one variable
Loops = do something for every item without repeating
Events = watch for user actions like clicks and typing

3/8 JavaScript

Arrays — storing a list of values

let fruits = ["Apple", "Mango", "Durian"];

// Access by index — starts at 0!
console.log(fruits[0]); // "Apple"
console.log(fruits[2]); // "Durian"

fruits.push("Papaya");// add item
console.log(fruits.length); // 4

fruits array

[0] Apple

[1] Mango

[2] Durian

[3] Papaya

Arrays start at index 0, not 1!

This trips up beginners a lot — always remember [0] is first

4/8 JavaScript

Loops — doing something for every item

let fruits = ["Apple", "Mango", "Durian"];

// forEach — easiest to read
fruits.forEach(function(fruit) {
console.log("I like " + fruit);
});

// classic for loop
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}

for loop breakdown

let i = 0 — start at index 0
i < fruits.length — keep going
i++ — move to next item

forEach is easier to read

Use it when you just want to do something with each item

5/8 Events

Event listeners — watching for user actions

<button id="myBtn">Click me</button>
<input id="myInput">

// listen for a click
document.getElementById("myBtn")
  .addEventListener("click", function() {
    alert("Clicked!");
  });

// listen for typing
document.getElementById("myInput")
  .addEventListener("input", function(e) {
    console.log(e.target.value);
  });

Common events

"click" — button clicked
"input" — user types in a field
"keydown" — key pressed
"mouseover" — mouse hovers
"submit" — form submitted

6/8 Project

To-do app — HTML & CSS

Create todo.html with this structure first

.input-row { display: flex; gap: 8px; }
input { flex: 1; padding: 8px; border-radius: 6px; }
button { background: #2a5fa5; color: white; border-radius: 6px; }
li { padding: 8px; border-bottom: 1px solid #eee; }

<h1>My To-Do List</h1>
<div class="input-row">
<input id="taskInput" placeholder="Add a task...">
<button id="addBtn">Add</button>
</div>
<ul id="taskList"></ul>

7/8 Project

To-do app — the JavaScript

Arrays + loops + events all working together!

My To-Do List

Add a task...

Add

Finish HTML assignment

Practice CSS

Study for quiz

8/8 Your turn

Challenge — upgrade the to-do app

Level 1

Show "List is empty!" when there are no tasks
Press Enter to add a task (hint: listen for "keydown")

Level 2

Add a Delete button next to each task
Click a task to cross it out (strikethrough)

// Hint: Enter key
document.getElementById("taskInput")
  .addEventListener("keydown", function(e) {
    if (e.key === "Enter") addTask();
  });

// Hint: delete by index
function deleteTask(i) {
  tasks.splice(i, 1);
  renderList();
}

Student slide deck — all 4 lessons: HTML, CSS, JavaScript, Flexbox, Arrays, Events

Building your first webpage

What we'll cover today

What is HTML?

Essential HTML tags

A complete HTML page

What is CSS?

Common CSS properties

Challenge — About Me page

Making your webpage come alive with JavaScript

What we'll cover today

Variables and data types

Functions — reusable blocks of code

Connecting JS to your HTML

The DOM — how JS talks to HTML

if/else — making decisions

Challenge — interactive About Me

Making your page look great on any screen

What we'll cover today

The CSS box model

CSS classes — style many elements at once

Flexbox — arranging elements in a row

Building a navbar with Flexbox

Building a profile card

Challenge — 3-card row

JavaScript power-up — arrays, loops & events

What we'll cover today

Arrays — storing a list of values

Loops — doing something for every item

Event listeners — watching for user actions

To-do app — HTML & CSS

To-do app — the JavaScript

Challenge — upgrade the to-do app