CSS for layout
Lesson details
Learning outcome
I can design a wireframe plan of a web page layout and create it using HTML and CSS.
Key learning points
- Wireframe designs can be used to plan the layout of a web page.
- The CSS box model explains how HTML elements are structured and spaced on a web page.
- The position of divisions can be controlled by using the floating property of a tag.
- Divisions can be placed inside other divisions to control groups of content.
Keywords
House style - an agreed design that is used to style the content in a consistent way
Wireframe - a plan that outlines the basic structure and layout of visual content
Floating - allowing HTML elements to be positioned in different ways
Common misconception
Divisions can only be arranged as regular rows and columns.
By using divisions within other divisions any layout of a page is possible.
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
Access to the Raspberry Pi Foundation's Code Editor or some other means of creating HTML files.
Licence
Lesson video
Loading...
Prior knowledge starter quiz
6 Questions
Q1.Match the term to its definition.
Q2.What is a division in a web page?
Q3.What is the purpose of a class in HTML?
Q4.Which HTML tag is used to define a division?
Q5.What is an attribute in HTML?
Q6.What is the benefit of using class names in HTML?
Assessment exit quiz
6 Questions
Q1.What term describes a plan that outlines the basic structure and layout of visual content?
Q2.Order the steps to design and create a webpage layout.
Q3.What does the CSS box model explain?
Q4.What is the purpose of the floating property?
Q5.How can divisions be used to control groups of content?
Q6.What is a house style?
To help you plan your 11 computer science lesson on: CSS for layout, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 11 computer science lesson on: CSS for layout, 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.