7 HTML/CSS Problem Solving Activities

last edited Sep 19 2017 by Greg Reid | Created by Greg Reid | Other contributors:

A variety of usable lessons designed to demonstrate different approaches to teaching web coding.


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)

Disclaimers:


By downloading this resource you agree to the CAS resource guidelines and use it appropriately.

Note: Unless otherwise specified, this resource and all associated files are published here under the Creative Commons Attribution-Share Alike 3.0 Licence. If you wish to use a different license, please state this in the description.

Read our resource guidelines

Feedback and Comments


Available when logged in (sign-up, for free):
  • View 0 comments on this resource.
  • View resource history, links to related resources.
  • Leave feedback for the author(s), or help by editing the resource.
Screenshot_of_completed_bakeoff_page

This resource has attached files: to access these files, please tick the box below to assent to the license terms

License: The resources on CAS website are under Creative Commons Attribution-Share Alike 3.0 licence unless otherwise specified by the resource creators.

You must confirm that you have read and agree the licence's ToS before you can download the attachments of this resource.

It has been downloaded 92 times.

I have read the licence agreement of this resource and agree to abide by its terms and conditions.
Categories: