Scribd
Upload
61 views3 pages

Unit Overview:: HTML/CSS Part 1

This document provides a unit overview for an HTML/CSS course taught over 3 parts. It outlines 18 lessons covering HTML basics, CSS introduction, selectors, positioning and more. Each lesson lists objectives, exercises and relates computational thinking concepts. Lessons typically last 15-30 minutes and build progression pathways into further IT, programming, algorithms and data courses. The overview gives the structure and flow of content to teach essential HTML and CSS skills.

Uploaded by

WlliamTorres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
61 views3 pages

Unit Overview:: HTML/CSS Part 1

This document provides a unit overview for an HTML/CSS course taught over 3 parts. It outlines 18 lessons covering HTML basics, CSS introduction, selectors, positioning and more. Each lesson lists objectives, exercises and relates computational thinking concepts. Lessons typically last 15-30 minutes and build progression pathways into further IT, programming, algorithms and data courses. The overview gives the structure and flow of content to teach essential HTML and CSS skills.

Uploaded by

WlliamTorres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

UNIT OVERVIEW: HTML/CSS Part 1

Time
Lesson Course Exercises Objectives Progression Pathways
(min)
Understand what HTML and CSS are used for
L1 algorithms AL
1. HTML Define some basic HTML terminology
1 1-8 L1 programming AL 20
Basics Explain and implement <head><title> <body> and <p> tags
L1 hardware AL
Create all types of headings <h1> to <h6>
Demonstrate knowledge of tags so far including <title>, <h3> and <p>
1. HTML Define hyperlinks, explain their use and create a link using <a>
2 9 - 14 L1/2 communication 20
Basics Understand and create an image tag <img>
Construct a linked image

Summative assessment of learning from HTML lessons 1 & 2


2. Build Your L2 communication
3 1-6 Create a webpage with an HTML frame, including a header, paragraphs, images and links 20
Own Webpage L2/3 information AB
in either images or text

Recognise HTML can be used to create lists


3. HTML Recognise indentation and explain why it is used L1 algorithms AL
4 1-6 20
Basics II Describe and create ordered and unordered lists L1 programming AL
Demonstrate how to use nesting with lists
Describe what inline CSS is
3. HTML
5 7 - 16 Use style attributes (including font-color, font-family, text-align) 20
Basics II
Demonstrate how to bold and italicise text

4. Social
Summative assessment of learning from HTML lessons 4 & 5
6 Networking 1-7 L5 algorithms AB AL 30
Create a social networking profile, including lists of their interests and styling"
Profile

Recognise structural tags <table>, <div> and <span>


5. HTML
7 1-5 Create a table with rows and columns and explain why we use them L2 data AB DE 20
Basics III
Construct a table with multiple rows and columns"

Design table formatting using style attributes


5. HTML
8 6 - 15 Illustrate how to use a <div> tag and use it to create a link 25
Basics III
Construct a paragraph with selective styling using the <span> tag"

Summative assessment of learning from HTML lessons 8 & 9


6. Clickable
9 1-7 Create a clickable photo page: a table with multiple rows and columns containing L2 communication 30
Photo Page
images that link to external websites

Computational thinking concepts: AB - Abstraction GL - Generalisation AL - Algorithms EV - Evaluation DE - Decomposition


UNIT OVERVIEW: HTML/CSS Part 2
Time
Lesson Course Exercises Objectives Progression Pathways
(min)

Explain what CSS is and the reason it is seperate from HTML


L1 hardware AL
7. CSS an Create a link to a CSS stylesheet
10 1 - 12 L1 programming AL 25
Overview Describe 'selectors', 'properties' and 'values' and implement property-values
L4 algorithms AB AL
Illustrate CSS syntax and comments

Explain why hexadecimal values are used in CSS


7. CSS an
11 13 - 21 Explain why 'em' units are needed and the need for default fonts as backups 20
Overview
Create backgrounds and borders and style them

7. CSS an
12 22 - 26 Plenary: Build a basic HTML index page and linked CSS stylesheet L3 I.T. 20
Overview

8. Design a
13 Button for 1-6 Plenary: Build a button by styling divs and links 15
Your Website

Describe branching, children, parents and siblings


9. CSS Demonstrate and understand how to format nested selectors and directly nested
14 1-9 L3 data 25
Selectors selectors
Explain which selectors will override others

Compare, Create and Implement Classes and IDs


9. CSS
15 10 - 18 Recognise and implement pseudo-class selectors for links (link, visited, hover) L3 data 30
Selectors
Understand and use a 'first-child' and 'Nth-child' pseudo-class selectors

9. CSS
16 19 - 23 Plenary: Construct HTML document and CSS stylesheet with selectors 15
Selectors
10. Sorting
17 1-8 Plenary: Synthesising Module 9: CSS Selectors L3 algorithms AB 40
Your Friends

Explain the box model and its importance in positioning


11. CSS Demonstrate and understand the main display properties and their differences
18 1 - 12 L4 algorithms AB AL 25
Positioning Explain and Implement margins, borders and padding
Describe how negative values impact the positioning of an element

Computational thinking concepts: AB - Abstraction GL - Generalisation AL - Algorithms EV - Evaluation DE - Decomposition


UNIT OVERVIEW: HTML/CSS Part 3
Time
Lesson Course Exercises Objectives Progression Pathways
(min)

Explain and demonstrate the float and clear properties


12. CSS
19 13 - 25 Explain static, absolute, relative and fixed positioning L5 communication 35
Positioning
Plenary: Compose a webpage using CSS positioning

L5 algorithms AB AL
13. Build a
20 1-8 Plenary: Synthesising Module 11: CSS Selectors L5 communication 60
Resume
L5 programming AB AL

Computational thinking concepts: AB - Abstraction GL - Generalisation AL - Algorithms EV - Evaluation DE - Decomposition

You might also like