CSE1500
Web  Technology

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.

We cover the following languages: HTTP, HTML, CSS as well as JavaScript on the client- and server-side. Our web application stack, that is, the software setup we use to implement web applications, is rather minimalistic: it consists of Node.js, express, axios and ws.

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

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.

We recommend the book as it shows where and how Node.js/Express (two key frameworks we introduce in this course) can be employed in production settings. The book goes well beyond what you need to know for this class and includes chapters on code maintenance, quality assurance and how to deploy an application in production. The book already assumes familiarity with basic web programming; you will not find an introduction to CSS or JavaScript in it.

There is no recommended book to introduce HTML, CSS and JavaScript. Instead, we point you to a number of introductory resources that cover the basics of each of these technologies. The lecture materials go beyond those basics.

Tooling

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.

It is also the most popular IDE for web developers today. It was originally designed to support Node.js programmers (the server-­side JavaScript framework we introduce in this course), but now has extensions for many programming languages. Best of all, Visual Studio Code itself is written in JavaScript!

Visual Studio Code

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:

  • ESLint, a popular linting utility for JavaScript (a linter is a tool that analyzes source code to flag potentially poor code such as unused variables) - use it to improve your code.
  • Bracket Pair Colorizer does what the name suggests.
  • Quokka.js - a tool to try out JavaScript snippets without hassle.
  • VS Live Share - a collaborative real-time coding extension. If your team does not want to dive into git yet, 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.

Required

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).

Course grading

The entire course (covering both database and web technology topics) is graded as follows:

grading

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
6 10.0
5 8.3
4 6.7
3 5.0
2 3.3
1 1.7
0 0.0

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:

  • HTTP
  • HTML and web design
  • JavaScript
  • Node.js
  • CSS
  • Node.js (advanced)
  • Cookies and sessions
  • Web security

The order may strike you as odd, especially if you are already familiar with the basics of web programming, as typically CSS is introduced before JavaScript. We introduce JavaScript as early as possible, to give you the chance to practice it a longer period of time before the exam moment.

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):

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 three assignments build on each other - over the course of them you are tasked with implementing a multi-player board game :game_die:. 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

The practical assignments of this work often require looking up web development specifics. Two good resources for web engineering are Mozilla’s MDN portal and Google’s Web Fundamentals.

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:

Lecture material types

materials

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:

:bike: :bike: :bike: