CSE1500
W e b   T e c h n o l o g y

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.

This website contains all materials of the course’s web technology part. 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 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

Book

The book we recommend is Web Development with Node and Express, 2nd Edition.

It is not required though—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.

The book shows where and how Node.js/Express (two key frameworks we introduce in this course) can be employed in production settings. It 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.

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). It is also the most popular IDE for developers today.

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; we recommend at least the following:

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

OpenSSL (for your first web technology assignment).

Web technology topics

The web technology topics we cover 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 often 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.

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. FYI, in previous years, roughly 90% of teams passed the first web assignment, 60% passed the first two and 30% of teams passed all three web assignments.

In order to help you get started, we have created a demo game application. If you get stuck, take a look at the demo application, it may help you.

Web development resources

The practical assignments may 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 the following:

  • Required readings: to be read before the respective lecture. These 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 may help you get a better grasp of the different web technologies. Activities are either programming exercises or podcasts.
  • Recommended readings: these may be tweets, blog posts or book chapters that may help you understand some of the introduced concepts better.
  • Relevant scientific publications: to showcase how web technologies are researched, we offer examples of scientific publications that contribute to our understanding and use of web technologies.

University courses with a web focus elsewhere

Naturally, what we present here is only one way of introducing the fundamentals of the web to undergraduate students. A number of other universities also offer publicly accessible teaching materials:

Courses elsewhere

:bike: :bike: :bike: