TPT
Total:
$0.00
7 Fun Problem Solving Lessons for Web Coding
7 Fun Problem Solving Lessons for Web Coding
7 Fun Problem Solving Lessons for Web Coding
7 Fun Problem Solving Lessons for Web Coding
7 Fun Problem Solving Lessons for Web Coding
7 Fun Problem Solving Lessons for Web Coding
7 Fun Problem Solving Lessons for Web Coding
7 Fun Problem Solving Lessons for Web Coding
Share

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)
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.

7 Fun Problem Solving Lessons for Web Coding

Rated 4.5 out of 5, based on 2 reviews
4.5 (2 ratings)
GReat Learning
276 Followers
FREE

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)
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

4.5
Rated 4.5 out of 5, based on 2 reviews
2
ratings
All verified TPT purchases
Rated 4 out of 5
June 8, 2024
Thank you. Useful resource for variety of subject course materials and activities
ISABEL C.
355 reviews
Grades taught: 9th
Rated 5 out of 5
June 24, 2018
Very excited to use in my summer camp web design course. Thanks for creating.
Beth H.
93 reviews

Questions & Answers

Loading
Loading