Description
These 7 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)
Students 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)
Students 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 color, text size, background color, fonts)
Students 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
Students are given an screenshot of a finished page with annotations showing colors, fonts and text-sizes used. They must edit the styles in a given file to match the finished page.
6. External Style Sheets
Students 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
Students 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)
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)
Students 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)
Students 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 color, text size, background color, fonts)
Students 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
Students are given an screenshot of a finished page with annotations showing colors, fonts and text-sizes used. They must edit the styles in a given file to match the finished page.
6. External Style Sheets
Students 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
Students 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)
Report this resource to TPT
Reported resources will be reviewed by our team. Report this resource to let us know if this resource violates TPT's content guidelines.
FREE
Highlights
Grades
7th - 12th
Subjects
Pages
18
Teaching Duration
3 hours
Description
These 7 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)
Students 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)
Students 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 color, text size, background color, fonts)
Students 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
Students are given an screenshot of a finished page with annotations showing colors, fonts and text-sizes used. They must edit the styles in a given file to match the finished page.
6. External Style Sheets
Students 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
Students 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)
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)
Students 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)
Students 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 color, text size, background color, fonts)
Students 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
Students are given an screenshot of a finished page with annotations showing colors, fonts and text-sizes used. They must edit the styles in a given file to match the finished page.
6. External Style Sheets
Students 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
Students 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)
Report this resource to TPT
Reported resources will be reviewed by our team. Report this resource to let us know if this resource violates TPT's content guidelines.
Reviews
All verified TPT purchases
Thank you. Useful resource for variety of subject course materials and activities
Very excited to use in my summer camp web design course. Thanks for creating.
Questions & Answers
Loading
Loading




