Cotswold_School_Logo_CMYK_100_72_0_0-01

Topic title: HTML and Website Development

Year group: 8

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 simple web page and display it in a browser
• Write CSS to define the styles used in a web page
• Create a simple navigation system using HTML
• Use a design to create a template for a web page using HTML
• Create their own multi-page website
• Insert text, images and links on their web pages

Most pupils will be able to:

• Use a range of HTML tags to create well laid out web pages
• Write CSS code to define the styles of different parts of a web page
• Use HTML and CSS to create their web page template
• Use the template to design a multi-page website with a consistent look and feel to each page
• Use responsive design techniques in creating their website so that the web pages will adapt to any size of screen
• Create a simple web form to collect user data

Some pupils will be able to:

• Add enhancements or additional features to the original basic design
• Construct a good-looking, well-formatted interactive website that is suitable for its intended audience

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 computing
• Resilience: when debugging code in a text-based language

ICT Skills:
• Software: Using integrated development environments (IDEs) to code programs
• Using tutorials
• Split screen working

Literacy Skills:
• Digital literacy: Coding using text-based languages
• Vocabulary: Learning new vocab and learning how it links to other subjects (variable and integer)

Where does this link into our past and future learning? 

No previous learning is necessary with this unit. Basic IT skills such as finding images and sizing or cropping them to fit a given space, selecting and editing text will be useful. Pupils should be aware of image size and its relevance to speed of loading a web page containing images.

Future learning topic: HTML & Website Development

How will we be assessed on this topic?

• End of topic assessment – 40 questions all based on unit learning.
• This will also contribute to the end of year exam.

What makes a strong piece of work in this topic?  

• Use of both HTML and CSS to build and style a website
• A clear layout that is easy to navigate (e.g. headers, menus, and sections)
• Consistent design choices (e.g. matching fonts, colour schemes, and spacing)
• A multi-page website with working links between pages
• Responsive or flexible layout (content displays well on different screen sizes)
• Appropriate use of images, headings, text formatting, and lists
• Good file organisation (e.g. using folders for images, linking stylesheets correctly)

What are teachers hoping to see?  

• Deeper understanding of HTML structure and correct use of semantic elements like <nav>, <main>, <section>, <footer>
• Ability to apply CSS rules correctly to style elements (e.g. using classes and IDs)
• A working site that shows navigation between multiple pages
• Students starting to consider user experience: clarity, accessibility, and visual appeal
• Attention to detail and a willingness to test and fix errors
• Evidence of independent thinking and creativity, not just copying examples

What key words are there in this topic?

Quizlet – Computer Science 

What can I try if I want to stretch and challenge myself on this topic?

• Use external stylesheets to keep HTML and CSS code separate and organised
• Explore advanced CSS techniques (e.g. hover effects, transitions, layout with Flexbox or Grid)
• Add a form to your website and understand how form elements work
• Try building a mobile-friendly (responsive) design using media queries
• Experiment with custom fonts and colour palettes using Google Fonts or online tools
• Begin learning basic JavaScript to add interactivity (e.g. buttons that respond to clicks)
• Look at real websites for inspiration and try recreating a simplified version
• Use developer tools in a browser to inspect and tweak your code in real time

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