Computer Science

Advanced

120 mins

Teacher/Student led

What you need:
Chromebook/Laptop/PC

Creating the Report Website

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.

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 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

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; })

5 - Embedding your Video and Images

In section 1, add your video like this:

<video controls width="100%" height="auto">
  <source src="images/video.mp4" type="video/mp4">
</video>

For images (e.g., flowchart, photos):

<img src="images/flowchart.png" alt="System Flowchart">

Ensure video shows how you meet basic/advanced requirements.

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 DigitalSkills.org 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)

Creating the Report Website

Teacher Class Feed

1 - Objectives

Send your work to your teacher

2 - Exact Requirements for the Report Website

Send your work to your teacher

3 - Setting Up Your Folder Structure

Send your work to your teacher

4 - Basic HTML Template to Start With

Basic HTML Template to Start With

Send your work to your teacher

5 - Embedding your Video and Images

Send your work to your teacher

Unlock the Full Learning Experience

Creating the Report Website

Teacher Class Feed

1 - Objectives

Send your work to your teacher

2 - Exact Requirements for the Report Website

Send your work to your teacher

3 - Setting Up Your Folder Structure

Send your work to your teacher

4 - Basic HTML Template to Start With

Basic HTML Template to Start With

Send your work to your teacher

5 - Embedding your Video and Images

Send your work to your teacher

Unlock the Full Learning Experience

XP