29 views
# 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): ![](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-final.png) 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.