Advanced Web Technologies

Lecture: Advanced Web Technologies (SS 19)

Semester: Summer Semester 2019

Lecture language: English

Exam language: English

Exam type: Oral examination

Maximum number of participants: 30

About this Course

The World Wide Web and its underlying technologies are increasingly gaining importance for the development of interactive Web applications. This course introduces concepts, principles, and methods in current client and server-side Web technologies. Basic Web technologies such as HTML, HTTP, CSS, XML, JavaScript etc. are a prerequisite to take this course. The focus of this course is rather on advanced topics in emerging Web technologies. These include extensions of Web standards, combination of different Web technologies, Web toolkits and development environments, current backend Web frameworks (e.g. Node & Express), and frontend Web frameworks (e.g. Angular, React). This course follows a student-centered and project-based learning approach. Web technologies will be presented in the lecture by student groups. The presented technologies are further investigated and applied in hands-on sessions as well as small student projects carried out throughout the course.

Getting credits for this course requires a successful completion of all assignments, project, and oral exam at the end of the semester. The final grade will be calculated as follows: assignments and project (50%), student presentations including hands-on sessions (17%) and oral exam (33%). 

Target audience

  • Master Applied Computer Science
  • Master ISE

Date and location


  • Wed, 14:00 – 16:00
  • LB 117
  • Starts on April 10, 2019

Lab Session:

  • Mon, 12:00 – 14:00
  • LK 052
  • Starts on April 15, 2019


  • Good knowledge of basic Web technologies such as HTML, CSS, JavaScript.
  • High motivation and commitment.


Due to didactical methods, we have a limit of 30 students for this class (first come first serve). To register, please send an email to Prof. Dr. Mohamed Chatti by April 5th, 2019 with your contact information, your study program, and your knowledge/experience in Web technologies. If the maximum number of participants is reached, we will use a waiting list.



Prof. Dr. Mohamed Chatti (Lecturer)

Dr. Arham Muslim (Teaching Assistant)

Student Projects


Group name: Hash-Group

Group members: Paul Meteng, Vidhya Vijayaraman, Shahrzad Amini, Meijie Li

Project description:

The goal is to help students find related books based on a selected lecture. Students can discuss the book in the comments section as well as give a rating.

Main features:

  • Login, Registration
  • Recommend top books based on course using Google Books API
  • Comments and rating of books

Technologies used:

  • Frontend: React, Redux, Axios, Bootstrap
  • Backend: Node/Express, Joi, MongoDB,

Links: GitHub, Heroku, Advertisement Video

Study Lifestyle

Group name: Invincible

Group members: Victor Tuekam, Yiqi Sun, Ravali Bathula

Project description:

A platform where students can come together, share their experiences and make their study life more colorful and entertaining by posting blogs about different topics and discussing them.

Main features:

  • User registration and authentication
  • Blog post management (add and remove)
  • Searching and commenting

Technologies used:

  • Frontend: Angular, Bootstrap, Tailwindcss, Socket.IO
  • Backend: Node/Express, Socket.IO, MongoDB,

Links: GitHub, Heroku

Argon Learning

Group name: Group 3

Group members: Jaleh Ghorbani Bavani, Dakai Men, Amin Shahin

Project description:

This project is developed as an online course management system that allows users to create courses, upload videos to the course, and generate exams. Users can attend these courses and take exams to improve their ranks. This project can be seen as a part of larger projects, such as Academic Earth or Khan Academy.

Main features:

  • User registration and authentication
  • Course management (add and remove)
  • Searching and registering for course
  • Generate and take exams
  • Compete with fellow students based on ranks in exams

Technologies used:

  • Frontend: React, Video-React, Axios, HighCharts
  • Backend: Node/Express, MongoDB

Links: GitHub, Heroku, Live Demo

Food Culture

Group name: NEC

Group members: Cara Watermann, Elham Valipour

Project description:

An educational website that promotes getting in touch with different cultures and enables gamification by sharing food recipes.

Main features:

  • User registration and authentication
  • Adding and removing food recipes
  • Quiz

Technologies used:

  • Frontend: React, Axios, Bootstrap, Materialize, Awesomefont
  • Backend: Node/Express, MongoDB

Links: GitHub, Live Demo

AWT Project

Group name: ALFA

Group members: Forough Zarei, Sriram Anil Kumar, Atefeh Safarkhah Shalkouhi

Project description:

This project is to improve the communication between students and teachers during the searching for thesis. Teachers can post the thesis they are offering to this web application. Students can search for interesting topics and apply for the thesis by sending their resume (LinkedIn or Xing profile links).

Main features:

  • User (student/teacher) registration and authentication
  • Posting thesis (teacher)
  • Searching and applying for thesis (students)

Technologies used:

  • Frontend: Angular, Bootstrap
  • Backend: Node/Express, MongoDB

Links: GitHub, Live Demo

Interactive ASL

Group name: A team

Group members: Agustín Gázquez Hurtado, Aynaz Khoshkhoo, Anusha Bangaru

Project description:

Interactive ASL is a web application built with the MEAN stack for learning American Sign Language in an easy and intuitive way.

Main features:

  • User registration and authentication
  • Learning: Allow the user to learn progressively
  • Practicing: The user can reinforce the knowledge acquired
  • Testing: Test and consolidate what has been learned

Technologies used:

  • Frontend: Angular, Bootstrap, Charts.js
  • Backend: Node/Express, MongoDB

Links: GitHub, Live Demo