A variety of usable lessons designed to demonstrate different approaches to teaching web coding.
Created by Greg Reid
last edited Sep 19 2017 by Greg Reid
These 7 usable lessons were written to be delivered as part of a Scottish Qualifications Authority workshop to discuss with Computing Science teachers alternative ways to deliver web coding.
They are designed to introduce fun problem solving exercises (some paper-based, some practical) and are intended to be used as lessons starters or simply to break up longer coding exercises.
The lessons cover:
1. Basic Tags/Elements (h1, h2, p, title)
Pupils are given cut out pieces of web content and code and must arrange the pieces on a blank A3 HTML template printout.
2. Coding Basic Tags (h1, h2, p, title) Pupils are given an HTML file with page content (as a single paragraph of text) but no elements. They must separate the text out and add tags to format the content. They are also asked to research how to create the bullet point list required by the task.
3. Division Tags (div) Similar to lesson 1 but introducing the concept of sectioning off a page using division tags.
4. Adding In-line Styles (text colour, text size, background colour, fonts) Pupils are given an HTML file, printed on A3 paper, with spaces for styles to be added. They must arrange a number of cut-out styles on the HTML file to match a screenshot of a finished page.
5. Adding In-line Styles Pupils are given an screenshot of a finished page with annotations showing colours, fonts and text-sizes used. They must edit the styles in a given file to match the finished page.
6. External Style Sheets Pupils are shown the same site implemented using in-line and then an external stylesheet. This is used to discuss the advantages of external styles. Their task this time is to edit, delete and add to the stylesheet to alter the look of the website to match a fnished example.
7. Cascading Order Pupils are given 5 A3 sheets each which shows an HTML file, a CSS file and a screenshot of the page when shown in a browser. These examples must be examined carefully and used to research the precedence order used when a browser interprets styles (i.e. In-line over-rules external, ID overrules external). This a a difficult task requiring a lot of code reading and problem solving.
Level: (Beginner / Intermediate)
Duration: (Around 3 to 4 hours in Total)
Teaches: (See above)