- Assignment 0 (A0) - HTTP (1 point): You have to send a series of HTTP requests to one of our servers.
- Assignment 1 (A1) - HTML/CSS (14 points): You are given the design guide for the online shop "Artmart" and are tasked with producing a static frontend in HTML5 and CSS3 that is responsive and accessible.
- Assignment 2 (A2) - JavaScript (25 points): You introduce interactivity to the existing static frontend with JavaScript by dynamically retrieving picture data from the Metropolitan Museum of Art Collection API and allowing users to configure picture frames on the fly by adapting the Document Object Model (DOM).
- Assignment 3 (A3) - Node.js (15 points): You build part of the backend for Artmart as a web service in Node.js in JavaScript.
- Assignment 4 (A4) - Vue.js (15 points): You introduce frontend abstractions for Artmart in Vue.js
Team and Overview
- Professor
- Jürgen Cito
- University Assistants
- Michael Schröder, Markus Böck, David Kaindlstorfer, Samuel Pilz
- Tutors
- Nathanael Nussbaumer (Head TA), Markus Bointner, Theo Haslinger, Nicolas Hrubec, Irfan Kacapor, Pia Schwarzinger, Lukas Spatschil
- Course email
- web-engineering@se.tuwien.ac.at
- Live Lecture
- Thursday, 15:15-17:00, FAV Hörsaal 1 and online (Link on TUWEL)
- Course catalog
- Official course listing in TISS
Registration
Important! Please register on TISS until Tuesday, 05.03.2024 23:55 (strict deadline!) to be able to participate in this course.
All students registered in TISS until the deadline will have access to the course.
To officially register, you have to complete Assignment 0 (A0), which will be available on TUWEL.
You will be able to deregister until 12.03.2024 23:55, which is also the deadline for A0. As soon as you submit A0, you will receive a certificate (Zeugnis).
Prerequisities
Formally, participation in this course is regulated by STEOP rules. Please understand that we cannot make any exceptions.
We expect that you have working knowledge with at least one imperative programming language (e.g., Java, Python), as taught in an introductory programming course.
We also require basic knowledge of version control systems, particularly how to use git.
Timetable/Lectures
The following timetable lists all important dates for the course (lectures, tests, deadlines, tutor office hours) together with accompanying material (required reading, slides as PDFs, link to lecture videos).
Required reading should be done in preperation before the lecture!
Reading material is not always strictly "reading", but can also involve interactive online exercises.
Note that: The contents of the listed required readings will be part of the tests.
If a deadline is listed on a certain date, assume it due at 23:55 that day unless specified otherwise.
Date | Content | Required Reading |
---|---|---|
04.03. |
Kick-Off, Lecture 1 (L1) HTTP
Attention: 15:15-17:00 on Zoom (link will be sent on TISS) |
Read An overview of HTTP |
05.03. | TISS Registration Deadline | |
07.03. (12:00) | Release Assignment 0 (A0) | |
L2: Browser: HTML/Accessibility | ||
L3: CSS Basics | ||
L4: CSS Responsive Design, Live Examples |
|
|
07.03. (12:00) | Release Assignment 1 (A1) | |
12.03. | A0 Deadline | |
14.03. | Live Lecture: HTML/CSS |
|
22.03. | Tutor Office Hours 15:15-17:00 (online) | |
26.03. | A1 Deadline | |
25.03. - 06.04. | Easter Holidays (no lectures) | |
28.03. (12:00) | Release Assignment 2 (A2) | |
L5: JavaScript and DOM |
|
|
L6: JavaScript Live Coding (Recipe Search), GitHub Repository | ||
11.04. | Live Lecture: JavaScript | Watch Lectures 5 and 6 (JavaScript, DOM, Events, Asynchronous Progamming) and post your questions on the TUWEL lecture forum |
Will be moved to later in the semester |
|
|
26.04. | Tutor Office Hours 15:15-17:00 (online) | |
30.04. | A2 Deadline | |
02.05. | Test 1 (Content: L1-L5 Lectures and Reading). Test will be conducted on TUWEL | |
L7: Web Servers | ||
L8: Backend Abstractions |
|
|
09.05. (12:00) | Release Assignment 3 (A3) | |
L8a: Web Sockets
|
||
16.05. | Live Lecture: Web Backends + Sockets | Watch Lectures 7, 8 (Web servers, backend abstractions) and post your questions on the TUWEL lecture forum. We will go through lecture slides 8a on web sockets live in the lecture. |
23.05. |
(Probably) no live lecture as we will be covering sockets already the week before
|
|
24.05. | Tutor Office Hours 15:15-17:00 (online) | |
A3 Deadline | ||
Release Assignment 4 (A4) | ||
L9: Frontend Abstractions | ||
06.06. | Live Lecture: Web Frontends | Watch Lecture 9 (Frontend abstractions and Vue.js) and post your questions on the TUWEL lecture forum |
13.06. | Live Lecture: Guest Lecture TBA | |
14.06. | Tutor Office Hours 15:15-17:00 (online) | |
A4 Deadline | ||
20.06. | Test 2 (Content: L6, L7, L7a, L8, L8a, L9 - Lectures and Reading). Test will be conducted on TUWEL |
Additional reading and exercises
For those who want to read and practice on their own, we collected a list of additional (optional) resources (interactive tutorials, reading):
- HTML: Practice HTML (FreeCodeCamp)
- CSS:
- Accessibility: Writing HTML, CSS, and JavaScript with Accessibility in mind (3 articles by Manuel Matuzovic)
- JavaScript:
- Reference: Bookmark the JavaScript Reference to look up during programming
- Scopes: Understanding Scope in JavaScript, Scopes and Closures
- Event Loop: JavaScript Event Loop Explained, What the heck is the event loop anyway (until 21:45), Visualize the event loop with Loupe
- REST: Read the REST API Checklist
- Frontend Frameworks:
- As the lecture progresses, we will add more resources here!
Lecture Mode
The lecture will follow a flipped classroom model:- In particular, we provide required reading material prior to class.
- Students should then watch already recorded lectures by the professor.
- In live lectures, we then demonstrate the material live on the command line, browser, or IDE.
Assignments
Grading
Your grade will be a combination of the theoretical part (tests) and practical part (assignments). Material for the theoretical tests will be the contents of the lecture slides and required reading indicated in timetable/lectures.Theoretical part
- Two written tests (15 points each)
- Test 1: L1 – L5
- Test 2: L6 – L9
- The sum of both tests has to be at least 50% (T1 + T2 >= 15 points)
- The tests will be held online on TUWEL. You will need a stable internet connection.
- There will be no retake test.
Practical part
- Five assignments (A0-A4)
- More than 30% on each assignment
- At least 50% over all assignments (A0+A1+A2+A3+A4 >= 35 points)
Grading Scale
The points of the theoretical and practical part sum to exactly 100 points. The points map to grades as follows:- S1: 88-100
- U2: 75-87.99
- B3: 63-74.99
- G4: 50-62.99
- N5: 0-49.99