Creating the Report Website

Please note: this module follows the 2026 project brief, whose theme was forests. The State Examinations Commission publishes a new brief each year, with its own theme and its own dates. These lessons will be updated once this year's brief is published. Check the current brief on the SEC website before you begin. In this lesson, you will create a complete local HTML report website for your LC Computer Science project. Set up the folder structure, build the index.html file with embedded video and images, apply UI principles for structure and layout, add references and a word count summary, and perform a final compliance check to ensure it meets all SEC requirements under 2500 words.

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

1 Objectives
2 Exact Requirements for the Report Website
3 Setting Up Your Folder Structure
4 Basic HTML Template to Start With
5 Embedding your Video and Images
6 Applying Good UI Principles
7 References and Word Count Summary
8 Final Check for Compliance
9 Checklist Before Next Lesson
Quiz

1 - Objectives

By the end of this lesson you will have:

A complete, local HTML report website meeting all SEC requirements
All sections from previous lessons inserted with correct headings and word limits
Your demonstration video embedded locally (no more than 5 minutes or 1GB)
Images and photos added where needed (e.g., artefact in operation)
Applied basic UI principles for good structure and layout (to gain the 5 marks)
References and word count summary table included
The full Report folder ready for zipping

2 - Exact Requirements for the Report Website

From pages 7–9 of the official brief:

Must be a local HTML file (not online like Google Sites or Wix) – failure means forfeited marks
Start with index.html as the main file
Max 2500 words total; video max 5 minutes and 1GB
Use the exact section headings provided
Video must be local (not hosted online) and explain how you meet the requirements
Evidence of good UI design (structure/layout) for 5 marks
Folder: Report contains index.html + all files (HTML/CSS/images/video)

3 - Setting Up Your Folder Structure

Create exactly this structure now:

Top Level	Inside
Report	index.html (main report) styles.css (for UI) images/ (folder for photos and your demo video)
Artefact	Your source code files (e.g., main.py, model.py, data files).

Open index.html in a text editor (e.g., Notepad++, VS Code) and add a basic HTML skeleton.

4 - Basic HTML Template to Start With

Basic HTML Template to Start With

Copy this into index.html and save:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My 2026 LC Computer Science Project Report</title>
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <h1>My Project Report</h1>
  <!-- Add sections here -->
</body>
</html>

Create styles.css with simple rules (e.g., body { font-family: Arial; })

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.