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 materials were developed by Claudia Hauff.
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.
The following languages are covered: HTTP, HTML, CSS as well as JavaScript on the client and server-side. The web application stack is rather minimalistic: it consists of Node.js, express, axios and ws.
In the five weeks of the web technology lectures only the web programming fundamentals can be covered. 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
- Tooling
- Web technology topics
- Web technology assignments
- Web development resources
- Lecture material types
- University courses with a web focus elsewhere
- Courses elsewhere
Book
The book we recommend is Web Development with Node and Express, 2nd Edition. It 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 the course content 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, there are pointers to introductory resources that cover the basics of each of these technologies. The lecture materials go beyond those basics.
Tooling
Recommended
Visual Studio Code (VSC) is the 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.
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
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 second web technology assignment asks you to write client-side and server-side JavaScript code.
- The last web technology assignment focuses on server-side JavaScript and CSS.
The three assignments build on each other—over the course of them you are tasked with implementing a multi-player board game.
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:
- Franziska Hinkelmann works on Node.js at Google.
- Lea Verou tweets about all things CSS and the wider web UI world.
- Lin Clark makes (among others) technical challenges accessible to the wider public.
- V8 is Google’s JavaScript engine.
- JavaScript Daily does exactly what the name suggests.
- Node.js.
- Axel Rauschmeyer is the author of a number of popular JavaScript books.
- Addy Osmani works on Google Chrome and is well-known for his JavaScript design patterns book.
- Wes Bos is the author of popular web stack tutorials.
- Mozilla Hacks is Mozilla’s account for web developers.
- Visual Studio Code.
- Chrome DevTools offers tips and tricks of the dev tool trade for Chrome.
- Firefox DevTools offers the same as Chrome DevTools but this time for Firefox.
- Syntax offers podcasts for web developers, hosted by Wes Bos and Scott Tolinski.
Lecture material types
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:
- 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 Programming /U Washington
- Web and Mobile Systems /U Virginia
- JavaScript /UPenn