FE402
Programming Interactivity
Faculty
Nikolai Lopin
Software Engineer at Stripe
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
Programming Interactivity is an introductory course on how the modern web works. It covers the foundations: HTML, CSS, and JavaScript. Students learn what a browser actually does: how it turns a document into a structured page, how styles control appearance, and how code enables a page to respond to users.
The course is hands-on. Each session pairs a theory block with in-class practice, so students write code from the first day. The emphasis is on understanding the ideas and mental models underlying the web, enabling students to read, write, and reason about code independently.
AI coding tools are also part of the course. Students learn how to use them critically: to read what these tools produce, question it, and explain it rather than copy it blindly. The course concludes with a self-directed project that each student builds and presents.
Learning highlights
- Understanding core web technologies (HTML, CSS and JS)
- Learn fundamental mental models behind modern web
- Understand how visual presentation and layout are controlled
- Understand how a page works with data and changing state
Course outline
15 classes
How the web actually works
- Inspiration opener: a tour of strange, beautiful, and broken websites.
- Client, server, and what a browser does with what it receives.
- One document, many destinations: phones, tablets, TVs, screen readers.
- The DOM as a living tree.
- Your first HTML file by hand, no tools.
- DevTools as an x-ray: inspecting and breaking a real site.
Markup as meaning
- Tags describe what things are, not how they look.
- Why a real beats a clickable <div> — and what screen readers hear.
- Forms: real interactivity with zero JavaScript.
- Document structure, headings, landmarks.
- Accessibility as a by-product of honest markup.
- Challenge: navigate a page using only the keyboard and a screen reader.
Images, links, media & project hygiene
- Relative vs. absolute paths — the classic beginner trap.
- Images, audio, video, and responsive image basics.
- Organising files so a project doesn't rot.
- Git as save points, lightly introduced.
- Publishing a page to the live web for the first time.
- Inspiration opener: personal sites that show range.
CSS: the box model & flow
- Every element is a box: content, padding, border, margin.
- Display and how the normal document flow works
- The cascade and specificity — why isn't my style applying? (challenge!)
- Colors, units, and custom properties (variables).
- Dark and light themes as a first taste of designing for difference.
- Challenge: restyle a famous site's homepage into something absurd.
Layout: Flexbox & Grid
- Two coordinate systems for arranging things.
- Flexbox for rows and components; Grid for full layouts.
- When to reach for which.
- Building the same layout two ways.
- A first look at how layout bends across screen sizes.
Designing for everyone, everywhere
- Responsive layouts. Media queries and relative units.
- One layout from phone to desktop to TV.
- Designing for touch vs. mouse vs. keyboard.
- Respecting user preferences: dark mode, reduced motion, font size.
- Accessibility revisited now that there's CSS to misuse.
- Challenge: make a page that looks intentional at every width.
Motion & animation (guest lecture)
- Inspiration: award-winning motion.
- Transitions: easing one state into another.
- Keyframe animations and what makes motion feel good vs. cheap.
- Transforms: move, scale, rotate.
- Performance: what's cheap to animate and what janks.
- Challenge: recreate a part of the animation from the opener.
JavaScript: values & control flow
- What a value is; types; variables.
- Conditionals and loops as the logic of behaviour.
- The console as a laboratory.
- Reading errors without panic.
Functions, arrays & objects
- Inspiration opener: a tiny program that does something delightful.
- Functions as reusable, nameable behaviour.
- Arrays and objects: holding and shaping data.
- Map / filter / forEach as ways of thinking.
- Structuring code so it stays readable.
- Small, testable pieces over one big blob.
The DOM & events
- JavaScript reads and rewrites the page.
- Listening for clicks, input, keys, and more.
- The event-driven model.
- Building real interactivity from scratch.
- Connecting all three languages at last.
- Challenge: a page that reacts to the user in an unexpected way.
State, data & fetching
- Inspiration opener: small apps built on open data.
- What "application state" means and why UIs must not lie about it.
- Fetching remote data; async/await conceptually.
- Showing loading, empty, and error states honestly.
- Pulling from a public API into a live page.
- The ceiling of the fundamentals — everything after is composition.
Learning to learn
- MDN as the reference that actually matters.
- How to read unfamiliar code without fear.
- Using AI tools well.
- Spotting code that works but is wrong, unsafe, or nonsense.
- Final project brainstorm/menu.
Project: pitch & kickoff
- One-minute pitch from each student.
- Scoping ruthlessly — cutting the project down to finishable.
- Sketching structure before writing code.
- Setting up the file scaffold in class.
- Choosing the right amount of ambition.
- Project options: portfolio site, browser game, data visualiser, generative-art piece, or a single-purpose tool.
Project: studio
- Supervised build time.
- One-on-one desk crits with the instructor.
- Mini-lectures driven by the group's real obstacles.
- Feature freeze: finishing over adding.
- Testing across sizes, themes, and input methods before the deadline.
Demo day
- Public presentation of each project.
- Live demo: it has to actually run.
- Oral defense: explaining choices and specific lines of code.
- Peer and instructor feedback, agency-style.
- Reflection: what you'd build next, now that you can.
- A send-off on where the web goes from here.
Course materials
Media
Prerequisites
No prior knowledge is needed. Knowledge or previous experience in Web development will be helpful, but not required.
Methodology
Each three-hour session is divided into approximately 1–1.5 hours of theory and demonstration and 1.5–2 hours of supervised in-class practice. The studio component is the core of the course: students begin every assignment in class, where the instructor can address initial issues and set them up for success. Homework continues the work started in class.
Exercises are reviewed at the beginning of the following session, with each student given a few minutes to present their work and receive feedback from peers and the instructor. Occasionally, group discussions are held to compare different problem-solving approaches.
The instructor circulates during practice (desk critique). Mini-lectures during project sessions respond to the group’s actual challenges rather than following a fixed plan. Curiosity, experimentation, and productive mischief are encouraged as legitimate ways to learn how the web behaves.
A dedicated Slack channel is available for questions and communication with the instructor between sessions.
A standing rule governs the course: students do not submit code they cannot explain. Whether written independently or generated with the help of an AI system, if a student cannot walk through the code line by line, it is not yet theirs.
Grading
Apply for this course
Programming Interactivity
by Nikolai Lopin
Total hours
45 Hours
Dates
Sep 28 - Oct 16, 2026
Fee for single course
€1500
Fee for degree students
€750
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ