Special Topic: Introduction to Full Stack Web Development

General Information

Full Stack Web Development refers to the practice of developing both the client-side (front end) and server-side (back end) components of a web application. A full stack developer is proficient in a variety of programming languages and technologies, covering the entire spectrum of web development, from designing user interfaces to managing databases and server infrastructure.

Attendance

The course has mandatory attendance.

We will offer a hybrid mode, i.e., participants will be able to join the lectures from their devices at home. Yet, there will be live interaction only with participants in-class in the lecture room. Audio and video will only be streamed one-way from the lecturer to the online participants and no text chat can be offered, i.e., there will be no way to ask questions when joined online.

Therefore, if possible, participating in-class at the university is highly preferred.

Information on how to join the online meetings will be provided on Moodle.

Target Audience and Learning Objectives

The target audience of this course are beginners in web development. Since the available time is rather short, we encourage participants to familiarize themselves with basic HTML before the course (Wikipedia, W3Schools - HTML tutorial, MDN Web Docs).

Along the course, we will learn the general syntax and the most important library functions of JavaScript. To be able to follow the course, knowledge in at least one other object-oriented programming language such as Java is expected.

In this introductory course, we aim to provide a coarse-grained overview on this exciting topic. The goal is that participants understand basic web development terminology and concepts. They are able to

• write simple HTML pages, styling them with simple CSS
• use Javascript to develop simple Node.js back end applications that host web pages as well as an API to query data
• build Javascript front ends that communicate with the back end via its API
• connect their application to a database
• use non-polling bi-directional communication using Websockets for fluent communication between parts of the system.

Depending on the teaching speed and the interests of the participants, we might also have an ad-hoc look at more specific topics* such as

• HTML template engines on the back end
• the front end framework Vue.js
• user authentication using JWT (JSON Web Token)
• responsive web design (adjusting web sites to mobile and desktop usage using Bootstrap.css)
• advanced stylesheet definition languages such as LESS or SASS
• ...

We have not planned to specifially cover topics such as

• source version control systems (such as Git)
• API generation tools such as Swagger/OpenAPI
• testing
• security
• advanced CSS styling (flexbox, css-grid, etc.)
• deployment and web server / hosting management
• web performance optimization
• front end frameworks (besides probably Vue.js)
• ...

This course does not aim to cover as many different technlogies as possible. Instead, we will use one technology per topic (e.g., Node.js as backend, Websockets for bi-directional communication, ...) to explain the basics. Keep in mind that the course should act as an introduction and cannot cover all possible (sub-)aspects of web development.

Teaching Mode

While the material also covers theoretical concepts and explanations, the main aspect of teaching will be live-coding sessions.

Over the course of this lecture, we will build a whole web application, most probably a game such as Battleship or an application to submit song suggestions and to vote for the next song at a party.

Grading

The participants have to develop their own web application as a project, either as a single person or in a team of two. The size requirements for this project are discussed in-class. As a rough estimate, we expect to project to be the size of the demo project developed in-class (for teams of two the size of the project is doubled). The projects (running website + code base) are presented in indiviual presentations at the end of the semester.

Preleminary Timetable

Important Information

This course uses JKU Moodle for all announcments (Forum with mail notifications), material, information regarding the LVA mode, assignments and submissions, as well as corrections and grading.