The Only Web Design Video You Will Ever Need
A 94-minute teardown of what separates websites that convert from websites that just exist — with live before/after redesigns across a dozen real clients.
June 15thA 14-minute system that collapses a decade of web design learning into five skills every professional actually uses.
After ten years of web design, only five skills separate amateur work from professional results: typography, layout, color, code basics, and conversion thinking — and most designers are wasting time on everything except these.
Most beginner designers waste years chasing tools and trends when five skills drive the gap between amateur and professional work. Typography comes down to two questions: picking the right fonts and setting up a consistent type scale. Layout means a 12-column grid, an 8-point spacing system, and four visual hierarchy principles. Color means limiting a palette to two or three intentional roles and using opacity instead of extra colors. Code means knowing HTML, CSS, and JS basics well enough to vibe-code the rest. Conversion means designing every page around one single goal and earning trust through clarity and emotional resonance.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →
States the premise: after 10 years, only 5 skills matter. Names the outcome the viewer will have by the end.

Two questions: how to pick fonts (fontshare, uncut.wtf) and how to set them up (major third type scale, REM values, letter spacing, line height). typescale.net as a shortcut.

12-column grid on desktop, 8-column tablet, 4-column mobile. 8-point grid for spacing. Four visual hierarchy principles: proximity, size, contrast, alignment.

Limit palette to 2-3 colors. 60-30-10 rule for balance. Use opacity instead of adding colors. Prioritize contrast ratios. CSS Overview to steal palettes from professional sites.

HTML, CSS, JS, PHP basics are enough. Learn 80% via courses, vibe code the rest with snippets and AI.

Pro designers design for action, not looks. Personal story: redesign that tanked a client's sales by ignoring the user journey. One goal per page. CTAs in hero + nav + every 2-3 scrolls. Trust, clarity, and feelings.

Permission to stop chasing everything. Focus on these five and grow faster than chasing trends.
Confidence in web design does not come from knowing more tools — it comes from having repeatable systems for typography, layout, color, code, and conversion.
“Pro designers don't use more color. They use color more intentionally.”
“One good color used well beats five random colors any day.”
“Pro designers don't guess about where things should go on the page. They have systems that guarantee it every time.”
“I had focused so much on the design that I ignored the user journey.”
“People don't read websites. They scan them.”
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
Ten years of reading books, taking courses, and building websites — and it comes down to five things. Not fifty. Not a platform, not a trend, not the latest AI tool. Five durable skills that every working professional actually uses, and that most beginners skip entirely in favor of chasing what looks impressive.
Scale each heading ~25% larger than the previous using REM values. typescale.net generates the full system automatically.
All spacing in multiples of 8. Used by Google Material Design and Apple. Set up in Figma as a grid guide.
Assigns a percentage and a job to each color in a limited palette, preventing visual chaos.
Every page has one goal: buy a product, sign up for a call, or capture a lead magnet. Multiple goals split user attention and reduce conversion.
Extension of the classic KLT framework — adds feel as the emotional layer that moves people from interest to action.
“If this video was helpful, make sure to hit that like button and subscribe so you don't miss another episode.”
Soft, friendly close CTA. Mid-video CTA at ~1:39 for likes/subscribe plus slide download and font resource list.
00:00
00:14
00:23
00:34
00:44
00:55
01:14
01:23
01:31
01:42
01:57
02:07
02:16
02:25
02:41
02:46
02:57
03:08
03:18
03:25
03:40
03:52
03:57
04:12
04:22
04:37
04:45
04:54
05:06
05:12
05:28
05:39
05:49
06:00
06:11
06:22
06:32
06:44
06:54
07:05
07:15
07:26
07:37
07:48
07:54
08:09
08:20
08:31
08:43
08:50
09:03
09:13
09:23
09:32
09:46
09:57
10:04
10:18
10:29
10:45
10:51
10:59
11:13
11:23
11:29
11:41
11:57
12:04
12:17
12:25
12:39
12:49
13:00
13:11
13:21
13:37
13:45
13:49
14:01
14:15A 94-minute teardown of what separates websites that convert from websites that just exist — with live before/after redesigns across a dozen real clients.
June 15thA six-level stress test of Claude Fable 5 as a web design engine — from a two-minute landing page to a scroll-driven 3D experience that used to take hours.
June 11thA screen-recorded test of Claude Fable 5 wired to Higgsfield's MCP server, generating its own hero video and product imagery before coding a scroll-driven Nike Air Max 90 site around them.
July 5thSeven escalating techniques that take a Claude Code website from a 3-out-of-100 chatbot draft to a one-shot design worth stealing.
July 5thSix psychology principles, each shown as a real before-and-after screen, for why users abandon one design and stick with another.
July 2ndA screen-recorded walkthrough of Claude Fable 5 plus the Higgsfield MCP building three cinematic 3D-scroll websites from single prompts.
July 2nd