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 2023/24 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.

09 October 2022 SR23 : Intro & evaluation of expectations & tooling
- Session 1 slides
- Session 1 video intro @ base cloud (~ 29min/100MB)
16 October 2022 SR23 : 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)
23 October 2022 SR23 : 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)
30 October 2022 SR23 : 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)
06 November 2022 SR23 : Entry Level Challenge
- Session 5 slides
- Session 5 video @ base cloud (~ 40min/136MB)
13 November 2022 SR23 : Advanced JavaScript 1/4 - ECMAScript history, functions, callbacks and promises
- Session 6 slides
- Session 6 recording @ base cloud (~ 36min/114MB)
20 November 2022 SR23 : Advanced JavaScript 2/4 - Loops
- Session 7 slides
- Session 7 recording @ base cloud (~ 20min/50MB)
27 November 2022 SR23 : Advanced JavaScript 3/4 - Objects & Classes
- Session 8 slides
- Session 8 recording @ base cloud (~ 40min/127MB)
- look for training exercises in the Open Course Book
04 December 2022 SR23 : Advanced JavaScript 4/4 - Sets, maps & more
- Session 9 slides
- Session 9 recording @ base cloud (~ 37min/99MB)
11 December 2022 SR23 : 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.
18 December 2022 SR23 : Prototype 1: Typing Game
- See slides and recording from last session. We'll continue where we left off in last session and implement the main game (processing) logic.
~~08 January 2023 SR23~~ : cancelled
15 January 2023 SR23 : Prototype 2: Memory Game Part 1
- Session 12 slides
- Recording part 1 (~45min, ~185MB)
- Recording part 2 (~35min, ~145MB)
  These are the recordings from 2021, 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.
22 January 2023 SR23 : Prototype 2: Memory Game Part 2, state & storage
- Session 13 slides
- Recording part 1 (~38min, ~155MB)
- Recording part 2 (~50min, ~225MB)
  These are the recordings from 2021, featuring the same process we go through this session, to create the prototype version 2.
29 January 2023 SR23 : Project discussion & closing session

All sessions take place at VZA7 from 16:00 to 17: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.

Extra 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.
- 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.
Part 2, refactoring to a class based approach:
- 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:
  - Responsive Web Design and
  - JavaScript Algorithms and Data Structures
- 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)
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