Topic title: HTML and JavaScript
Year group: 9
When taught: May to July
What are we learning?
At the end of this unit all pupils should be able to:
• Write HTML code to create a well-structured multi-page website
• Link to and use external CSS to style web pages consistently
• Use a simple navigation bar across multiple pages
• Apply JavaScript to add basic interactivity (e.g. button clicks or alerts)
• Insert text, images, hyperlinks, and lists into their web pages
• Organise website files (HTML, CSS, JavaScript, and images) using folders
Most pupils will be able to:
• Use a wide range of HTML elements and structure them correctly
• Write clear, effective CSS using classes and IDs to style page elements
• Design a website with a consistent layout and theme across all pages
• Add JavaScript to create interactive features, such as form validation or a dropdown menu
• Use responsive design so that pages adapt to different screen sizes using media queries
• Create a form with fields and buttons that uses JavaScript for basic checks or feedback
Some pupils will be able to:
• Enhance their website with animations, transitions, or interactive menus using JavaScript
• Use advanced CSS techniques like Flexbox or Grid for layout
• Create a well-polished, interactive website suitable for a real audience or purpose
• Demonstrate independent learning by using additional HTML, CSS, or JavaScript features not covered in class
• Optimise their website for accessibility and usability, considering different users and devices
Why is this important to know?
Learning Skills:
• Synthesis: Pupils will bring ideas together and create solutions to coding problems
• Problem solving when deciding how to solve a problem and why
Life Skills:
• Collaboration: on complex moral and ethical issues in computer networking
• Resilience: when debugging code in a text-based language
ICT Skills:
• Software: Using integrated development environments (IDEs) to code programs
Literacy Skills:
• Digital literacy: Coding using text-based languages
• Vocabulary: Learning new vocab and learning how it links to other subjects
Where does this link into our past and future learning?
It is assumed that pupils will have previously learnt the basics of HTML and website development in Year 7 and 8 and will have the understanding of how a web page is created. They will likely need to recap the programming language and general code layout basics. No previous learning of JavaScript is necessary; however, some pupils may have started to use it as an extension task in year 8.
Future learning topic: GCSE Computer Science – Networks
How will we be assessed on this topic?
• End of topic assessment – 40 questions all based on unit learning.
• Final project link uploaded to SatchelOne
What makes a strong piece of work in this topic?
• A fully functioning multi-page website with a consistent layout and working navigation
• Use of external CSS for styling, showing well-organised and readable code
• Clean and semantic HTML structure using elements like <header>, <nav>, <main>, <footer>
• Use of JavaScript to add interactivity (e.g. buttons, menus, form validation, or animations)
• A clear and consistent visual design: thoughtful use of colour, fonts, spacing, and layout
• Good file and folder structure, with clear naming and working file paths (e.g. correct links to CSS, JS, and images)
• A polished, user-friendly site that works as intended and shows creativity
What are teachers hoping to see?
• Confident and correct use of HTML, CSS, and JavaScript in combination
• Proper separation of concerns: HTML for content, CSS for design, JS for interactivity
• An understanding of responsive design principles (e.g. using percentages, media queries, Flexbox/Grid)
• Well-commented code showing planning, organisation, and clarity
• Students debugging and improving their code, not just copying solutions
• Evidence of independent problem-solving, thoughtful design, and original ideas
• A website that serves a clear purpose (e.g. a portfolio, product site, club page)
What key words are there in this topic?
What can I try if I want to stretch and challenge myself on this topic?
• Use JavaScript to change content or style dynamically (e.g. light/dark mode toggle)
• Add form validation using JavaScript (e.g. check for empty fields or email format)
• Include animations or transitions (e.g. menus that slide open, fade-in elements)
• Create a project with a real audience (e.g. build a site for a club, school event, or hobby)
• Learn about version control (e.g. Git and GitHub) to manage code and track changes
• Explore accessibility best practices (e.g. using aria labels, keyboard navigation)
• Build a site with Flexbox or CSS Grid layout for more control and responsiveness
What wider reading can be done on this topic?
• CGP KS3 Computing Complete Revision & Practice
• Hodder Compute-IT: Student’s Book 1 – Computing for KS3
• Smashing Magazine – A Complete Guide to HTML
What websites are linked to the topic?
• Website for learning HTML: https://www.codecademy.com/learn/learn-html
• Website used for coding: https://replit.com
• Website used for tutorials: https://www.w3schools.com/html/default.asp
• Website to help theory: https://www.bbc.co.uk/bitesize/guides/znkqn39/revision/8
Careers
• Junior Developer
• Website Editor
• Social Media Manager
• Digital Marketing Coordinator
• Content Editor
• Content Producer
• Digital Production Coordinator
• Website Project Manager
• Website Support Specialist
• HTML and CSS Production Specialist
• Technical Virtual Assistant
• HTML Email Developer Jobs
• Email Marketing Specialist
• Entry-Level Front End Developer Jobs
• Entry-Level Web Developer
• Webmaster Jobs
Extra Skills:
• Communication
• Teamwork
• Problem-solving
• Time management
• Organisation
• Software Skills
Progression:
• Online tutorials
• Cyber competitions
• Coding clubs
• GCSE Computer Science
• A-level Computer Science
• University/Apprenticeship
• Work experience
