Computing Science Conference: Hacking HTML, CSS and JavaScript

Live notes from Education Scotland's Computing Science Conference
#HigherCS

Colin Maxwell

Useful websites are:
Codecademy (Colin's favourite) - great for getting yourself up to speed and for pupils to set practical homework as no special tools required.

w3schools.com - not as interactive as codecademy but good reference site.

webmaker.org - from Mozilla. The x-ray goggles is good but start with Thimble. Similar to codecademy with tutorials but the advantage is you can save and share what you create.

All three of these are great because all you need is access to the Internet. Possible to do it with some fairly basic tools: web browser (Chrome preferred) and a text editor (Notepad++, Brackets, Sublime, ...)

Brackets is free, open source. It does Live HTML Development, supports JavaScript debugging (with Theseus extension) and loads of other extensions (e.g. Extension that provides colour palette to choose hex colour codes or "beautify" code).

How do we teach HTML? Colin started teaching programming by getting pupils to hack code. Start by giving web pages for them to hack. Example given of a web page that asks for a pin code then flick backwards and forwards between the code and the page. Get pupils to identify how the different parts relate to each other. Start with JavaScript version of a simple PIN code form then same form but using CSS to code it. You can show how style is improved and extra functionality added. Can open the JavaScript file and the CSS file alongside HTML file. This approach let's pupils see the completed jigsaw puzzle rather than just giving them the bits and no picture.

Colin then went on to show editing a web page in bracket. bracket lets you open all the files in a folder and shows them in a side bar for easy navigation. From a teaching point of view, you can zoom the text in a window, highlight lines and do live update of a web page. Set pupils tasks like change a grade, add a person don't tell them how, let them work it out. Makes it more than a "monkey see, monkey do" exercise.

CSS
Set tasks to place objects (Colin uses zombies) using div to place graphics - house a png which can have transparency (for windows and doors) and zombies as gif because they can be animated. Place the zombies in the windows and doors. Uses layers to get zombie inside house. Then give file to another pupil who will stack crates in front on the windows - again using div and layers.

Went on to show JavaScript game using JavaScript library called enchant. Again, hacking an existing page to do things like change frame rate and sprite being animated. The enchant library much easier to use than many. Colin uses JavaScript as his main programming language.

Ran out of time but check his blog for more.