Intro
Here you find all relevant information on the Artful Coding 1: web-based games development course that takes place in winter term 2021/22 at dieAngewandte.
This page is intended to provide you all necessary links throughout the course as well as some background information on how the course is created. It also serves as a demo page for the intro sessions.
You will find below the links to all session materials, as well as some contact options to the lecturer. For the detailed announcment, including infos on registration, requirements and the grading schema, check out the Artful Coding: web-based games development 1 in the teaching base.
Dates & Session Material
- 13 October 2021 : Intro & evaluation of expectations & tooling
- 27 October 2021 : HTML, CSS & JS basics refresher:
- 17 November 2021 : Advanced Javascript, ES6 and beyond, jquery
- 24 November 2021 : Typing game
- 15 December 2021 : Memory game part 1
- 12 January 2022 : Memory game part 2, state & storage
- 26 January 2022 : Recap and reflection, final project and organisatianal stuff, Guest lecture on game design & dev by Kathrin Radtke
All sessions take place from 14:00 to 17:00 in seminar room 24 at VZA7.
The individual session docs will be linked to throughout the course, shortly before each session takes place.
back to topReferences & Tools
Here are some links and tools that will help you throughout the course, and which tend to be revisted over and over again by all sorts of web developers (remember: the Art of Coding is not remembering exactly how you did a thing some time ago, but to know what you want to implement and some ways to find out how to do it):
-
The basics:
- MDNs Getting Started with the Web Guide
- Learn HTML @ MDN
- HTML Tutorial @ W3schools
- Learn CSS @ MDN
- CSS Tutorial @ W3schools
- Learn JavaScript @ MDN
- Learn JavaScript - interactive learning environment (requires GitHub account)
- JavaScript Tutorial @ W3schools
- For a deep-dive: FreeCodeCamp courses - especially:
-
Editors/IDEs:
- Atom
- HTML Preview extension for Atom (in Atom go to Settings -> Install and search for the package to install it)
- Visual Studio Code
- HTML preview extension for Visual Studio Code
- VSCode in the browser (no setup needed)
- WebStorm
- Colors and color schemes:
-
Web accessibility:
- Intro to Web Accessibility @ WebAIM
- W3C Validator - check ther markup of your HTML files
- WAVE - web accessibility evaluation tool
-
Other useful tools and stuff and further resources:
- Front-End Foxes annotated list of Learn To Code Resources
- Lorem Picsum
- CSS Playground
- Glitch - browser based collaborative web dev environment
- replit - real time collaboration on code
-
Inspirational:
- Linda Liukas @ TEDxCERN: The poetry of programming (12min on YouTube)
- Zach Latta @ TEDxYouth@Tallinn: The Art of Code (9min on YouTube)
- Dylan Beattie @ NDC London 2020: The Art of Code (1h on YouTube)
- The Python Programming Song (6min on YouTube) by Kim Ly Lam & Fynn Freund
Concept & planning notes meta
This section is here to explain how the whole course is set up and planned. It follows an open source approach to teaching. Please feel free to adopt everything you can find here, if it is useful for your own teaching/workshop/skillshare/* setting.
If you have feedback or suggestions, or just want to share how similar things worked for you, I would love to hear about them. In the next section you find different ways to contact me.
- Course description & announcements
- General concept notes
- Session plans (same as in the Dates & Session Material section above):