Workshop

Creative
Web Coding
Workshops

Offering flexible web workshops for creatives from many industries. These workshops leverage entry level to mid level coding skills to harness imaginative web components and experimental layouts that are visually dynamic and yet still anchored in simple foundations.

email masato8800(at)gmail.com

Teaching through design sprints and (de)constructing codes.

Sample Works

Drag-n-Read

See the Pen Draggable Overlay by Ella Rosenblatt (@Ella-Rosenblatt) on CodePen.

See the Pen Piggy Bank by Masato (@otis_web) on CodePen.

See the Pen Type Draggable Element by Dylan Levine (@Dylan-Levine) on CodePen.

See the Pen where's my sandwich??? by Helen Xie (@Helen-Xie) on CodePen.

Animated Landscapes

See the Pen Week 3: Nature Poster by Isabella Borquez (@bellabor) on CodePen.

See the Pen Nature Poster by Nano Wu (@Nano-Wu) on CodePen.

See the Pen KUWK by Sadeem Yacoub (@Sadeem-Yacoub) on CodePen.

Bootstrap Grid

See the Pen Bootstrap Grid with components example by Mary Zhang (@mary99z) on CodePen.

See the Pen ランキング＿アニメZ世代 by Mika Kainuma (@Mika-Kainuma) on CodePen.

See the Pen Week 12: Bootstrap by Isabella Borquez (@bellabor) on CodePen.

Credits (top to bottom)
Drag-n-Read:
Ella Rosenblatt
Shuo Yang
Dylan Levine
Helen Xie

Majestic Landscapes:
Bella Borquez
Nano Wu
Sadeem Yacoub

Bootstrap Grid:
Mary Zhang
Mika Kainuma
Bella Borquez

Sample Works

CSS Double Exposure

See the Pen Double Exposure with GIF by Masato (@otis_web) on CodePen.

See the Pen Untitled by Jiating Shi (@Jiating-Shi) on CodePen.

Enter The Z-Space

See the Pen Calendar by Le Shuo (@Le-Shuo) on CodePen.

See the Pen Panorama Box 5 elements by shaurya (@shaurya15) on CodePen.

See the Pen i love you by Emily (@Emsems) on CodePen.

See the Pen Panorama Box Explainer by Jiating Shi (@Jiating-Shi) on CodePen.

See the Pen assign3 by Masato (@otis_web) on CodePen.

Blending Mode

See the Pen Marquee by Darah Haimovitz (@Darah-Haimovitz) on CodePen.

See the Pen week 4 by Jennifer Kim (@jenkim616) on CodePen.

See the Pen Hello by Le Shuo (@Le-Shuo) on CodePen.

Credits (top to bottom)
Double Exposure Imaging:
Top: Nicholas Cage
Bottom: Freeze Shi

Enter The Z-Space:
Shuo Yang
Shaurya Kapoor
Emily Liu
Freeze Shi
Sarah Chow

Blending Mode:
Darah Haimovitz
Jennifer Kim
Emily Liu
Shuo Yang

Flexible
course setup

  • A workshop can be a
    4—6hr session
    or
    A 3—5 day session
    or
    A Weekly session (for 3—5 weeks)
  • A projector and Wifi are needed and participants must bring their own laptops
  • A workshop can take place on-site or on zoom
  • A workshop can easily be plugged into a semester long curriculum
  • Use Codepen to write HTML & CSS and Figma to draft prototypes.

What
are your ROI’s?

Here are some key learning outcomes:

  • Understand how content (typography and image) displays on screen in fluidity.
  • Complexity is built upon a basic foundation.
  • Coding isn't memorization but curation.
  • Design dictates coding and vice versa, it's a reciprocal relationship.
  • Demystify coding syntax to increase curiostiy

You would enjoy this workshop:

  • If you are curious about coding (for creatives & designers) but don't know where to start with overwhelming amount of resources.
  • If you want to apply more customized, specialized web components to your websites run by the usual suspects of CMS platforms. (Webflow, Cargo, Squarespace, Wordpress)
  • If you want to shift away from a commercialized web aesthetics and functions. It might just be refreshing to know that websites don't have to look a certain way and it can be more poetic and unexpected.
  • If you can embrace the DIY-ness, the logic, and the magic of web coding & designing.
  • If you are a STEAM student who wants to combine web coding with their creative interests and pursuits

Workshop Archive

2025 CalArts MFA & BFA Graphic Design Creative (un)Coding and (de)Prototyping
2024 University of Southern California Basically Radical, Radically Basic
2023 CalArts MFA Graphic Design Basically Radical, Radically Basic
2023 NASA AMES Archiving Wind Tunnels
2022 Otis College of Art & Design Web Kit of Parts
2022 Southland Institute Becoming Water / A Few Simple Cuts Will Let You Build a Container

Happening Studio

These workshops will be taught by Masato Nakada. (CalArts MFA GD 2011, Northeastern University BFA GD 2006) Since 2014, he co-runs Happening Studio with Karen Nakada. As the studio designed and produced many branding and identity projects for corporations and cultural institutions, they also improved their digital presence by customizing websites according to clients’ bespoke visual language. Through this journey, the studio realized the importance of fluency in coding and design in order to make a holistic visual language that is distributed primarily as screen based assets. He currently teaches at Otis College of Art & Design.