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 2022 SR21 : Intro & evaluation of expectations & tooling
- Session 1 slides
- Session 1 video intro @ base cloud (~ 22min/90MB)
- 14 October 2022 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)
- 21 October 2022 SR21 : Basics Refresher JavaScript
- 28 October 2022 SR21 : Basics Refresher JavaScript ctd.
- 04 November 2022 SR21 : Entry Level Challenge
- 11 November 2022 SR21 : Advanced JavaScript 1/4 - ECMAScript history, functions, callbacks and promises
- 18 November 2022 SR21 : Advanced JavaScript 2/4 - Loops
- 25 November 2022 SR21 : Advanced JavaScript 3/4 - Objects & Classes
- 02 December 2022 SR21 : Advanced JavaScript 4/4 - Sets, maps & more
- 09 December 2022 SR21 : Prototype 1: Typing Game
- 16 December 2022 SR21 : Prototype 1: Typing Game
- 13 January 2023 SR21 : Prototype 2: Memory Game Part 1
- 20 January 2023 SR24 : Prototype 2: Memory Game Part 2, state & storage
- 27 January 2023 SR24 : Project discussion & closing session
- 03 February 2023 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
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