Digital Media

Advanced

120 mins

Teacher/Student led

+70 XP

What you need:
Chromebook/Laptop/PC or iPad/Tablet

Interactive Web Design

In this lesson, you'll explore the essentials of creating a webpage from scratch. Learn to build its structure with HTML, style it using CSS, and add interactivity with JavaScript. By the end, you'll create your own mini-project webpage.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Welcome to Interactive Web Design
2 How Websites Work
3 Basic HTML Structure
4 Adding Heading and Text
5 Adding an Image
Challenge
Quiz

1 - Welcome to Interactive Web Design

Welcome to this lesson on interactive web design! In this 150-minute session, you will learn the basics of creating a simple webpage from scratch. We will start with understanding how websites work, then move on to building the structure with HTML, adding styles with CSS, and finally making it interactive with JavaScript. By the end, you will build a small webpage with a heading, text, an image, a styled button, a form, and a fun interactive feature. This is beginner-friendly, so no prior knowledge is needed. Let's get started!

Why Learn Web Design?

Websites are everywhere – from social media to online shops. Learning to build them helps you create your own digital projects and understand the web better. It's creative and useful for school or hobbies.

Learning Objectives

Understand how websites are made.
Build a basic webpage structure with HTML.
Style your page with CSS.
Add interactivity with simple JavaScript.
Create a mini-project webpage.

For this lesson, we will use a free online tool called JSFiddle. Go to JSFiddle and create a new fiddle. It has sections for HTML, CSS, and JavaScript. You can type code there and see the result instantly.

Spend approximately 10 minutes reading this introduction and setting up JSFiddle.

Tip: Save your work often by clicking 'Save' in JSFiddle.

👇 Mark your steps as done as you complete them.

+5 XP

2 - How Websites Work

Websites are like digital books that you read on a browser, such as Chrome or Firefox. They are made up of three main parts: HTML for the structure (like the skeleton), CSS for the style (like the clothes), and JavaScript for interactivity (like making things move or respond).

When you visit a website, your browser downloads these files from a server and displays them. Today, we will build everything in one place using JSFiddle.

Key Concepts

HTML: Stands for HyperText Markup Language. It uses tags like <h1> for headings.
CSS: Cascading Style Sheets. It adds colours, sizes, and layouts.
JavaScript: Adds actions, like what happens when you click a button.

Activity: Think of a website you like and note what makes it interactive (e.g., buttons, forms). Spend approximately 10 minutes exploring JSFiddle's interface.

👇 Mark your steps as done as you complete them.

+10 XP

3 - Basic HTML Structure

Let's start building! In JSFiddle's HTML section, type this basic structure:

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>

This is the skeleton. The <head> has the title, and <body> is where your page content goes. Click 'Run' to see it (it will be blank for now).

Spend approximately 10 minutes typing this code and running it. Customise the title to something fun, like 'My Adventure Page'.

Tip: Always close tags, like <body></body>.

+10 XP

4 - Adding Heading and Text

Inside the <body> tag, add a heading and some text:

<h1>Welcome to My Webpage!</h1>
<p>This is some sample text. I can write about my favourite hobby here.</p>

<h1> is a big heading, and <p> is a paragraph. Run the code to see it appear.

Activity: Change the heading and text to be about you. Spend approximately 10 minutes experimenting.

+10 XP

5 - Adding an Image

To add an image, use the <img> tag. Find a free image URL online (e.g., from Unsplash). Add this after your paragraph:

<img src="https://example.com/image.jpg" alt="Description of image" width="300">

Replace the src with your image URL. The alt is for accessibility.

Spend approximately 10 minutes finding an image and adding it. Customise the width.

+10 XP

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

Copyright Notice
This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.

Your Answer or Description of Your Work

Project URL This can be a link to your project (e.g. a Scratch, Microbit, Arcade or CodePen URL link).

Upload File

You must be logged into Scratch to share your project, otherwise the link will not work.

To get the URL link of your Scratch project:

Make sure you're logged into Scratch.
Click on the Share button in the project editor.
Click on the Copy Link button.
Click on the Copy Link link. This will save the URL of your project page into your clipboard.

To get the URL link of your Microbit project:

Click on the button in the project editor.
Click on the Publish Project button.
Click on the Copy button. This will save the URL of your project page into your clipboard.

To get the URL link of your Arcade project:

Click on the button in the project editor.
Click on the Publish Project button.
Click on the Copy button. This will save the URL of your project page into your clipboard.

To get the URL link of your CodePen project:

Make sure you're logged into CodePen.
Open your project in the editor.
Click on the Save button at the top of the editor.
Copy the link from the address bar in your web browser (e.g. https://codepen.io/Jane-Smith/pen/gOVXxBQ)

Interactive Web Design

Teacher Class Feed

1 - Welcome to Interactive Web Design

Why Learn Web Design?

Learning Objectives

Send your work to your teacher

2 - How Websites Work

Key Concepts

Send your work to your teacher

3 - Basic HTML Structure

Send your work to your teacher

4 - Adding Heading and Text

Send your work to your teacher

5 - Adding an Image

Send your work to your teacher

Unlock the Full Learning Experience