Course content

The World-Wide Web is now being used as a platform for sophisticated interactive applications ranging from web-shops and blogs, to almost all types of modern digital services, such as streaming, news, or social media. However, creating Web applications requires different approaches than traditional applications and involves the integration of numerous technologies. In this course, you learn how to build modern, interactive web applications for browsers. The course covers the core front-end stack (HTML, CSS, JavaScript/TypeScript), how the browser works, and how browsers talk to servers using network communication protocols such as HTTP and WebSockets. You learn the foundations of networking, TCP/IP, packets and packet headers, and what an IP address is. You learn how to connect your pages to real data through API such as REST, browser storage, and simple databases. Along the way, you will get hands-on experience with Node.js, work with build tools and dependency trackers (such as npm), use web libraries and frameworks (such as React for front-end and Express for backend, or similar contemporary alternatives), and the debugging tools developers use in industry.

Learning outcome

Knowledge

• Understands how the web works: TCP/IP, packets, HTTP, URLs, request/response cycle and the browser’s role as a client.
• Can explain the roles of HTML, CSS, and JavaScript/TypeScript in structuring content, styling presentation, and implementing behaviour in the browser.
• Has an overview of modern front-end architecture for small web applications
• Has familiarity with the common client-side security and privacy concerns, such as XSS, insecure DOM manipulation, and handling of user data in the browser.
• Has an overview of how performance and design choices impact sustainability, such as payload size, network usage, and device/energy footprint of web applications.

Skills

• Can build small to medium-sized front-end applications using HTML, CSS and JavaScript/TypeScript, based on given requirements.
• Can use APIs such as REST APIs from the front-end and to handle asynchronous requests
• Can use browser developer tools to check HTML, CSS, and JavaScript issues, and to inspect network activity and basic performances
• Can organise UI code to separate concerns between data/state, visual layout, and event-handling logic, following simplified architecture such as MVC ideas in the chosen tools/frameworks.
• Can explain secure coding practices in the browser as well as the advantages and disadvantages of different front-end tools and libraries used.

General competence

• Be able to acquire new knowledge in a field that is in continuous development
• Reflect on and argue for the approach used when solving a web programming problem using relevant technical concepts.

Learning methods and activities

• Lectures
• Laboratory work
• Mandatory Tasks
• Both individual and collaborative exercises at classroom and at home

Compulsory assignments

• Mandatory assignments

Specific conditions

Recommended previous knowledge

Object-oriented programming

Credit reductions