Web Coding: Intro to Web Development and Game Prototyping
Here you find all relevant information on the Web Coding: Intro to Web Development and Game Prototyping course that takes place in winter term 2024/25 at dieAngewandte.
Intro
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 announcement, including infos on registration, requirements and the grading schema, check out the Web Coding: Intro to Web Development and Game Prototyping in the teaching base.
Dates & Session Material
Open Course Book: this is the documentation of the whole course, including when and what we did. It will be extended session by session. While the web page here links to the slides and videos for the single session and provides some generally useful links, the open course book will contain all details about specific tasks and exercises, grading and tooling, as well as the didactic design of the single sessions.
- 07 October 2024 SR21 : Intro & evaluation of expectations & tooling
- Session 1 slides
- Session 1 video intro @ base cloud (~ 22min/90MB)
- 14 October 2024 SR21 : Basics Refresher HTML & CSS
- Session 2 slides
- Session 2 video part 1 @ base cloud (~ 23min/76MB)
- Session 2 video part 2 @ base cloud (~ 28min/85MB)
- Session 2 extra video @ base cloud (~ 29min/120MB)
- 21 October 2024 SR21 : Basics Refresher JavaScript
- Session 3 slides
- Session 3 video part 1 @ base cloud (~ 35min/115MB)
- Session 3 video part 2 @ base cloud (~ 25min/85MB)
- Session 3 extra video @ base cloud (~ 26min/94MB)
- 28 October 2024 SR21 : Basics Refresher JavaScript ctd.
- Session 4 slides
- Session 4 video part 1 @ base cloud (~ 33min/103MB)
- Session 4 video part 2 @ base cloud (~ 18min/58MB)
- Session 4 extra video @ base cloud (~ 12min/45MB)
- 04 November 2024 SR21 : Entry Level Challenge
- Session 5 slides
- Session 5 video @ base cloud (~ 40min/136MB)
- 11 November 2024 SR21 : Advanced JavaScript 1/4 - ECMAScript history, functions, callbacks and promises
- Session 6 slides
- Session 6 recording @ base cloud (~ 36min/114MB)
- 18 November 2024 SR21 : Advanced JavaScript 2/4 - Loops
- Session 7 slides
- Session 7 recording @ base cloud (~ 20min/50MB)
- 25 November 2024 SR21 : Advanced JavaScript 3/4 - Objects & Classes
- Session 8 slides
- Session 8 recording @ base cloud (~ 40min/127MB)
- also check out the training exercises in the Open Course Book
- 02 December 2024 SR21 : Advanced JavaScript 4/4 - Sets, maps & more
- Session 9 slides
- Session 9 recording @ base cloud (~ 37min/99MB)
- 09 December 2024 SR21 : Prototype 1: Typing Game
- Session 10 & 11 slides
- Zoom recording @ base cloud (~1h14min, ~200MB) - This is the double session recording from 2021, featuring the full prototype creation. This year the process is split up in two parts. In this first session we create the HTML and CSS and prepare the JavaScript so far, that one can load a new quote and type into the input field, as well as do a full reset. So everything up to including the slide Setting up next quote. The rest of the logic will be implemented in the next session.
- typing-game-wip.zip - State of the prototype code after this session.
- 16 December 2024 SR21 : Prototype 1: Typing Game
- 13 January 2024 SR21 : Prototype 2: Memory Game Part 1
- 20 January 2024 SR24 : Prototype 2: Memory Game Part 2, state & storage
- 27 January 2024 SR24 : Project discussion & closing session
- 03 February 2024 SR24 : buffer / gaming session
All sessions take place at VZA7 from 16:00 to 18:00.
Except on Oct. 14 we start at 16:30.
The individual session docs will appear in the list above throughout the semester. Usually the docs for the next session will be linked at the end of every session, so you can start to prepare right away.
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.
- Nothing here yet ... will be extended along the course
- 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.- XtraWhy recording part1 @ base cloud (~ 66min/230MB)
- XtraWhy recording part2 @ base cloud (~ 24min/90MB)
- Source Code v1 @ codepen.io that was created in the videos above.
- XtraWhy2 recording @ base cloud (~ 53min/207MB)
- Source Code v2 @ codepen.io that was created in the video above.
-
Integrating p5.js scripts on your page
- XtraP5js recording @ base cloud (~ 15min/44MB)
- 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 revisited 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:
- And for the comprehensive old-school way of reading a book:
- Ethan Brown: Learning JavaScript. O'Reilly. 2016. (available as e-book in our library)
-
Editors/IDEs:
- Visual Studio Code (VS Code)
- HTML preview extension for VS Code
- LiveServer (with hot-reload) extension for VS Code
- VS Code in the browser (no setup needed)
- WebStorm
- Atom (most beloved by many devs, but was unfortunately sunset in Dec. 2022 - many people switched to VS Code then)
- Pulsar A Community-led Hyper-Hackable Text Editor (successor of atom)
- 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
- CodePen - social development environment for front-enders
- More explanations and deep-dives of specific JavaScript aspects:
- Sarah Chima Atuonwu @ freeCodeCamp: Var, Let, and Const – What's the Difference?
- Esther Christopher @ freeCodeCamp: How Does JavaScript Work Behind the Scenes? JS Engine and Runtime Explained
- Web Dev Simplified: JavaScript ES6 Modules (8min on YouTube)
and ES6 JavaScript Modules article @ Web Dev Simplified Blog - Mejin Leechor @ JavaScriptLA meetup: JavaScript Modules Past & Present (45min on YouTube)
-
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