Level 3.1 · Web Development

This six-week level builds on the browser JavaScript, interface state, responsive design, accessibility, testing, and Git skills from Level 2. You will use one TypeScript stack to develop a larger application across the browser, server, and a supported mobile platform.

What you will work with

TypeScript and development workflow

Move from JavaScript to TypeScript. Set up React with Vite, use a bounded Sass preprocessor workflow, and collaborate through Git.

React application development

Build typed components, manage interface state, create routes, and verify important behavior with automated tests.

Server-side code and APIs

Run TypeScript with Node and Express. Develop, validate, test, and use a JSON application programming interface (API).

Cross-platform development

Adapt the interface for web and mobile contexts, then package and test the application with Capacitor.

Why this stack

PHP is a valid language for server-side websites and APIs. This level uses TypeScript because Level 2 already established JavaScript. TypeScript lets you reuse that knowledge in React, Node, Express, and Capacitor instead of learning a separate language before you can apply the server-side concepts.

TypeScript extends JavaScript with syntax for static type checking. The application still runs as JavaScript, and TypeScript removes its type syntax before the code runs. Type checking can find some mistakes during development, but it does not prove that data from a form, request, file, or API is valid. The API lessons will therefore teach runtime validation as a separate responsibility.

Concepts such as requests, responses, routes, validation, JSON, dependencies, tests, and version control transfer to PHP and other server-side languages. The server lessons will include optional PHP comparisons where they help connect existing knowledge to the selected stack.

What you will build and practice

You will continue one application through four project stages. First, you will prepare its repository and toolchain. You will then build and test the React client, add and connect an Express API, and adapt the client for a supported mobile target with Capacitor. Deploying an API, database, authentication system, or iOS application is not required unless an assignment marks it as an optional extension.

How you will work

You will use Git throughout the same project, record useful checkpoints, and keep the production build working as the application gains new responsibilities. You will also practice teamwork, constructive feedback, research, documentation, and delivery within an agreed deadline.

Start here

Begin with Move from JavaScript to TypeScript. Continue to Project stage 1: Prepare the application workspace after you complete the TypeScript and development-workflow lessons.

Look up the complete learning goalsOpen this section when you need the formal list.

These goals describe what you will work toward during the level. You do not need to master everything before you start.

Technical learning goals

• Understand and use a front-end framework.
• Develop and test an API.
• Use a simple API.
• Implement a design that works on more than one platform.
• Use version control.
• Use preprocessors to make development work more efficient.

Professional learning goals

• Take part in team-based work.
• Give and receive constructive feedback.
• Reflect on your skills and interests in web development.
• Find relevant information and present it in a suitable context.
• Adapt to other working methods and technologies.
• Seek new knowledge and ask questions when you need information.
• Deliver work by an agreed deadline.
• Document your work and share what you know.

Assessment

You receive ongoing feedback during the level. The final assessment uses the Danish 7-point grading scale. It includes a two-day practical task and a 30-minute oral examination, including grading time.