CodePen - Practicum Index Happening Studio: Basically Radical, Radically Basic Web Coding

Basically Radical, Radically Basic
Web Coding

Let’s Get Radical.

The Big Ideas

  • Basic is good. Complexity can be Built Within.
  • Sometimes Coding Dictates Your Design.
  • Everything is Liquid, Build a Container to Pour.
  • Deconstruct: Don’t Build from Scratch

General Workflow

Learn web components / a few tricks, then apply them to your web poster.
To make a webposter, you should rough sketch first. (Figma, Illustrator). Then off to code ! Coding can be a time sucker, get the general composition dialed in the sketch phase. It's totally ok, (in fact, encouraged) to change your design, during the coding phase. That's rapid prototyping.

D A Y 1

Intro Presentation ➤
Getting to Know HTML / CSS
Image-making through BG CSS
— Blend mode 2 images (sample) ➤
— Apply Funky Shapes + GIF (sample) ➤
Learn Basic Web Typography
— Basic Marquee (sample) ➤

Apply these tricks into one web poster. (No need to use all of them) The poster should be your super loose interpretation of your MySpace page.(No need to mimic myspace layout.) Basically, you need to introduce yourself to the internet. Keep your poster elements minimal for easier time. (3 elements are plenty to work with) Remember to sketch first!



D A Y 2

Google Fonts ➤
Google Variable ➤
CSS Animation ➤
Variable in motion ➤
Draggable ➤
Marquee ➤
Create a poster that offers a moment of "hide and seek" or a "peek a boo" to reveal some kind of a message.
Example Here ➤
Example Here ➤
Example Here ➤

D A Y 3

Text Clipping ➤
Youtube Div ➤ Gradient BG ➤
3D Panels ➤
Make a 3D poster with a few components you learnt, make it move!
While in motion, it should have an revealing moment.
Example Here ➤
Example Here ➤
Example Here ➤
Example Here ➤

D A Y 4

Viewing Party

Masato Nakada


Practicum 2024

Santa Clarita, CA