FE402
Programming Interactivity
Faculty
Marco Barbosa
Managing Director and Co-founder, 14islands
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
A career in web design requires different degrees of interaction with developers, sometimes even moving into a frontend developer career. Getting familiar with the basics of programming and acquiring essential knowledge of web development will improve how you communicate with the developer members of your team to create better projects more efficiently. In this course, we will learn the principles of interactivity with code. Using Javascript, HTML, and CSS, a responsive landing page with animations will be created that will challenge our creativity.
Learning highlights
- Understand how programming relates to interaction design.
- Achieve a deep understanding of HTML and web technologies.
- Understand how user interactions are managed.
- Understand programming fundamentals and methodologies.
Course outline
15 classes
Programming Interactivity
Defining Interactivity.
Interaction Design Dimensions.
History of Web Development.
Inspiration tour.
Future of interactivity.
Vibe coding overview.
*Setup exercise.
*Project idea brainstorming.
Markup and HTML Fundamentals
HTML Elements and Semantics.
SEO Fundamentals.
Accessibility Tools.
Web Development Tools.
Hello World.
*HTML Exercise.
CSS Fundamentals
CSS Syntax.
CSS Inheritance.
CSS Selectors.
CCS Basic Styling.
*CSS Exercise.
Responsive Web Design (RWD)
RWD Methodology.
CSS Layouts (Box Model).
CSS Grid.
Flexbox.
Media Queries.
Responsive Units.
*CSS Grid Exercise.
Practice Session
Practice Session
JavaScript Fundamentals
Programming Foundation.
Variables, functions and events.
Click, hover and input events.
Data types.
Loops.
*Javascript Exercise.
JavaScript and DOM elements
Understanding the Document Object.
QuerySelector, innerHTML, classList.
Show/hide, toggle themes, dynamic updates.
DOM Elements.
Selecting elements.
*JavaScript DOM Exercise.
Practice Session
Practice Session
Forms, Input and User Data
Creating HTML forms.
Form elements.
Capturing input with JavaScript.
Form validation best practices.
*Contact form exercise.
Introduction to motion
Transitions, Transforms.
CSS vs JS Interactions.
UI States.
Keyframes animations.
Best practices and easings.
Animating multiple elements.
*Motion Exercise.
Web Animation Libraries
Intro to libraries like GSAP or Anime.js.
Animate on scroll with Intersection Observer.
Combining timeline animations with user events.
Best performance practices.
*Animation library exercise.
No code tools
What they are.
Current status.
Webflow.
Framer.
Other tools.
*No code tool exercise.
Practical Session for Final Project
Practical Session for Final Project
Practical Session for Final Project
Practical Session for Final Project
Final Project Presentation
Final project presentation
Prerequisites
This is an introductory course; no prior knowledge is needed. A previous knowledge of design and/or web development would be useful, but it's not necessary.
Methodology
Most class sessions will follow a lecture and demonstration format. Occasionally, we will hold group debates to discuss different problem-solving techniques. A dedicated Slack channel will be available for students to ask questions and engage with the instructor outside of class.
Homework or in-class exercises will be assigned at least twice a week and will be reviewed at the beginning of the following session, with each student given five minutes to present their work. After the completion of each of the two Friday assignments and the final project, class time will be allocated for project presentations and peer/instructor feedback. This feedback will reflect the type typically received by junior designers or developers in a professional agency or software company setting.
Grading
Marco Barbosa is the managing director of 14islands, a design and development studio from Stockholm in Sweden and Floripa in Brazil. He joined forces at 14islands in 2013 and since then they've done work with companies such as Google, Adidas, Disney, Facebook, HBO, Shopify, Ericsson and many innovative startups in the world. Their projects have won multiple awards such as the FWA, Awwwwards, CSS Design Awards, and European Design Awards.
With a strong passion for creativity and good design, he has been in the industry for more than 10 years and is always on the look for nice experiences. Self-taught and with a strong enthusiasm for collaboration to get things done properly, he cares about putting people together and turning meaningful projects into reality.
See full profileApply for this course
Programming Interactivity
by Marco Barbosa
Total hours
45 Hours
Dates
Sep 29 - Oct 17, 2025
Fee for single course
€1500
Fee for degree students
€750
Explore related courses
Filter by campus:
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
Will I receive a certificate after completion?
Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.
Do I need a visa?
This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.
Can I get a discount?
Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.