Web Development: HTML, CSS and JavaScript

---

Concepts

This study delivers 1 primary concept and 0 secondary concepts.

Primary concept: Data Structures and Modular Programming (CO-KS34-C003)

Type: Skill | Teaching weight: 3/6

Data structures are ways of organising and storing data in a program so that it can be accessed and modified efficiently. Common data structures include arrays (indexed collections of items of the same type), lists (dynamic ordered collections), stacks (last-in, first-out collections), queues (first-in, first-out collections), and dictionaries/hash maps (key-value pair collections). Modular programming organises code into self-contained procedures or functions, each responsible for a specific task. This improves readability, enables reuse and simplifies debugging. At KS3, pupils learn to choose appropriate data structures and to design modular programs using procedures and functions.

Teaching guidance: Introduce data structures through problems they naturally solve: arrays for storing a list of scores, a stack for undo operations, a queue for a print job buffer. Teach pupils to choose data structures based on the operations required. Model modular program design: identify distinct tasks, write a function for each, test functions independently. Practice refactoring flat programs into modular ones. Connect data structures to real applications: how does a social media platform store users' friend lists? Develop understanding of the difference between accessing an element by index and searching through a list. Key vocabulary: data structure, array, list, stack, queue, dictionary, record, index, procedure, function, parameter, return, modular, reuse, encapsulate Common misconceptions: Pupils may not see the need for data structures beyond simple variables, especially in small programs. Showing how programs that use appropriate data structures scale to larger problems motivates their use. The difference between passing data to a function by value and by reference is a subtle but important concept that affects program behaviour. Functions that return values are often confused with procedures that only produce side effects; consistent terminology and practice develops clarity.

Differentiation

Model response (Emerging): age = int(input('Enter your age: '))

if age >= 18:

print('You are old enough to vote.')

else:

print('You are not old enough to vote yet.')

Model response (Developing): scores = [72, 85, 63, 91, 78]

total = 0

for score in scores:

total = total + score

average = total / len(scores)

print('Average:', average)

for score in scores:

if score > average:

print(score, 'is above average')

Model response (Secure): def find_max(numbers):

if len(numbers) == 0:

return None

largest = numbers[0]

for number in numbers[1:]:

if number > largest:

largest = number

return largest

# Test

print(find_max([3, 7, 2, 9, 5])) # Should print 9

print(find_max([-5, -1, -8])) # Should print -1

print(find_max([42])) # Should print 42

print(find_max([])) # Should print None

Model response (Mastery): I would use a dictionary where each key is the book's ISBN and the value is another dictionary containing title, author and status (available/borrowed/borrower_name).

library = {}

def add_book(isbn, title, author):

library[isbn] = {'title': title, 'author': author, 'status': 'available', 'borrower': None}

def borrow_book(isbn, borrower):

if isbn not in library:

return 'Book not found'

if library[isbn]['status'] == 'borrowed':

return f'Already borrowed by {library[isbn]["borrower"]}'

library[isbn]['status'] = 'borrowed'

library[isbn]['borrower'] = borrower

return f'{library[isbn]["title"]} borrowed by {borrower}'

def return_book(isbn):

if isbn not in library or library[isbn]['status'] == 'available':

return 'Error: book not currently borrowed'

library[isbn]['status'] = 'available'

library[isbn]['borrower'] = None

return f'{library[isbn]["title"]} returned'

Justification: A dictionary provides O(1) average lookup by ISBN — essential for a system that may contain thousands of books. Using a list would require O(n) linear search. The nested dictionary for each book groups related data logically. Functions are modular: each handles one operation with input validation and clear return messages.

---

Thinking lens: Perspective and Interpretation (primary)

Key question: Whose perspective is this, what shapes it, and what might be missing? Why this lens fits: Analysing the ethical implications of algorithmic decision-making, surveillance and AI requires pupils to evaluate the same technology from the perspectives of different affected groups — individuals, communities, corporations and governments — making perspective-taking the central intellectual demand. Question stems for KS3:

What contextual factors shaped this perspective?

How does the author's position affect the reliability of this account?

Whose perspective is missing from this record, and why does that matter?

How have interpretations of this event changed over time, and what drove those changes?

Secondary lens: Systems and System Models — Modular programming requires pupils to decompose a system into functions/procedures with defined inputs and outputs — the program as a whole is a system of interacting modules, and the design task is to model the right modular decomposition.

---

Session structure: Practical Application

Practical Application

A hands-on sequence where pupils apply knowledge and skills to solve a practical problem or create a functional outcome. Begins with a real-world context, builds skills through rehearsal, guides design or planning, supports making or problem-solving, and concludes with evaluation against success criteria.

context → skill_rehearsal → design → make_or_solve → evaluate Assessment: Practical outcome (solution, product, program) evaluated against defined success criteria, with written or verbal explanation of the process and decisions made. Teacher note: Use the PRACTICAL APPLICATION template: present a realistic problem context that requires pupils to select and apply relevant knowledge and skills. Expect pupils to rehearse key techniques, design a solution with justification, and carry out the task with attention to accuracy and quality. Guide evaluation that considers both the outcome and the effectiveness of their approach. KS3 question stems:

What knowledge and skills are relevant to this problem, and how do they connect?

Why did you choose this approach over alternatives?

How effectively does your solution address the original problem?

What would you evaluate as the strengths and weaknesses of your approach?

---

Computing focus

Programming paradigm: Text Based Software/tool: HTML/CSS/JavaScript Computational concepts: sequence, selection, abstraction Abstraction level: Symbolic Themes: web development, programming, creative computing

---

Why this study matters

Web development fulfils the NC requirement for a second programming language and produces a visible, shareable outcome. HTML (structure), CSS (presentation), and JavaScript (behaviour) demonstrate separation of concerns -- a fundamental software engineering principle. Building a multi-page website with interactive elements (form validation, image galleries, responsive layout) requires all three languages working together. Every website pupils use daily is built with these technologies, making the learning immediately relevant.

---

Pitfalls to avoid

Spending too long on HTML/CSS and not reaching JavaScript -- plan the sequence so JS is introduced by mid-unit

Using WYSIWYG editors instead of writing code -- the learning is in the code, not the visual editor

Not testing across different browsers and screen sizes -- responsive design is essential in the real world

---

Computational thinking skills (KS3)

These disciplinary skills should be woven through teaching, not taught in isolation:

Algorithm design (KS1) — Create precise, unambiguous sequences of instructions to accomplish a goal; understand that a computer follows instructions exactly as written; design, implement and debug simple programs as algorithms expressed in a programming environment; use logical reasoning to predict what a simple program will do.

Pattern recognition (KS2) — Identify patterns and regularities in data sets and program behaviours; use pattern recognition to select appropriate control structures (repetition for repeated actions, selection for conditional branching); generalise from specific examples to produce reusable solutions; recognise when an existing algorithm or program component can be reused to solve a new problem.

Pattern recognition (KS3) — Identify and exploit structural patterns in computational problems to select or design efficient algorithms; recognise recurring algorithmic patterns such as searching, sorting and divide-and-conquer; use pattern recognition to understand when different data structures naturally suit a problem's access patterns; analyse trends in data and use them to inform computational solutions.

Abstraction (KS1) — Focus on the most important features of a problem or task while ignoring unnecessary detail; represent real-world actions as simple step-by-step instructions that capture the essential logic without irrelevant specifics.

Pattern recognition (KS1) — Notice repeated elements in sequences of instructions or in real-world tasks; identify when a set of steps recurs and recognise that repetition can be expressed more efficiently using loops; spot similarities between different problems that suggest the same solution approach can be applied.

Data representation (KS3) — Understand how data of various types — integers, text, images, sound — is represented and manipulated in binary form; convert between binary and decimal number representations and perform simple binary arithmetic; understand how data structures (arrays, lists, records) organise data in programs; understand that all digital information is encoded as binary digits regardless of its perceived type.

---

Vocabulary word mat

Prior knowledge (retrieval plan)

Pupils should already know the following from earlier units:

---

Scaffolding and inclusion (Y8)

---

Knowledge organiser

Key terms:

HTML

CSS

JavaScript

element

tag

attribute

selector

property

value

DOM

event

function

responsive

media query

Core facts (expected standard):

Data Structures and Modular Programming: Chooses appropriate data structures for different problems, writes modular programs using functions with parameters and return values, and debugs programs systematically.

---

Graph context

Node type: ComputingTopicSuggestion | Study ID: TS-CO-KS3-007 Concept IDs:

CO-KS34-C003: Data Structures and Modular Programming (primary)

Cypher query:

``cypher

MATCH (ts:ComputingTopicSuggestion {suggestion_id: 'TS-CO-KS3-007'})

-[:DELIVERS_VIA]->(c:Concept)

-[:HAS_DIFFICULTY_LEVEL]->(dl)

RETURN c.name, dl.label, dl.description

``

---

Generated from the UK Curriculum Knowledge Graph — zero LLM generation.