Welcome back!

If you'd like a digital copy of the summer workshop handout for revision, you can grab it here.

Winter Workshop

The winter workshop introduces more HTML, JavaScript and how to use Codepen. The handout is available digitally here. The workshop slides are here for your reference.

Codepen for the JavaScript exercise

Codepen for the completed Javascript exercise (you can use this for the design exercise)

Cool Demos

These are just some examples of the power of the languages you're learning - each of these uses only HTML, CSS and/or JavaScript to do some really cool stuff! The best part is that many of these are CodePens which you can fork (like in the workshop) and play around with yourself. If there's anything that really excites you, take some time to see if you can figure out how it's doing some of what it's doing - it's a great way to learn! (Also, check out the other CodePens by the same people if you liked their work.)

• CSS-only fancy text effects by Mandy Michael - CodePens full of the kind of thing you saw in WordArt, except much cooler and done completely in CSS. Make sure you open these up, many of the previews don't reflect the actual output in browser.
• Interactive Mooncake from Final Space - Made in CSS and Javascript, no external images. Chookity!
• An animated husky made entirely in CSS.
• Another super-cool no-JavaScript animation by Ana Tudor
• An interactive logo by Chris Gannon
• Dwitter - demonstrations of what you can do with only 140 characters or less of JavaScript (the old character limit for Twitter) and a browser canvas (an HTML element that lets you draw graphics on it). There are some fantastic animations and amazing use of colours, and you can "remix" another dweet to put your own spin on it.
• Generative Artistry - tutorials for beginning to use JavaScript to generate neat artwork using the same kind of techniques as on Dwitter (but more understandably)! You can use CodePen to follow along with these tutorials - you'll need to add a <canvas> element in the HTML box as mentioned, and then you can follow the JavaScript.
• Gorgeous 3D animations and effects by Gerard Ferrandez
• Chill the Lion - a CodePen that uses a JavaScript library called three.js to create and interact with 3D graphics in the browser. We've only looked at some "vanilla" JavaScript in today's workshop, but with JavaScript's popularity there are literally thousands of libraries out there that can help you with more specialised applications of the language, so you don't have to write everything from scratch all the time. The three.js page has plenty more examples of its use!
• Visual Cinnamon data art - while you can't view the source code for these, they're a great example of what can be done with JavaScript and some data! A common use of Javascript is (interactively or otherwise) visualising data - you've probably seen a lot of news website features that use this, for example. Visualising data is much more interesting than just plotting points on a graph these days - we can make things interactive and automatically use colours and shape to show features of the data, to the extent that you can make beautiful art like this from it!
• Nicky Case's educational interactives
• elevator.js. This is ridiculous. And amazing. Turn your sound on.

Resources and References

• Mozilla's web docs for HTML, CSS and JavaScript - contains tutorials and references for the languages
• Mozilla browser event reference, as mentioned in the workshop handout
• CSS-Tricks - articles on how to do things with CSS and solve current problems, as well as a reference ("Almanac") and example snippets. This is more useful when you're a little more advanced in CSS, but it's a fantastic reference for that!
• Grok Learning - you have an account with this site that you can use to work through courses in several different programming languages for the rest of the year