Darstellung / Vorschau

Course Objectives/Goals

HCI207 Front-end web programming concerns the development of interfaces with the web stack technologies, which is currently used for the development of a wide variety of applications, eg conventional websites, graphical interfaces in the conventional sense, desktop applications, mobile applications etc.

Course Syllabus

The first part of the course offers an in-depth refresh of the technologies that constitute the basic web stack. Subsequently, more advanced topics related to Javascript programming will be discussed as well as the use Web APIs, such as Canvas to create graphical interaction interfaces. The last part of the course concerns the development of complex interfaces with client-side frameworks such as Svelte or React.

Indicative course outline:

1. Introduction, tools, hosting
2. Modern HTML, CSS, JS,
3. Forms design and validation at the front-end and back-end,
4. Modern CSS layout with flexbox and CSS grid,
5. Advanced Bootstrap,
6. Graphic elements and game developing using canvas,
7. Asynchronous JS and fetch API,
8. Introduction to React framework: components design,
9. JSX, state management, hooks,
10. GraphQL.

Prerequisites/Prior Knowledge

The course is addressed at students who have programming experience, preferrably on web technologies.

Students should be familiar with basic technologies of the web stack, i.e., should have completed undergraduate courses similar to "HCI202 Introduction to Web Technologies". If not, students can take this course alongside course "HCI202 Introduction to Web Technologies". Note that this will lead to a development-focused semester, as both courses demand a high load of home work.

Assessment Methods

During the course a number of projects will be developed.

Evaluation will be based on

• the delivered and demonstrated project work
• mini tests on various modules of the course

Project outline

Projects are assigned during the the course, which are important for assessment.

Project schedule may change during the semester, but an estimated outline is:

• (modules 1-4): Build a website from scratch, i.e. without using any frameworks, such as bootstrap or any javascript framework. [2 weeks]
• (module 5): Refactor the front-end using bootstrap [1 week]
• (module 7): Graphics application using canvas [2 weeks]
• (module 9): Re-implement first project using react [2 weeks]

Additional mini projects might be added.