Building the project

In this lesson, you'll build your very own simple database project called 'Data Keepers'!

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

1 Step 1: Create a New Project
2 Step 2: Set Up HTML Structure
3 Step 3: Add a Heading
4 Step 4: Create a Form
5 Step 5: Add a Table
6 Step 6: Add JavaScript
7 Step 7: Save and Test
8 Step 8: Celebrate!
Quiz

1 - Step 1: Create a New Project

Open your favorite text editor and create a new folder called 'DataKeepersProject'. Inside the folder, create a new file called 'datakeepers.html'.

👇 Mark your steps as done as you complete them.

+5 XP

2 - Step 2: Set Up HTML Structure

Inside 'datakeepers.html', add the basic HTML structure. Type the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Data Keepers</title>
</head>
<body>

</body>
</html>

👇 Mark your steps as done as you complete them.

+10 XP

3 - Step 3: Add a Heading

Add a heading to your HTML page. Inside the <body> tag, type the following code:

<h1>Data Keepers Project</h1>

+5 XP

4 - Step 4: Create a Form

Create a form to collect data from users. Below the <h1> tag, type the following code:

<form id='dataForm'>
  <label for='name'>Name:</label>
  <input type='text' id='name' name='name'><br>
  <label for='age'>Age:</label>
  <input type='number' id='age' name='age'><br>
  <input type='submit' value='Submit'>
</form>

+15 XP

123learn · Online learning platform

Unlock the full learning experience

You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

Hundreds of curriculum-aligned lessons

Interactive activities in every lesson

Printable resources & progress tracking

Get started

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