Intro
Here you find all relevant information on the Artful Coding 1: web-based games development course that takes place in winter term 2022/23 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
- 05 October 2022 SR21 : Intro & evaluation of expectations & tooling
- 12 October 2022 SR21 : Basics Refresher HTML & CSS
- AC1S2 slides
- AC1S2 session plan
- AC1S2 recording part 1 @ base cloud (~ 23min/76MB)
- AC1S2 recording part 2 @ base cloud (~ 28min/85MB)
- AC1S2 extra demo recording @ base cloud (~ 29min/120MB)
- 19 October 2022 SR21 : Basics Refresher JavaScript
- AC1S3 slides
- AC1S3 session plan
- AC1S3 recording part 1 @ base cloud (~ 35min/115MB)
- AC1S3 recording part 2 @ base cloud (~ 25min/85MB)
- AC1S3 extra demo recording @ base cloud (~ 26min/94MB)
- 25 October 2022 SR21 : Basics Refresher JavaScript
- AC1S4 slides
- AC1S4 session plan
- AC1S4 recording part 1 @ base cloud (~ 33min/103MB)
- AC1S4 recording part 2 @ base cloud (~ 18min/58MB)
- AC1S4 extra demo recording @ base cloud (~ 12min/45MB)
- 31 October 2022 SR21 : Entry Level Challenge
- AC1S5 slides
- AC1S5 session plan
- AC1S5 recording @ base cloud (~ 40min/136MB)
- 09 November 2022 CR13 : Advanced JavaScript
- AC1S6 slides
- AC1S6 recording @ base cloud (~ 36min/114MB)
- 16 November 2022 self-learning : Advanced JavaScript
- AC1S7 slides
- AC1S7 recording @ base cloud (~ 20min/50MB)
- 23 November 2022 CR13 : Advanced JavaScript
- AC1S8 slides
- AC1S8 recording @ base cloud (~ 40min/127MB)
- AC1S9 slides
- AC1S9 recording @ base cloud (~ 37min/99MB)
- AC1S10_11 slides
- Zoom recording @ base cloud (~1h14min, ~200MB) - This is the double session recording from last year, featuring the full prototype creation. This year this process is split up in two parts. In this first session we created the HTML and CSS and prepared the JavaScript so far, that one could load a new quote and type into the input field, as well as do a full reset. The rest of the logic will be implemented in the next session.
- typing-game-wip.zip - State of the prototype code after this session.
- See slides and recording from last session.
- AC1S12 slides
- Zoom recording part 1 (~45min, ~185MB)
- Zoom recording part 2 (~35min, ~145MB) This is the recording from last year, featuring the same process we go through this session, to create the prototype version 1.
- memory-game-wip.zip - State of the prototype code after this session.
- AC1S13 slides
- Recording part 1 (~38min, ~155MB)
- Recording part 2 (~50min, ~225MB) This is the recording from last year, featuring the same process we go through this session, to create the prototype version 2.
All sessions take place at VZA7 from 17:00 to 18:30. The specific rooms are listed above after the session topics.
The individual session docs will be linked to throughout the course, shortly before each session takes place.
back to topExtra Sessions
Here you find some extra recordings and content that was produced for self-learning and to give more detailed explanations and use cases for the concepts encountered in the sessions.
- Why ... functions, loops, objects, and classes?
Developing a simple application from scratch, displaying life lines of two famous persons, and one ominous one. In the process we refine spaghetti code into a versatile arrangement of objects and functions.- AC1XtraWhy recording part1 @ base cloud (~ 66min/235MB)
- AC1XtraWhy recording part2 @ base cloud (~ 24min/91MB)
- Source Code v1 @ codepen.io that was created in the videos above.
- AC1XtraWhy recording part3 @ base cloud (~ 53min/210MB)
- Source Code v2 @ codepen.io that was created in the video above.
- Integrating p5.js scripts on your page
- AC1XtraP5js recording @ base cloud (~ 15min/45MB)
- and the p5.js demo page, as it was created in the recording
References & 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