Happening Studio: Basically Radical, Radically Basic Web Coding

Basically Radical, Radically Basic
Web Coding

Welcome!
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

Sign up links:

Codepen ➤
Sign up sheet ➤

Helpful Links

DIV Shaper ➤
Color Assets ➤
Type Treatment ➤
Div Dropshadows ➤
W3 (HTML Encyclopedia) ➤
W3 (CSS Encyclopedia) ➤
Transform Angles ➤
CSS Animation Library ➤
Google Fonts ➤

Images

Image Uploader ➤
Giphy ➤
Unsplash ➤

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) ➤

Assignment:
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!

HTML

CSS

D A Y 2

Google Fonts ➤
Google Variable ➤
CSS Animation ➤
Variable in motion ➤
Draggable ➤
Marquee ➤
Assignment:
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 ➤
Assignment:
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

Troubleshoot
Archive
Viewing Party

instructor:
Masato Nakada

e:
Masato8800(at)gmail.com


Practicum 2024


Santa Clarita, CA