TGJ3/4M • Digital Media • ISU Culminating Project

Learn Web Development:
HTML + CSS + JavaScript

Edit code, run it instantly, and build your first webpage.

Diagram showing HTML as structure, CSS as style, and JavaScript as interaction.

Lesson Roadmap

A 25–35 minute class plan.

1

Introduction

5 minutes

What HTML, CSS and JavaScript do and why we use them together.

2

Demonstration

10 minutes

Live demo of writing tags, adding styles and a button click.

3

Hands-on Practice

10–15 minutes

Build your own page in the Code Lab using a template or starter.

4

Wrap-up / Q&A

5 minutes

Review the three languages, take the quiz, share your page.

HTML — Structure of the Page

HTML is the skeleton: it holds the content of your page.

What is HTML?

HTML stands for HyperText Markup Language. We use tags like <h1> or <p> to describe what each piece of content is.

  • <h1> — main heading (biggest title)
  • <p> — a paragraph of text
  • <img> — an image
  • <a> — a link to another page
  • <button> — a button you can click
  • <div> — a container/box for grouping things
HTML 
<h1>My First Website</h1>
<p>Hello! This is my first webpage.</p>
<button>Click Me</button>

Preview:

My First Website

Hello! This is my first webpage.

CSS — Style and Design

CSS controls how the page looks: colors, fonts, spacing, layout.

Common CSS properties

  • color — text color
  • background-color — background color
  • font-size — text size
  • margin — space outside an element
  • padding — space inside an element
  • border — outline around the box
  • border-radius — rounded corners
  • :hover — style when the mouse is over it

Before CSS

My Page

Some text

After CSS

My Page

Some text

CSS 
body {
  font-family: Arial, sans-serif;
  background: #f4f6fb;
  color: #222;
  padding: 24px;
}

button {
  background: #4f46e5;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background: #6d28d9;
}

JavaScript — Interaction

JavaScript makes the page respond to the user.

Key JavaScript ideas

  • document.querySelector() — find an element on the page
  • addEventListener() — run code when something happens (like a click)
  • textContent — read or change the text of an element
  • classList.toggle() — add or remove a CSS class
JavaScript 
const btn = document.querySelector("#myBtn");
btn.addEventListener("click", function () {
  btn.textContent = "You clicked me!";
});

Demo 1 — Change Text

This text will change.

JavaScript 
const btn = document.querySelector("#demo-change-text");
const text = document.querySelector("#demo-text");
let toggled = false;

btn.addEventListener("click", function () {
  toggled = !toggled;
  text.textContent = toggled
    ? "Nice! You just ran JavaScript."
    : "This text will change.";
});

Demo 2 — Theme Toggle

Click to switch this card between light and dark.

JavaScript 
const btn = document.querySelector("#demo-theme");
const card = document.querySelector("#demo-theme-card");

btn.addEventListener("click", function () {
  card.classList.toggle("dark");
});

Demo 3 — Counter

Count: 0

JavaScript 
let n = 0;
const btn = document.querySelector("#demo-count-btn");
const out = document.querySelector("#demo-count");

btn.addEventListener("click", function () {
  n++;
  out.textContent = n;
});

Code Lab

Edit HTML, CSS and JavaScript, then click Run Code to preview live.

HTML
CSS
JS
Preview

Build Your Own Page

Follow these steps. Each step has a small example you can try.

1

Write your page title

Use <h1> for the biggest title on your page.

Tip: only use one <h1> per page.

2

Add an intro paragraph

Use <p> to introduce yourself.

Tip: keep it short — 1 or 2 sentences.

3

Add hobbies or interests

Use <ul> and <li> for a list.

Tip: 3–5 items looks clean.

4

Style with CSS

Change the background, font and button colors.

Tip: pick 2 colors that look good together.

5

Add a JS button

Use addEventListener to react to a click.

Tip: change textContent to show a message.

6

Run and test

Click Run Code and check the preview.

Tip: fix one thing at a time.

Template Gallery

Pick a starting point, load it into the Code Lab and make it yours.

Beginner Cheat Sheet

Quick reference for the most useful HTML, CSS and JS.

HTML

  • <h1> — main heading
  • <p> — paragraph
  • <img src="..."> — image
  • <a href="..."> — link
  • <button> — clickable button
  • <div> — container

CSS

  • color
  • background-color
  • font-size
  • margin
  • padding
  • border
  • border-radius
  • display
  • text-align

JavaScript

  • document.querySelector()
  • addEventListener()
  • textContent
  • style
  • classList.add()
  • classList.toggle()

Quick Quiz

5 questions. Get instant feedback.

Final Challenge: Build Your First Webpage

Build your own personal webpage using HTML, CSS, and JavaScript.

Need a starting point? Pick one of these three starter styles, load it into the Code Lab, and then make it your own.

Editorial Card

Warm paper colors, a detailed profile card, quick facts, interests, skills, and a greeting interaction.

Dark Tech Panel

Dark dashboard layout with project stats, skill progress, a build plan, and highlightable skill cards.

Poster Layout

Bold poster-style sections with metadata, a visual block, feature cards, and rotating fun facts.

Progress: 0 / 8

Wrap-up

HTML

Builds the skeleton.

CSS

Makes it look good.

JavaScript

Makes it interactive.

By the end of this lesson, you can create and preview a simple personal webpage in a browser.