HTML & CSS - C@SS Conference

Colin Maxwell, Adobe Generation

From the blurb: Big Picture, Little Picture – A different approach to teaching coding with HTML, CSS and Javascript, with examples you can take away and use in your own classroom. Includes an introduction to Adobe Brackets, the brand new and totally free code editor.

{Live capture}

(Colin is doing an online JavaScript programming course and has invited us to leave him details so we can join.)

The stuff he is talking about is on his blog.

Good source of information is Adobe Education Exchange; codeacademy (partnered with Education Scotland to produce material inline with Scottish curriculum - coming soon); webmaker (from Mozilla - can save and share work); Code.org (hour of code activities etc.).

Colin also recommended Brackets - an open source code editor which supports live HTML development, code hinting, JavaScript debugging, extensions for Python... And it runs from a pen drive (no problems with installing on school machines). He introduces HTML with a simulated hacking exercise - guess a four digit PIN. Showed how brackets highlights the HTML code when you click on the elements in the web page. First form just hardwires the PIÑA into the HTML. Second iteration uses CSS, so PIN not in HTML, it is in a file. Introduces external files and style sheets. Again, you can click on the code and the web page changes. For example, click on a colour code, change it and the web page changes.

Colin says he got the idea from a Micro Adventure book e.g. Space Attack, where you read a story where you had to write code to solve problems and move to the next bit of they story. Colin keen on the idea of using stories to move learning along. Another example is a CSS zombie/drone game. CSS positioning is used to place objects. One person has to write CSS a to position objects in a room. Second person then blocks the windows and doors - about 12 minutes for the whole exercise.

Offline activity from the webmaker site. Web page includes some simple elements, a story, perhaps a table and some CSS. Cards contain HTML elements which are dealt out to pupils who then have to play them in order to build up the page.

HTML 5/JavaScript game coding webinar starts this Tuesday2 December from 7pm-8pm. Starting with a simple platform game - give them it complete and let them hack it!