09 / ATELIER

Atelier

Build a polished portfolio page—and understand the CSS behind every effect. Across ten hands-on lessons, you will create dramatic typography, a glowing hero, responsive project cards, deliberate photo crops, a mobile menu, and controlled animation. Each lesson shows the result, walks through the actual stylesheet, and gives you working code to reproduce it. You will finish with one complete page you can adapt to your own work.

Bring basic HTML and CSS familiarity, a text editor, and a browser. Start with lesson 1 and keep building the same page. Every checkpoint includes starter and finished files that open locally, with no installation needed. The reference designs are introduced with screenshots and explanations as you encounter them.

Preview the finished page · Download all ten checkpoints

Start here 10 pages · 4 groups

WHAT YOU WILL BUILD

The finished portfolio: a dark split hero with green gradient typography, a cutout portrait, and a soft glow.
Start with a plain document. Build this composition, then the cards, gallery, and interactions below it. Open the preview to explore the complete page.

Foundation

2 pages

Create the palette, typography, shared alignment, spacing, and controls that the rest of the page will use.

  1. Tokens and typeWorkshop
  2. The shellWorkshop

Motion and fit

3 pages

Connect animation to real behavior, give readers control, and adjust the composition as available space changes.

  1. MotionWorkshop
  2. Gate, cursor, and soundWorkshop
  3. BreakpointsWorkshop

Assembly

1 pages

Combine the working pieces, make your own visual variation, and verify the page with a mouse, keyboard, and phone-sized viewport.

  1. AssemblyWorkshop