# Web Coding - Open Course Book 2024
This page is the open course book to document contents, organisation and progress of the course [Web Coding: Intro to Web Development and Game Prototyping](https://base.uni-ak.ac.at/courses/2024W/S04916/) in winter term 2024 at the University of Applied Arts Vienna. For more context, and all the the relevant materials visit the **[Course Web Page](https://tantemalkah.at/web-coding/2024wt/)** .
# Session 1: Course Overview
> Timing: 10min
In this introductory session we will go through the contents and modalities of this course. We will get to know each other a little bit and talk about our different expectations towards the course, ourselves and the class.
In the first 10 minutes the arriving participants can position themselves on flip charts with sticky dots and notes towards the following questions:
* 2d-diagramme: How new is the topic of this course to me? How much coding experience do I already have?
* 2d-diagramme: How much time do I have this semester for my studies? How many courses have I registered for?
* word cloud: What do I think I will learn in this course?
## Intro of lecturer + course outline
> Timing: 20min
* A short introduction about the lecturer and their approach.
* Overview of the course sessions and how they will work.
* (Grading will be discussed later on)
## Get to know the group with (live action) sociogrammes
> Timing: 25min
Lecturer asks questions and people use the physical space to position themselves,
while coordinating with other participants on where which positions are.
After each question the lecturer asks the groups of participants what their position represents.
Questions:
- When did you visit your first course at dieAngewandte?
- How much XP do you have with HTML & CSS?
- How much XP do you have with JS?
- How many hours a week (on average) do you invest/waste/inwaste in gaming?
- Pen & paper or MMORPG?
- Did you already create a digital game once?
- Did you already create an analog game?
- Coding-related courses visited at the Angewandte?
- … open for participant questions …
## Get to know your expectations
> Timing: 15min
Think about the following questions and write down sticky notes with your expectations (3 min single work):
* What do you expect of / want from:
- the course contents/topics
- yourself and the class participants
- the lecturer
Then every participant introduces themselve to the class with the following points and your expectation sticky notes, which can be pinned onto the corresponding flip-charts:
- your name / how you would like to be addressed
- why did you choose this course / what do you expect?
- what would you like to learn / improve on most within this course?
## Course modalities + notes on grading
> Timing: 10min
Lecturer picks up on the statements from the expectation round and provides some insights into what we will be able to do (and what not) within this course. The main focus is aligning expectations with available time investments. 2 ECTS is very little, to learn and practice coding and game dev. Outcomes will depends on whether and how much people want/can invest into the course beyond the necessary.
As noted in the announcement the grading will be based on:
- 20%: Attendance & active participation
- 40%: Coding exercises
- 40%: Final mini project
For ease of calculations participants will be able to gather a total of 100 points, consisting of:
20 points for active participation, which means answering questions aligned with the course sessions in our base chat group. Every session there will be a specific question marked for these active participation points. Per question you can gather 2 points by answering those, up to a total of 20 points.
40 points for 3 coding exercises:
- 30 points for the fizz-buzz example (entry level challenge)
- 5 points each for reimplementing the typing game and the memory game
40 points for the final mini project:
- 20 points for submitting a modified version of one of the prototypes
- 10 points for a logic change/extension in the game prototype
- 10 points for a creative change/extension in the game prototype
Deadlines for submissions:
- entry level challenge: end of Nov
- prototype 1: end of Dec
- prototype 2: end of Jan
- final project: end of Feb (with optional extension for 1 month, on request)
Your final grade then will be based on the total points you got in the course:
- 80-100 points: 1
- 70-80 points: 2
- 60-70 points: 3
- 50-60 points: 4
- 0-50 points: 5
A grading tool will be available from November onwards. There you can check your progress. You will receive your personal credentials after submitting the entry level challenge.
## Joining our base chat channel
Log in to [base chat](https://chat.uni-ak.ac.at/) and send a message to jackie (**andrea.klaura**), so ze can add you to our channel, which we will be using for asynchronous (and even some synchronous) communication during the course. Also the active participation will be handled through this channel.
## Open questions + notes on tooling
> Timing: 10min
In the next session we will start with a quick recap of HTML basics as well as a suggestion for tooling withing the course. For those who want to skip the first basic sessions, here are some notes on what we will use within the course:
- Web browsers: Firefox and Chromium, and the web dev tools
- IDEs: VisualStudio Code (WebStorm is fine too, Atom as well, but unfortunately M$ decided to end it with Dec. 2022)
- a base scaffold folder, containing:
- index.html scaffold
- styles.css
- main.js
- assets/ folder
- Optional: keep [devdocs.io](http://devdocs.io) in a pinned browser tab
- base cloud folders for this course to submit exercises
- base chat group for course-related communication
# Session 2: Basics Refresher HTML & CSS
## Preparation materials
Watch the **Session 2 video part 1** and **Session 2 video part 2**, which are linked on the course web page. Or just quickly check out the **Session 2 slides**, which are also linked there. If everything in it already makes sense to you, you are good to go. Otherwise, take some time to delve into the videos and the materials used in it.
### For the three basic refresher sessions:
Disclaimer for folks with prior coding experience:
> For those who are already familiar with the basics of web design & development and got a glimpse on how Javascript works, the three basics refresher sessions might be a bit dry (!= [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)), dull or boring. But we need to establish a common basis first, so that everyone can create simple web pages and integrate Javascript code into it. If you want to get a quick overview whether it is worth for you to come to our in person sessions, just go through the slides before each session. If all the concepts there make sense for you and you feel comfortable applying them to solve the in-class exercise listed below, feel free to skip the basic refresher session (but think about answering the active participation question in our base chat channel).
For this and the next two sessions we will walk along the lines of the [MDNs Getting Started with the Web Guide](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) and go through the HTML, CSS and JS basics. Take the following links as extended references. If you fell a bit overwhelmed or don't know where to start, just focus on the two videos for this session. We will have time to dive deeper in the session itself.
Further resources on
* HTML:
- https://developer.mozilla.org/en-US/docs/Learn/HTML
- https://www.w3schools.com/html/default.asp
* CSS
- https://developer.mozilla.org/en-US/docs/Learn/CSS
- https://www.w3schools.com/css/default.asp
* JS:
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript
- https://learnjavascript.online/ (needs a GitHub account)
- https://www.w3schools.com/js/default.asp
* If you really want to dig deep (past this course):
- https://www.freecodecamp.org/learn
- Especially the Responsive Web Design (300h) and the JavaScript (300h) courses
## Session outline
### Part 1: arrival, mumble groups & active participation question
> Timing: 15min
Upon arrival participants answer the active participation question on our base chat channel. Once someone answered the question, they look for one or two other participants to join with into a mumble group. In this small (mumbling) group (as to not disturb the others too much) they talk about how the prep work went, which issues they faced so far, and what would be the most important points for the lecturer to highlight/revisit in the upcoming half hour.
Active participation question for the chat:
* Which concepts from the preparation materials where the newest to you and which did you find hardest to grasp?
### Part 2: questions, feedback, and demoing
> Timing: 30min
This is an open slot to work on the questions that came up before.
### Part 3: in-class exercise
> Timing: 30min
We will shortly introduce the in-class exercise (see below) and everyone tries to get started with it. While some might finish it in class, others will be able to continue after class. The important point here is to take the first steps and figure out where to go next.
### Part 4: sharing & revealing of solutions & prep for next session
> Timing: 15min
Finally those who already solved the exercise can share their results. Also an extra video will be revealed on how to solve the exercise (or rather: on one specific way to solve it, as there are usually different ways to do so).
And before we leave, we'll have a short look on what the next session is about and how to prepare for it.
## In-class exercise and co-working
Create a page, containing at least:
* 1 heading
* 2 paragraphs
* 1 unordered list
* 1 image
* 1 button (without functionality - it does not have to do anything when you click on it)
Also apply some styling, so it looks different than the standard HTML version. In the end your page could look like this (or completely different - this is just the version from the MDN Getting Started guide mentioned below), plus some random button wherever you think it might make sense (maybe try out different positions to figure out which one is most appealing to you):
If you are unsure how to tackle this, just follow the MDN guide and create the page just as they do it. You still can change content and styling once everything works.
Helpful resources:
* [MDNs Getting Started with the Web Guide](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) - see the sections on HTML, CSS and JS
* [Lorem Picsum](https://picsum.photos/)
* [CSS Playground](https://www.css-playground.com/)
* For colors / color schemes:
- [Color Safe](http://colorsafe.co/)
- [Color Designer](https://colordesigner.io/)
- [Paletton](https://paletton.com/)
# Session 3: Basics Refresher Javascript
## Preparation materials
Watch the **Session 3 video part 1** and **Session 3 video part 2**, which are linked on the course web page. Or just quickly check out the **Session 3 slides**, which are also linked there. If everything in it already makes sense to you, you are good to go. Otherwise, take some time to delve into the videos and the materials used in it.
## Session outline
### Part 1: arrival, mumble groups & active participation question
> Timing: 10min
Upon arrival participants answer the active participation question on our base chat channel. Once someone answered the question, they look for one or two other participants to join with into a mumble group. In this small (mumbling) group (as to not disturb the others too much) they talk about how the prep work went, which issues they faced so far, and what would be the most important points for the lecturer to highlight/revisit in the upcoming half hour.
Active participation question for the chat:
* What is your preferred way to include Javascript in your HTML page and why? Is it a deliberate decision or more or less just a thing you keep using for convenience? How familiar are you with other ways to do so?
### Part 2: Algorithmic Name Remember Game
> Timing: 20min
All participants shuffle into a line and as a group execute the following algorithm, based on the line being the `list` and comparing their names alphabetically:
```
FUNC bubble_sort ( list ) :
len = length( list )
i = 0
LOOP WHILE i < len :
k = 0
LOOP WHILE k < len - i - 1 :
IF list[k] > list[k+1] :
swap( list[k] , list[k+1] )
END IF
k = k + 1
END LOOP
i = i + 1
END LOOP
END FUNC
```
If the algorithm can be executed quickly, the group can do another attempt with a different type of characteristic for the comparison (e.g. height, semesters at the angewandte, ...)
### Part 3: questions, feedback, and demoing
> Timing: 30min
This is an open slot to work on the questions that came up before.
### Part 4: in-class exercise
> Timing: 30min
We will keep working with the page created in/after last session and extend it with some interactivity. Here is the concrete task to start with in session (and finish until next one):
Add the following functionality to the page developed in session 2:
- When the user clicks on the image, it changes (e.g. switch between two images; could also use more or random images)
- When the user clicks on the button, the user is asked for a user name and the heading is changed accordingly to greet the user
# Session 4: Basics Refresher Javascript, Part 2
## Preparation materials
Watch the **Session 4 video part 1** and **Session 4 video part 2**, which are linked on the course web page. Or just quickly check out the **Session 4 slides**, which are also linked there. If everything in it already makes sense to you, you are good to go. Otherwise, take some time to delve into the videos and the materials used in it.
## Session outline
### Part 1: arrival, mumble groups & active participation question
> Timing: 15min
Upon arrival participants answer the active participation question on our base chat channel. Once someone answered the question, they look for one or two other participants to join with into a mumble group. In this small (mumbling) group (as to not disturb the others too much) they talk about how the prep work went, which issues they faced so far, and what would be the most important points for the lecturer to highlight/revisit in the upcoming half hour.
Active participation question for the chat:
* Which aspect of JS that we went through so far bugs you the most? Or asked differently: what was the hardest to grasp so far? Please also post, if someone else already posted it.
### Part 2: questions, feedback, and demoing
> Timing: 45min
This is an open slot to work on the questions that came up before.
### Part 3: in-class exercise
> Timing: 30min
We will keep working with the page created in/after last session and extend it with some interactivity. Here is the concrete task to start with in session (and finish until next one):
Add the following functionality to the page developed in session 3:
- After the user entered their name, start a loop that counts from 0 to 100 and print each number to the console.
- Create an array containing several short sentences. Then create a loop that walks through this array and prints every sentence to the console, except when the sentence has less than 10 characters (spaces included). If the loop encounters an empty string, instead of a sentence, it should be stopped immediately.
# Session 5: Entry Level Challenge
## Preparation materials
Watch the **Session 5 video**, which is linked on the course web page. Or just quickly check out the **Session 5 slides**, which are also linked there. While the video is from last year's course and the dates are not accurate, the content is still valid and also the challenge deadline still is end of November (now only 2023). Details on the challenge requirements below.
## Session outline
### Part 1: arrival, mumble groups & active participation question
> Timing: 15min
As usual people form mumble groups, to talk about the prep materials, after they answer one (or both) of the following active participation questions in the chat:
* What was the most unclear in the prep materials for this session?
* Given the basic understanding of HTML, CSS and JS, we established in the last few sessions, are you missing any specific inputs/hint on how to tackle the first challenge?
### Part 2: questions, feedback, and demoing
> Timing: 30min
This is an open slot to work on the questions that came up before.
### Part 3: entry level challenge
> Timing: 45min
We will go through the requirements of the entry level challenge as stated in the following _The FizzBuzz Page_ section, and talk about how to approach this project. Afterwards the class forms groups of 3 to discuss how the individually could approach it and do
## The FizzBuzz Page
> _a.k.a. challenge requirements_
Write a function that takes a number as an argument. The function then should either return the number itself, or one of the following strings, depending on the input number:
* 'fizz' if the number is divisible by 3
* 'buzz' if the number is divisible by 5
* 'fizzbuzz!' if the number is divisible by 3 and 5
Now create another function that starts a loop from 1 to 100 and prints the results of the fizzbuzz function for all numbers (from 1 to 100) to the console. Note: There is no timer or delay involved, we just want to get the full results of the fizz buzz algorithm in the console.
Create an HTML page that contains:
* 3 invisible images of your choice (representing fizz, buzz and fizzbuzz)
* a visible number 0 in the center of the page (style it to be not too small compared to the images)
* the following buttons (with labels and styles of your choice)
- a count button
- a start button
- a stop button
- a reset button
* somewhere at the bottom of the page a smaller debug button or link
Add the following functionality to the page:
* when the **debug button** or link is pressed:
- call the function that prints out the fizz buzz numbers from 1 to 100 to the console
* when the **count button** is pressed:
- the number displayed should be increased by 1
- if a fizz, buzz or fizzbuzz is produced with this number display the according image for a short amount of time (e.g. 1 second fade in and out, or any other animation you want to apply)
* when the **start button** is pressed:
- start an interval that increases the number displayed by 1 every second, and checks for the fizz buzz condition and displays the corresponding image, if a fizz, buzz, or fizzbuzz occurs (basically every second the same thing should happen that also happens when you manually press the **count button**)
* when the **stop button** is pressed:
- stop the counter interval that was started by clicking on the start button
* when the **reset button** is pressed:
- reset the number displayed to 0
To work with timeouts and intervals take a look at the `setTimeout()` and `setInterval()` functions in the documentation of your choice.
To submit your exercise, go to our shared base cloud folder into the "Assignment 1 - The FizzBuzz Page" folder. There you find an "Exercises" folder. Inside of it create a folder with your student ID and name, where you can put your solution (there is a placeholder folder there as an example reference). Put your solution there until 30. Nov. 2023, 23:42.
# Session 6: Advanced JavaScript 1/4
> Topics: **ECMAScript history, functions, callbacks and promises**
## Preparation materials
Watch the **Session 6 video** and check out the **Session 6 slides**, which are linked on the course web page.
## Session outline
### Part 1: arrival, mumble groups & active participation question
> Timing: 15min
As usual people form mumble groups, to talk about the prep materials, after they answer one (or both) of the following active participation questions in the chat:
* What was the most unclear in the prep materials for this session?
* Is there a specific way to call or declare function, that seems more usable or reasonable to you?
### Part 2: questions, feedback, and demoing
> Timing: 45min
This is an open slot to work on the questions that came up before.
### Part 3: co-working
> Timing: 30min
This slot can be used to work on the challenge or any other code piece you are currently working on. Use your colleagues and the lecturer to tackle tricky problems.
# Session 7: Advanced JavaScript 2/4
> Topics: **Loops**
## Preparation materials
Watch the **Session 7 video** and check out the **Session 7 slides**, which are linked on the course web page.
## Session outline
### Part 1: arrival, mumble groups & active participation question
> Timing: 15min
As usual people form mumble groups, to talk about the prep materials, after they answer one (or both) of the following active participation questions in the chat:
* What was the most unclear in the prep materials for this session?
* Which is your preferred way to loop? Do you see the benefits of the different variants of looping, or would you rather stick to one style consistently?
### Part 2: questions, feedback, and demoing
> Timing: 45min
This is an open slot to work on the questions that came up before.
### Part 3: co-working
> Timing: 30min
This slot can be used to work on the challenge or any other code piece you are currently working on. Use your colleagues and the lecturer to tackle tricky problems.
# Session 8: Advanced JavaScript 3/4
> Topics: **Objects & Classes**
## Preparation materials
Watch the **Session 8 video** and check out the **Session 8 slides**, which are linked on the course web page.
## Session outline
### Part 1: arrival, mumble groups & active participation question
> Timing: 15min
As usual people form mumble groups, to talk about the prep materials, after they answer one (or both) of the following active participation questions in the chat:
* What was the most unclear in the prep materials for this session?
* In which other programming languages or also non-coding related fields have you encountered similar concepts as objects and classes?
### Part 2: questions, feedback, and in-class exercises
> Timing: 45min
This is an open slot to work on the questions that came up before. Also there is time to tackle the in-class exercise in order to apply some of the learned concepts in some reasonably real example use case.
### Part 3: co-working
> Timing: 30min
This slot can be used to work on the challenge or any other code piece you are currently working on. Use your colleagues and the lecturer to tackle tricky problems.
## Training exercises
### #1: Loading a web comic from some JSON string
The following little exercises are used in-class (or even right after going through the prep materials), to apply and test out what we've learned.
Take the following (very long) line as a starting point:
```javascript
const comicObject = JSON.parse('{"month": "8", "num": 2347, "link": "", "year": "2020", "news": "", "safe_title": "Dependency", "transcript": "", "alt": "Someday ImageMagick will finally break for good and we\'ll have a long period of scrambling as we try to reassemble civilization from the rubble.", "img": "https://imgs.xkcd.com/comics/dependency.png", "title": "Dependency", "day": "17"}')
```
Now try to figure out how the object looks like, and what it contains (maybe use the console for that). Once you are familiar with the object, put a "load comic" button on your empty HTML page (empty looking, of course there can be hidden elements), and when the button is clicked, display the image and the title. Below the image also display a paragraph containing the `alt` text, that is in the object.
Then put a note on your page, that this is courtesy of [xkcd.com](https://xkcd.com/l) which is published under a [Creative Commons Attribution-NonCommercial 2.5 License](https://xkcd.com/license.html).
### #2: Loading a web comic from an API
Now we'll build on the last exercise. But instead of just using the JSON string in your code, we'll load the current XKCD comic through an API.
> Disclaimer: while XKCD has a simple and [documented open web API](https://xkcd.com/json.html), it does not set CORS headers, so your browser will block it, when you load it dynamically. For that reason I created a little API wrapper, that just adds the needed CORS headers. This will be available only temporarily one week before and after the session.
To load the current XKCD comic, you can do a GET request with the `fetch()` function (part of the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)), on the following resource: https://tantemalkah.at/web-coding/api/xkcd.php
To make sense of the response first, you can also just open it in your browser and take a look at what you get there.
Here is how you can load the data from within your JS:
```javascript
let url = 'https://tantemalkah.at/web-coding/api/xkcd.php'
fetch(url).then(response => {
response.json().then(responseData => {
// this is where you can process the results of the successful request
console.log(responseData)
})
}, error => {
// this is where you handle any errors that came up in request
console.log(error)
})
```
Once your script works (so, when the current comic is displayed when you click on the "load comic" button), you could try to adopt your page, to be able to also load specific versions of the comic. The wrapper API allows do that by adding a `?num=123` to the URL in the script above, where `123` is the number of the comic you want to load.
### #3: Displaying some open weather API data
In this exercise we will use another API, the one from [Open-Meteo](https://open-meteo.com/), to request the current weather data for Vienna.
To do that use the following URL to load the data: https://api.open-meteo.com/v1/forecast?latitude=48.12&longitude=16.22¤t=temperature_2m,wind_speed_10m&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m
Then display the current temperature and wind speed, including the proper units. Additionally try to display the the temperature for the last five hours as well as the prognosis for the upcoming five hours.
If you want to experiment with other APIs, here is a long list of public APIs: https://github.com/public-api-lists/public-api-lists