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 announcment, 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

• 09 October 2022  SR23 : Intro & evaluation of expectations & tooling
• 16 October 2022  SR23 : Basics Refresher HTML & CSS
• 23 October 2022  SR23 : Basics Refresher JavaScript
• 30 October 2022  SR23 : Basics Refresher JavaScript
• 06 November 2022  SR23 : Entry Level Challenge
• 13 November 2022 SR23 : Advanced JavaScript
• 20 November 2022 SR23 : Advanced JavaScript
• 27 November 2022 SR23 : Advanced JavaScript
• 04 December 2022 SR23 : Advanced JavaScript
• 11 December 2022 SR23 : Prototype 1: Typing Game
• 18 December 2022 SR23 : Prototype 1: Typing Game
• 08 January 2023  SR23 : Prototype 2: Memory Game Part 1
• 15 January 2023  SR23 : Prototype 2: Memory Game Part 2, state & storage
• 22 January 2023  SR23 : Project discussion & closing session
• 29 January 2023 SR23 : (buffer 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.

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:
    • Responsive Web Design and
    • JavaScript Algorithms and Data Structures
• 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:
  • Color Safe
  • Color Designer
  • Paletton
• 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