FE404
Programming Interactivity
Faculty
Hjörtur Hilmarsson
Co-Founder, Creative Developer and CEO at 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
- Learn how motion design is implemented with web technologies
- Understand how user interactions are managed
- Understand programming fundamentals and methodologies
- Discover how websites are built and deployed
Course outline
15 classes
Programming Interactivity
- Defining Interactivity
- Interaction Design Dimensions
- History of Web Development
- Future of interactivity
Markup & HTML Fundamentals
- HTML Elements and Semantics
- SEO Fundamentals
- Web Development Tools
- Hello World
- *HTML Exercise
CSS Fundamentals
- CSS Syntax
- CSS Inheritance
- CSS Selectors
- CSS Basic Styling
- *CSS Exercise
Responsive Web Design (RWD)
RWD Methodology
CSS Layouts (Box Model)
Media Queries
Responsive Units
Practice Session
Practice Session
JavaScript Fundamentals
- Programming Foundation
- Variables
- Data Types
- Comparison Operators
- Functions
- *Programming Exercise
JavaScript and DOM elements
- Strings
- Arithmetic Operations
- Loops
- DOM Elements
- Selecting elements
- *JavaScript DOM Exercise
JavaScript User Interactions
- Manipulating elements
- User UI States
- Timing Functions
- Animations
- *JavaScript Interactions Exercise
CSS User Interactions
- CSS vs JS User Interactions
- 2D and 3D CSS Transforms
- User UI States
- Transitions
- Keyframes Animations
- *Exercise
Practice Session
Practice Session
Microinteractions
- Why, When, How?
- UX in Motion
- Linear Movement
- Easings: what, how and when?
- Javascript animations libraries
- *Exercise
Practice Session
- Building animations on scroll
- Introduction to no-code tools (Webflow)
Wrapping it up
- Building landing page skeleton
- Working with GIT
- Deploying websites
- *Design landing page homework
Work on the landing page and ask the teacher questions
Work on the landing page and ask the teacher questions
Final Project Presentation and evaluation
Final Project Presentation and evaluation
Prerequisites
This is an introductory course, no prior knowledge is needed. A previous knowledge of design and/or web development would be useful, it's not necessary.
Methodology
Most class sessions will follow a lecture and demonstration format. On occasion, we will have group debates where we will discuss problem-solving techniques. A Slack channel will be open to students where they can ask the teacher questions. Homework will be given at least two days a week, and it will be presented first thing next class for 5 minutes per student. Upon completion of each of the two Friday assignments and final project, class time will be devoted to project presentations and feedback. The feedback will resemble feedback that a junior designer or developer might receive at any agency or software company.
The final grade will be composed of the following criteria:
(30%) Weekly Evaluations
(20%) Homework
(50%) Final Project
Each assignment is graded on a 10 point scale as follows :
- 3 points for completing the assignment*
- 4 points for Craft
- 2 points Creativity
- 1 point Content
*Incomplete assignments turned in on time will result in a loss of 1 point
*Late assignments result in a loss of 2 points
Grading
Hjörtur is the CEO of 14islands, a design and development studio from Stockholm in Sweden and Floripa in Brazil. He co-founded the studio in 2011 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.
After discovering the internet in 1997, Hjörtur worked as a creative developer for over 20 years. He cares deeply about building digital experiences that spark joy and bring value to people. To make websites and apps that both inspire and explore boundaries of what's possible on the web.
See full profileApply for this course
Programming Interactivity
by Hjörtur Hilmarsson
Total hours
45 Hours
Dates
Nov 29 - Dec 17, 2021
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
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.