Web technology course information
CSE1500 is the Web and Database Technology course, that first-year students of the Bachelor Computer Science and Engineering take at TU Delft.
The responsible instructor of the web technology part is Associate Prof. Claudia Hauff. Inquiries about the course content, exams and so on should be emailed to
cse1500-ewi["at"]tudelft.nl; this email reaches all responsible course instructors. If you have questions specifically about the web technology part of the course, do not forget to add
[WEB] to your email subject to reach Claudia Hauff. Questions regarding your performance or grades in the course need to come from your TU Delft email address.
This website contains all materials of the web technology part of the course. We opted to distribute the materials via GitHub due to the many code examples that are much more easily maintained and updated on a platform made for this purpose. With a modern browser, you can use highlighting and note-taking in the browser. All data is stored in your browser’s localStorage: this means that no data (highlights/notes) leaves your machine. Be aware though that all this data is deleted when you clear your browser’s storage.
In the five weeks of the web technology lectures we can only cover the web programming fundamentals and thus chose a small application stack. If you want to get a comprehensive overview of the set of languages, technologies and frameworks a frontend or backend web engineer should be familiar with, take a look at the web developer roadmap - 2020.
Table of contents
- Recommended book
- Course grading
- Web technology topics and schedule
- Web technology Q&A
- Web technology assignments
- Web development resources
- Lecture material types
- University courses with a web focus elsewhere
The book we recommend for this part of the course is Web Development with Node and Express, 2nd Edition.
It is not required though - there are no required readings from this book and we do not come close to covering the majority of the book’s content. To give you an idea, the book contains 22 content chapters and we include nine of them in our recommended readings list.
Visual Studio Code (VSC) is our recommended development environment for the assignments. It is a free and open-source Integrated Development Environment (IDE) available for all major operating systems.
VSC offers many extensions. You can find a guide on how to browse and install them here. A list with all kinds of “delightful” extensions can be found here. Since this list can be pretty overwhelming, we made a short list of the extensions we recommend to install for this course:
- Bracket Pair Colorizer does what the name suggests.
VS Live Share - a collaborative real-time coding extension. If your team does not want to dive into
gityet, this is the way to go to work collaboratively and remotely together.
- Material Icon Theme to make finding the file you are after in your app directory a bit easier.
- If you like to add TODOs to your code, try Todo Tree, it makes sure you do not overlook any of your TODOs!
- Finally, install a good theme for your IDE to make coding more enjoyable. Dracula is a popular one. Cobalt2 is also nice. If you want to pick based on visuals, head to https://vscodethemes.com/.
If you are new to team programming, and want to use VSC’s features efficiently, read our VSC guide.
Browser developer tools are integrated in all modern browsers; familiarize yourself with the developer tools of your favorite browser. In our transcripts, we will showcase Firefox’s and from time to Chrome’s developer tools.
The latest stable version of Node.js.
Two modern web browsers such as Chrome, Firefox, Edge, etc. to test your project code across browser implementations.
Telnet (for your first web technology assignment).
The entire course (covering both database and web technology topics) is graded as follows:
Passing requirements: the overall grade must be 5.8 or higher AND the midterm grade must be at least a 5 AND the final exam grade must be at least a 5 in accordance with TU Delft’s exam regulations.
Each exam (midterm, final) covers one of the two course topics completely.
Assignments are done in pairs of two students and are graded by student assistants in a binary manner (pass or fail). There are six assignments in total, three cover database topics and three cover web technology topics. While the assignments together make up only 20% of the final grade and are not required, we strongly recommend to tackle the assignments - they cover a lot of exam materials in a practical manner!
We have two assessment moments: one for the database assignments and one for the web technology assignments. The assessment is interview-based; the interview with one of our teaching assistants will last 20-25 minutes. Each assessment moment can yield anything between 3x pass and 3x no-pass. While each team of two students is interviewed together, they receive passes individually.
The table below shows how the number of passes (maximum 6: 3x database and 3x web) are converted to the assignment grade:
|Number of passes||Grade|
Frequently asked questions:
Are all web technology exam questions multiple-choice questions?Yes.
Can assignment passes be carried over to the next year?No, while assignment passes are valid for this year's resit, next year all assignments have to be tackled again.
Is there a resit option for the assignments?No.
How does the resit look like?Not yet known due to the COVID situation. In past years, we had a single 3-hour exam which covered both the database and web technology topics and each student could choose which part (or both) of the exam to resit.
What happens if my grade for one of the exams is worse in the resit?We grade according to TU Delft's grading policy and thus the better grade counts. If the resit exam grade is lower than the original exam grade, we keep the higher grade in the grade books.
Can more than 2 students work in a team?No.
Can a student work alone on the assignments?Generally: no. If you think you have a very good reason for an exception, please email the instructor.
Web technology topics and schedule
The web technology topics we cover (in this order) are the following:
- HTML and web design
- Node.js (advanced)
- Cookies and sessions
- Web security
All the materials are available to you at once. This means that you can go through the materials at your own pace. We do have a suggested schedule though for each of the course weeks (starting with week 2.6):
- Week 2.6: HTTP lecture, HTML and web design lecture; first web technology assignment;
- Week 2.8: CSS lecture, Node.js (advanced) lecture; third web technology assignment;
- Week 2.9: Sessions et al. lecture, web security lecture.
Web technology Q&A
The web technology topics start in week 2.6. In contrast to the database topics, there will be no lectures via Zoom. Instead, we have set up the materials so that you can read and practice along with the transcript.
Every week, there will be a one hour question & answering session on Zoom led by Claudia Hauff. This session takes place Fridays between 12:00-13:00 in weeks 2.6, 2.7, 2.8 and 2.9. These sessions can be used to ask questions about the lecture materials, the exam, how to study, live during Corona … The Zoom link is available on Brightspace.
During the on campus sessions the course assistants go over old web technology exam questions with you. The goals here are twofold: familiarize yourself with the exam setup as well as reflect for yourself on your existing knowledge.
Just like in Q1, as TU Delft students you can make use of a dedicated Stack Overflow community: https://stackoverflow.com/c/tud-cs. Please keep the guidelines from Q1 in mind, such as that you remain polite, tag your questions with the correct course code (
cse1500), do not share (partial) solutions to graded work, and upvote/accept answers that have helped you.
Web technology assignments
There are three web technology assignments, each one covering the contents of two to three lectures:
- The first web technology assignment covers HTTP and web design.
The three assignments build on each other - over the course of them you are tasked with implementing a multi-player board game . In previous years, roughly 90% of student teams passed the first web assignment, 60% passed the first two and 30% of teams passed all three web assignments.
Web development resources
If you want to hear the latest and greatest about the web stack, Twitter is a good source of information. Here is a list of useful Twitter accounts to follow:
- Franziska Hinkelmann, working on Node.js at Google;
- Lin Clark makes technical challenges accessible to the wider public for Mozilla;
- Wes Bos, a popular teacher of the web stack;
- Mozilla Hacks, official Mozilla account for web developers;
- Visual Studio Code;
- Chrome DevTools, tips and tricks of the dev tool trade;
- Syntax, podcasts for web developers.
Lecture material types
For each lecture we provide a range of materials:
- Required readings: please read the required readings before tackling the lecture transcript, especially if you are starting out in web technology. The required readings are typically introductions to the different languages we cover. The lecture materials go beyond the contents of the required readings.
- Recommended activities: activities that we think will help you get a better grasp of the different web technologies. Activities are either programming exercises or podcasts (there are some great ones out there!). Don’t see those as a complete list to work through, that is impossible given the time you have.
- Recommended readings: these may be tweets, blog posts or book chapters that help you understand some of the introduced concepts better; again, do not attempt to read all of the materials.
- Relevant scientific publications: we are often asked why this kind of course is part of the computer science curriculum. Isn’t this just programming? To showcase how web technologies are researched, we here list a number of scientific publications that contribute to our understanding of (the use of) web technologies.
University courses with a web focus elsewhere
Lastly, the materials we present here are only one way of introducing the fundamentals of the web to undergraduate students. A number of other universities offer publicly accessible teaching materials:
- Deep Dive Into Modern Web Development /U Helsinki
- Design and Implementation of Software for the Web /GMU
- Web Applications /Stanford
- Web Security /Stanford
- Creating Modern Web Applications /Brown
- Web Security /NUS
- Programming Languages for Web Applications /Virginia
- Web Development /MIT
- Cutting-edge Web Technologies /Berkeley (2015)
- Web Technologies /U Texas (2015)
- Web Programming /U Washington
- Web and Mobile Systems /U Virginia