Course Preview
The web browser is the most ubiquitous gallery space in the world. Learning to code isn't just about building functional websites—it's about unlocking a new, interactive medium for creative expression.
In this comprehensive 6-module masterclass, we will transition from traditional visual design into the dynamic realm of web technologies. You'll learn the foundations of HTML5 and modern CSS (Grid, Flexbox, Animations), and dive deep into JavaScript to create interactive, generative art using the HTML5 Canvas API and SVG. We'll approach coding not as a dry technical skill, but as an extension of your design practice.
What You Will Learn:
- Modern Web Foundations: Building semantic, accessible, and responsive layouts using HTML and CSS.
- Interactive JavaScript: Programming logic, DOM manipulation, and event handling to make your designs respond to users.
- Generative Art with Canvas: Drawing, animating, and simulating particle systems directly in the browser.
Module 1: The Canvas - HTML & CSS Semantics
Before we animate, we must build structure. This module covers the semantic web, CSS variables, typography, and how to use modern layout systems like CSS Grid and Flexbox to translate a Figma composition into code. [Video Embed Would Go Here]
Resources
- Starter HTML Boilerplates
- Interactive CSS Grid Guide
Module 2: Motion & Interaction with CSS
We explore CSS transitions, keyframe animations, and hover states. You'll learn how to add micro-interactions that make a digital experience feel premium and responsive without writing a single line of JavaScript.
Module 3: JavaScript Fundamentals for Designers
Demystifying programming. We'll cover variables, functions, loops, and control flow through a visual lens, demonstrating how abstract logic directly manipulates what you see on the screen via the Document Object Model (DOM).
Module 4: Drawing with Code - HTML5 Canvas
This is where the magic happens. We transition from UI design to generative art using the Canvas API. You will learn how to draw shapes, apply colors programmatically, and generate procedural patterns using math and loops.
Module 5: Animation Loops & Particle Systems
Static art becomes living art. We will introduce `requestAnimationFrame`, build physics-based particle systems, and create interactive sketches that respond fluidly to mouse movements and clicks.
Module 6: Audio-Visual & Data Driven Art
In the final module, we connect our visual code to external inputs. We'll pull data from APIs to drive design decisions and use the Web Audio API to create visualizations that pulse and react to sound.
Capstone Project
Code an interactive, generative landing page from scratch. Your project should combine structured HTML/CSS content with a dynamic, interactive Canvas background. Submit your GitHub repository via the student portal.
Download Capstone Prompt
About the Instructor
Sara Bensalem is a designer and creative coder whose work bridges spatial architecture and digital media. With extensive experience teaching art and design at Créart'lab, and building digital brands, she brings a uniquely visual and pedagogical approach to programming. She believes that teaching designers to code fundamentally expands their creative agency.