From CoderDojo Kata
Jump to: navigation, search



Resource Details

Title HTML-DublinSG-1
Area

Programming

Language HTML
Level Beginner
Length 8 Dojos
Medium Document
Format Google Doc
Author

CoderDojo SG



Summary

This is the course, initial created by No9 (Anton), for the Dublin Science Gallery CoderDojo. It aims to deliver:

  • Confidence with html and ability to make a webpage.
  • Understanding what is going on ‘behind the web page’, so that tags, css, variables, functions, https and JSON are not a mystery.
  • Introduction to animation and programming concepts, ready for more advanced courses.



Resources

A set of activity cards allows students in the same room to go at their own pace, trying out coding tricks that are at the level they choose. These start being used once the course has reached the ‘animation2.html’ example. Having these cards gives an additional way to check that we know what the students are and aren’t understanding.

Prerequisites

The course assumes no prior knowledge. It starts with a discussion about the internet and the sites the students like. We put together a list of what they want to achieve from the course.

Style

The course is practical. The emphasis is on seeing the results in a browser and trying out changes. It’s teaching by doing and seeing the results, the output, rather than by starting from the abstract concepts.


Content

Week 1-4

The first project is to build a simple site with HTML, H1, IMG, P tags. It’s followed over several weeks by each student building a well styled profile page using html and css. This develops familiarity with html and css and using an editor to change html and view the results in a web browser. Gradually the jargon gets covered including :

  • Html tags, pixels, gifs, hyperlink, attribute, div, CSS stylesheets.

We aim to have a strong foundation in all of this. Mentors go round the class making sure the students understand and encouraging them to make changes.

As the course develops, students also learn how to use resources like w3schools.com to find out information for themselves, and find the information they need to solve problems. They also learn to work with each other and teach each other – working on their own and in small groups.


Week 5+

Students will modify the html to get different outcomes, for example positioning a logo by editing the file. This is where animation and some programming now comes in. It starts with a javascript example, animation1.html, to animate the logo so that it keeps moving, bouncing from one side of the screen to the other. Over the next few weeks the students learn how to make changes to both the html and the javascript of this example. By doing this and modifying related examples they also learn some of the fundamentals of programming, such as variables, functions and events.


Week 8+

Where the course goes, what web pages we make, will follow from the students’ interests and from the list we built at the start of the course. Tools we’ll use include libraries like Bret Victor’s ‘tangle’ that make interactive web pages easier.