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