Web based project I
Lesson details
Learning outcome
I can plan and build a structured website using HTML for content and CSS for styling, applying key web design principles.
Key learning points
- User requirements help define the purpose and features of the website.
- Wireframes and site maps help plan the structure and navigation of a website before coding.
- HTML provides the structure of each page, using semantic elements to make content more accessible and readable.
- CSS is used to create a consistent styling to match the original design plan.
Keywords
User requirement - something that the target audience wants in relation to the product
Semantic HTML - HTML elements that clearly describe their meaning and role in a web page
Common misconception
I don’t need a wireframe or site map, I can just start coding.
Planning is a key step in web development. A wireframe helps you decide where things go before writing any code, and a site map ensures you know how pages connect. Skipping planning often leads to messy code and confusing navigation.
Teacher tip
Pupils will have encoutered many uses of HTML in the world around them. Tailor the activities in the slides to best reflect the experiences pupils in your school will have had when using HTML-based technology.
Equipment
Pupils will need access to a device with HTML editing software. Examples in this lesson use the RPF Code Editor https://oak.link/html-editor
Licence
Lesson video
Loading...
Prior knowledge starter quiz
6 Questions
Q1.What is the purpose of JavaScript in web development?
Q2.What does the DOM represent?
Q3.What is an event listener?
Q4.Which of these is an example of an event that might trigger JavaScript?
Q5.Match each method to its purpose:
waits for user actions
outputs messages to the console
selects an element in the DOM
displays a pop-up message
Q6.A line of JavaScript needs to read a textbox on an HTML page and assign it to a variable. Complete the code to make this work.
1let password = document.__________("passwordEntered").value;Code colour
Assessment exit quiz
6 Questions
Q1.What is the purpose of user requirements in web development?
Q2.What does a wireframe represent?
Q3.What does a site map show?
Q4.Put these planning steps in order:
Q5.Which CSS feature ensures consistent styling across a website?
Q6.Why is semantic HTML important?
To help you plan your 11 computer science lesson on: Web based project I, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 11 computer science lesson on: Web based project I, download all teaching resources for free and adapt to suit your pupils' needs.
The starter quiz will activate and check your pupils' prior knowledge, with versions available both with and without answers in PDF format.
We use learning cycles to break down learning into key concepts or ideas linked to the learning outcome. Each learning cycle features explanations with checks for understanding and practice tasks with feedback. All of this is found in our slide decks, ready for you to download and edit. The practice tasks are also available as printable worksheets and some lessons have additional materials with extra material you might need for teaching the lesson.
The assessment exit quiz will test your pupils' understanding of the key learning points.
Our video is a tool for planning, showing how other teachers might teach the lesson, offering helpful tips, modelled explanations and inspiration for your own delivery in the classroom. Plus, you can set it as homework or revision for pupils and keep their learning on track by sharing an online pupil version of this lesson.
Explore more key stage 4 computer science lessons from the HTML programming project unit, dive into the full secondary computer science curriculum, or learn more about lesson planning.