1. Resources Home
  2. Primary
  3. Computing
  4. Algorithms and programming
  5. HTML / CSS / Javascript
7 Fun Problem Solving Activities for Web Coding

7 Fun Problem Solving Activities for Web Coding

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) 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)
snegreid
Scratch Hour of Code Vocabulary Jeopardy Game

Scratch Hour of Code Vocabulary Jeopardy Game

This fun and engaging Jeopardy Style Game is the perfect way to bond with your class all year long and learn scratch. I typically put the class into small groups and ask a member of the group to choose a color and number. That is the question that they have to answer. If correct they get one point. Then I move to the next group. Alternatively the whole class answers and then we tally up the points to get a winner. I run it on an interactive whiteboard but would be equally successful on a projector, computer or TV screen. Alternatively it could be run for an individual student on their own device. When you start the game press the shuffle button to randomize the questions ensuring that no game is ever the same. This means that this Jeopardy game came be used multiple times with the one class as it is different every time. Once you have unzipped the file you will find a PowerPoint Macro Show. To run the game double click the file and make sure you say "yes" to running macros. If you do not the questions will not shuffle correctly. I have tested on a PC but it should work on other devices. If this is your first time with Macros let me know by personal message and I am happy to answer all your questions. Enjoy
Kiwilander
Web Coding Problem Solving Homework 2

Web Coding Problem Solving Homework 2

This is a short written task is designed to following an introductory few lesson on HTML. The 15 minute, 15 mark homework sheet has four pages which use basic HTML tags to encourage students to learn the skill of finding errors in code. Question 1 shows a html file containing 10 deliberate errors. Students have to identify the position of each error and write in a correction. Question 2 consists of five similar problems. Students are shown a web page in a browser, each of which are not displaying as intended. Students told how the web page should have looked and have to identify what error may have been made in the code that would cause each page to display as shown. Question 2 may be used to generate lots of good discussion as often there may be several possible answers. This could easily be used as class written work or for staff absence cover. The download includes the original HTML files created while writing the questions. These may be used for demonstration, discussion or as part of your HTML course.
snegreid
JavaScript Town Name Generator

JavaScript Town Name Generator

Simple website demonstrating how JavaScript can be used to generate random town names. This resource can either be given to students to disassemble and edit, or for the teacher to learn how JavaScript can be used in class to create a simple resource that students will enjoy.
jsarnold
CSS Workbook 2

CSS Workbook 2

This workbook has been created to introduce the concept of the computer language CSS. This workbook follows on from the CSS 1 workbook that has been produced and will encourage students to learn knowledge, before having to apply this knowledge at the end of the workbook. It is all planned in easy to complete step by step tasks and can be a useful resource for introducing some of the concepts to students of CSS. This workbook focuses on some of the formatting that can be achieved from making use of CSS.
beebusinessbee1
CSS Workbook 1

CSS Workbook 1

This workbook has been created to introduce the concept of the computer language CSS. This workbook follows on from the HTML workbooks that have been produced and will encourage students to learn knowledge, before having to apply this knowledge at the end of the workbook. It is all planned in easy to complete step by step tasks and can be a useful resource for introducing some of the concepts to students of CSS.
beebusinessbee1
Introduction to HTML - KS2 Computing

Introduction to HTML - KS2 Computing

I tend use this lesson as an introduction to HTML before moving onto some of the amazing projects available on Code Club Projects. https://codeclubprojects.org/en-GB/webdev/ The worksheet introduces children to basic HTML using the following tags: Paragraph, Bold, Underline, Italic
MrMTeach
Teaching HTML Resource Bundle

Teaching HTML Resource Bundle

This HTML resource bundle includes 3 sets of student workbooks, which students can follow, enabling them to develop an understanding of HTML coding and progressing with this knowledge. Students are encouraged to complete shorter development tasks, before applying their knowledge to produce their own website. This website will continually be developed in each of the workbooks, until it is a fully completed and working website. This is a great resource for students of all ages, who are learning about HTML programming.
beebusinessbee1
HTML Student Workbook 3

HTML Student Workbook 3

This HTML workbook has been produced to help support students to develop their knowledge of the computer language HTML. This workbook follows on from the previous workbook that has been produced developing HTML skills. This workbook contains the final HTML tasks of the series which students can complete at their own pace, before containing an assessment piece at the end to assess if students have been able to consolidate the knowledge that has been imparted in this activity. The assessed task builds on that from previous lessons, enabling progress to be demonstrated. At the end of this activity students should now have a completed working website.
beebusinessbee1
HTML Student Workbook 2

HTML Student Workbook 2

This HTML workbook has been produced to help support students to develop their knowledge of the computer language HTML. This workbook follows on from the previous workbook that has been produced introducing HTML. This workbook contains HTML development tasks which students can complete at their own pace, before containing an assessment piece at the end to assess if students have been able to consolidate the knowledge that has been imparted in this activity. The assessed task builds on that from previous lessons, enabling progress to be demonstrated.
beebusinessbee1
Everything Bundle

Everything Bundle

Amazing value bundle at only £8 (worth £18) you will receive 9 premium resources including, Maths, Science and computing. Save 56% instead of buying these individually and only pay for 4! Amazing, huh?
yasith24