WEBVTT
Kind: captions
Language: en

00:00:00.000 --> 00:00:02.070 align:start position:0%
 
In<00:00:00.360><c> this</c><00:00:00.600><c> video,</c><00:00:01.120><c> I'm</c><00:00:01.320><c> going</c><00:00:01.560><c> to</c><00:00:01.680><c> show</c><00:00:01.840><c> you</c><00:00:01.960><c> how</c>

00:00:02.070 --> 00:00:02.080 align:start position:0%
In this video, I'm going to show you how
 

00:00:02.080 --> 00:00:04.790 align:start position:0%
In this video, I'm going to show you how
to<00:00:02.160><c> build</c><00:00:02.440><c> a</c><00:00:02.560><c> $10,000</c><00:00:03.520><c> website</c><00:00:04.040><c> using</c><00:00:04.360><c> Claude</c>

00:00:04.790 --> 00:00:04.800 align:start position:0%
to build a $10,000 website using Claude
 

00:00:04.800 --> 00:00:07.150 align:start position:0%
to build a $10,000 website using Claude
code.<00:00:05.600><c> These</c><00:00:05.840><c> sites</c><00:00:06.120><c> you're</c><00:00:06.200><c> seeing</c><00:00:06.640><c> were</c><00:00:06.840><c> all</c>

00:00:07.150 --> 00:00:07.160 align:start position:0%
code. These sites you're seeing were all
 

00:00:07.160 --> 00:00:08.830 align:start position:0%
code. These sites you're seeing were all
built<00:00:07.440><c> with</c><00:00:07.600><c> Claude</c><00:00:07.920><c> code,</c><00:00:08.320><c> and</c><00:00:08.440><c> by</c><00:00:08.560><c> the</c><00:00:08.720><c> end</c>

00:00:08.830 --> 00:00:08.840 align:start position:0%
built with Claude code, and by the end
 

00:00:08.840 --> 00:00:10.630 align:start position:0%
built with Claude code, and by the end
of<00:00:08.920><c> this</c><00:00:09.040><c> video,</c><00:00:09.520><c> yours</c><00:00:09.920><c> is</c><00:00:10.040><c> going</c><00:00:10.280><c> to</c><00:00:10.360><c> be</c><00:00:10.480><c> one</c>

00:00:10.630 --> 00:00:10.640 align:start position:0%
of this video, yours is going to be one
 

00:00:10.640 --> 00:00:12.710 align:start position:0%
of this video, yours is going to be one
of<00:00:10.720><c> them.</c><00:00:11.160><c> We'll</c><00:00:11.320><c> install</c><00:00:11.760><c> Claude</c><00:00:12.040><c> code,</c>

00:00:12.710 --> 00:00:12.720 align:start position:0%
of them. We'll install Claude code,
 

00:00:12.720 --> 00:00:14.870 align:start position:0%
of them. We'll install Claude code,
level<00:00:13.080><c> it</c><00:00:13.200><c> up</c><00:00:13.320><c> with</c><00:00:13.560><c> two</c><00:00:13.680><c> design</c><00:00:14.080><c> skills,</c>

00:00:14.870 --> 00:00:14.880 align:start position:0%
level it up with two design skills,
 

00:00:14.880 --> 00:00:17.430 align:start position:0%
level it up with two design skills,
write<00:00:15.200><c> one</c><00:00:15.440><c> prompt,</c><00:00:16.240><c> polish</c><00:00:16.600><c> the</c><00:00:16.680><c> result,</c><00:00:17.240><c> and</c>

00:00:17.430 --> 00:00:17.440 align:start position:0%
write one prompt, polish the result, and
 

00:00:17.440 --> 00:00:19.510 align:start position:0%
write one prompt, polish the result, and
put<00:00:17.600><c> it</c><00:00:17.720><c> on</c><00:00:17.840><c> a</c><00:00:17.920><c> real</c><00:00:18.200><c> domain.</c><00:00:19.000><c> The</c><00:00:19.120><c> site</c><00:00:19.400><c> is</c>

00:00:19.510 --> 00:00:19.520 align:start position:0%
put it on a real domain. The site is
 

00:00:19.520 --> 00:00:20.590 align:start position:0%
put it on a real domain. The site is
going<00:00:19.720><c> to</c><00:00:19.840><c> look</c><00:00:20.000><c> like</c><00:00:20.120><c> the</c><00:00:20.240><c> work</c><00:00:20.440><c> of</c><00:00:20.520><c> a</c>

00:00:20.590 --> 00:00:20.600 align:start position:0%
going to look like the work of a
 

00:00:20.600 --> 00:00:23.510 align:start position:0%
going to look like the work of a
freelance<00:00:21.040><c> developer</c><00:00:21.520><c> charging</c><00:00:22.000><c> $10,000,</c>

00:00:23.510 --> 00:00:23.520 align:start position:0%
freelance developer charging $10,000,
 

00:00:23.520 --> 00:00:25.030 align:start position:0%
freelance developer charging $10,000,
and<00:00:23.680><c> nobody</c><00:00:24.000><c> who</c><00:00:24.120><c> visits</c><00:00:24.480><c> it</c><00:00:24.600><c> is</c><00:00:24.720><c> going</c><00:00:24.920><c> to</c>

00:00:25.030 --> 00:00:25.040 align:start position:0%
and nobody who visits it is going to
 

00:00:25.040 --> 00:00:27.270 align:start position:0%
and nobody who visits it is going to
know<00:00:25.240><c> an</c><00:00:25.440><c> AI</c><00:00:25.720><c> made</c><00:00:25.960><c> it.</c><00:00:26.600><c> Stick</c><00:00:26.960><c> around</c><00:00:27.200><c> for</c>

00:00:27.270 --> 00:00:27.280 align:start position:0%
know an AI made it. Stick around for
 

00:00:27.280 --> 00:00:28.870 align:start position:0%
know an AI made it. Stick around for
chapter<00:00:27.600><c> seven</c><00:00:27.880><c> especially.</c><00:00:28.480><c> That's</c><00:00:28.760><c> where</c>

00:00:28.870 --> 00:00:28.880 align:start position:0%
chapter seven especially. That's where
 

00:00:28.880 --> 00:00:30.790 align:start position:0%
chapter seven especially. That's where
the<00:00:29.000><c> cursor</c><00:00:29.440><c> effects</c><00:00:29.920><c> and</c><00:00:30.080><c> motion</c><00:00:30.400><c> design</c>

00:00:30.790 --> 00:00:30.800 align:start position:0%
the cursor effects and motion design
 

00:00:30.800 --> 00:00:32.670 align:start position:0%
the cursor effects and motion design
take<00:00:31.040><c> the</c><00:00:31.160><c> build</c><00:00:31.480><c> from</c><00:00:31.680><c> professional</c><00:00:32.520><c> to</c>

00:00:32.670 --> 00:00:32.680 align:start position:0%
take the build from professional to
 

00:00:32.680 --> 00:00:34.950 align:start position:0%
take the build from professional to
expensive.<00:00:33.880><c> And</c><00:00:34.000><c> by</c><00:00:34.120><c> the</c><00:00:34.240><c> very</c><00:00:34.520><c> end,</c><00:00:34.760><c> I'll</c>

00:00:34.950 --> 00:00:34.960 align:start position:0%
expensive. And by the very end, I'll
 

00:00:34.960 --> 00:00:36.870 align:start position:0%
expensive. And by the very end, I'll
show<00:00:35.120><c> you</c><00:00:35.200><c> the</c><00:00:35.360><c> cheapest</c><00:00:35.920><c> way</c><00:00:36.120><c> to</c><00:00:36.240><c> put</c><00:00:36.400><c> it</c><00:00:36.520><c> live</c>

00:00:36.870 --> 00:00:36.880 align:start position:0%
show you the cheapest way to put it live
 

00:00:36.880 --> 00:00:39.150 align:start position:0%
show you the cheapest way to put it live
on<00:00:37.040><c> the</c><00:00:37.160><c> internet</c><00:00:37.640><c> at</c><00:00:37.760><c> a</c><00:00:37.840><c> custom</c><00:00:38.200><c> domain.</c><00:00:38.960><c> But</c>

00:00:39.150 --> 00:00:39.160 align:start position:0%
on the internet at a custom domain. But
 

00:00:39.160 --> 00:00:42.110 align:start position:0%
on the internet at a custom domain. But
first,<00:00:39.880><c> what</c><00:00:40.080><c> exactly</c><00:00:40.560><c> is</c><00:00:40.800><c> Claude</c><00:00:41.160><c> code?</c>

00:00:42.110 --> 00:00:42.120 align:start position:0%
first, what exactly is Claude code?
 

00:00:42.120 --> 00:00:44.510 align:start position:0%
first, what exactly is Claude code?
Claude<00:00:42.560><c> code</c><00:00:42.880><c> is</c><00:00:43.000><c> an</c><00:00:43.200><c> AI</c><00:00:43.480><c> coding</c><00:00:43.800><c> assistant.</c>

00:00:44.510 --> 00:00:44.520 align:start position:0%
Claude code is an AI coding assistant.
 

00:00:44.520 --> 00:00:46.310 align:start position:0%
Claude code is an AI coding assistant.
You<00:00:44.640><c> describe</c><00:00:45.000><c> a</c><00:00:45.040><c> website</c><00:00:45.520><c> to</c><00:00:45.640><c> it</c><00:00:45.800><c> in</c><00:00:45.920><c> natural</c>

00:00:46.310 --> 00:00:46.320 align:start position:0%
You describe a website to it in natural
 

00:00:46.320 --> 00:00:47.910 align:start position:0%
You describe a website to it in natural
language,<00:00:46.880><c> and</c><00:00:47.000><c> it</c><00:00:47.120><c> writes</c><00:00:47.280><c> the</c><00:00:47.400><c> code</c><00:00:47.640><c> for</c><00:00:47.800><c> you</c>

00:00:47.910 --> 00:00:47.920 align:start position:0%
language, and it writes the code for you
 

00:00:47.920 --> 00:00:49.310 align:start position:0%
language, and it writes the code for you
while<00:00:48.120><c> you</c><00:00:48.240><c> watch.</c>

00:00:49.310 --> 00:00:49.320 align:start position:0%
while you watch.
 

00:00:49.320 --> 00:00:51.270 align:start position:0%
while you watch.
We're<00:00:49.520><c> using</c><00:00:49.800><c> the</c><00:00:49.880><c> Claude</c><00:00:50.240><c> code</c><00:00:50.560><c> desktop</c><00:00:51.080><c> app</c>

00:00:51.270 --> 00:00:51.280 align:start position:0%
We're using the Claude code desktop app
 

00:00:51.280 --> 00:00:52.670 align:start position:0%
We're using the Claude code desktop app
today<00:00:51.600><c> because</c><00:00:51.920><c> it</c><00:00:52.000><c> gives</c><00:00:52.160><c> you</c><00:00:52.280><c> everything</c>

00:00:52.670 --> 00:00:52.680 align:start position:0%
today because it gives you everything
 

00:00:52.680 --> 00:00:54.910 align:start position:0%
today because it gives you everything
you<00:00:52.760><c> need</c><00:00:53.000><c> in</c><00:00:53.240><c> one</c><00:00:53.560><c> window</c><00:00:54.000><c> with</c><00:00:54.240><c> no</c><00:00:54.560><c> extra</c>

00:00:54.910 --> 00:00:54.920 align:start position:0%
you need in one window with no extra
 

00:00:54.920 --> 00:00:56.790 align:start position:0%
you need in one window with no extra
developer<00:00:55.360><c> setup.</c><00:00:56.160><c> Before</c><00:00:56.440><c> we</c><00:00:56.560><c> build</c>

00:00:56.790 --> 00:00:56.800 align:start position:0%
developer setup. Before we build
 

00:00:56.800 --> 00:00:58.790 align:start position:0%
developer setup. Before we build
anything,<00:00:57.600><c> I</c><00:00:57.680><c> want</c><00:00:57.920><c> to</c><00:00:58.000><c> define</c><00:00:58.560><c> what</c><00:00:58.720><c> a</c>

00:00:58.790 --> 00:00:58.800 align:start position:0%
anything, I want to define what a
 

00:00:58.800 --> 00:01:02.190 align:start position:0%
anything, I want to define what a
$10,000<00:00:59.680><c> website</c><00:01:00.240><c> actually</c><00:01:00.760><c> looks</c><00:01:01.040><c> like.</c><00:01:01.600><c> So,</c>

00:01:02.190 --> 00:01:02.200 align:start position:0%
$10,000 website actually looks like. So,
 

00:01:02.200 --> 00:01:04.350 align:start position:0%
$10,000 website actually looks like. So,
I<00:01:02.320><c> asked</c><00:01:02.640><c> Claude.</c><00:01:03.280><c> There</c><00:01:03.440><c> are</c><00:01:03.720><c> eight</c><00:01:04.040><c> things</c>

00:01:04.350 --> 00:01:04.360 align:start position:0%
I asked Claude. There are eight things
 

00:01:04.360 --> 00:01:06.710 align:start position:0%
I asked Claude. There are eight things
that<00:01:04.519><c> separate</c><00:01:05.080><c> a</c><00:01:05.160><c> $10,000</c><00:01:06.000><c> website</c><00:01:06.440><c> from</c><00:01:06.640><c> a</c>

00:01:06.710 --> 00:01:06.720 align:start position:0%
that separate a $10,000 website from a
 

00:01:06.720 --> 00:01:08.670 align:start position:0%
that separate a $10,000 website from a
$200<00:01:07.720><c> one.</c>

00:01:08.670 --> 00:01:08.680 align:start position:0%
$200 one.
 

00:01:08.680 --> 00:01:10.150 align:start position:0%
$200 one.
Point<00:01:09.000><c> of</c><00:01:09.080><c> view,</c>

00:01:10.150 --> 00:01:10.160 align:start position:0%
Point of view,
 

00:01:10.160 --> 00:01:11.910 align:start position:0%
Point of view,
typography,

00:01:11.910 --> 00:01:11.920 align:start position:0%
typography,
 

00:01:11.920 --> 00:01:13.310 align:start position:0%
typography,
color,

00:01:13.310 --> 00:01:13.320 align:start position:0%
color,
 

00:01:13.320 --> 00:01:14.710 align:start position:0%
color,
hierarchy,

00:01:14.710 --> 00:01:14.720 align:start position:0%
hierarchy,
 

00:01:14.720 --> 00:01:16.070 align:start position:0%
hierarchy,
imagery,

00:01:16.070 --> 00:01:16.080 align:start position:0%
imagery,
 

00:01:16.080 --> 00:01:17.470 align:start position:0%
imagery,
motion,

00:01:17.470 --> 00:01:17.480 align:start position:0%
motion,
 

00:01:17.480 --> 00:01:18.790 align:start position:0%
motion,
mobile,

00:01:18.790 --> 00:01:18.800 align:start position:0%
mobile,
 

00:01:18.800 --> 00:01:20.790 align:start position:0%
mobile,
and<00:01:19.440><c> the</c><00:01:19.560><c> invisible</c><00:01:20.000><c> stuff</c><00:01:20.280><c> that</c><00:01:20.440><c> makes</c><00:01:20.720><c> a</c>

00:01:20.790 --> 00:01:20.800 align:start position:0%
and the invisible stuff that makes a
 

00:01:20.800 --> 00:01:23.350 align:start position:0%
and the invisible stuff that makes a
site<00:01:21.120><c> feel</c><00:01:21.400><c> fast</c><00:01:21.960><c> and</c><00:01:22.160><c> finished.</c>

00:01:23.350 --> 00:01:23.360 align:start position:0%
site feel fast and finished.
 

00:01:23.360 --> 00:01:25.350 align:start position:0%
site feel fast and finished.
Those<00:01:23.840><c> eight</c><00:01:24.120><c> items</c><00:01:24.480><c> fall</c><00:01:24.800><c> into</c><00:01:25.040><c> three</c>

00:01:25.350 --> 00:01:25.360 align:start position:0%
Those eight items fall into three
 

00:01:25.360 --> 00:01:28.310 align:start position:0%
Those eight items fall into three
groups:<00:01:26.400><c> taste,</c><00:01:27.080><c> substance,</c><00:01:27.760><c> and</c><00:01:28.000><c> felt</c>

00:01:28.310 --> 00:01:28.320 align:start position:0%
groups: taste, substance, and felt
 

00:01:28.320 --> 00:01:31.190 align:start position:0%
groups: taste, substance, and felt
quality.<00:01:29.400><c> We're</c><00:01:29.640><c> hitting</c><00:01:30.040><c> all</c><00:01:30.320><c> eight</c><00:01:30.520><c> today.</c>

00:01:31.190 --> 00:01:31.200 align:start position:0%
quality. We're hitting all eight today.
 

00:01:31.200 --> 00:01:33.830 align:start position:0%
quality. We're hitting all eight today.
Here's<00:01:31.480><c> why</c><00:01:31.640><c> Claude</c><00:01:31.960><c> code</c><00:01:32.320><c> can</c><00:01:32.520><c> hit</c><00:01:32.840><c> a</c><00:01:32.960><c> $10,000</c>

00:01:33.830 --> 00:01:33.840 align:start position:0%
Here's why Claude code can hit a $10,000
 

00:01:33.840 --> 00:01:35.950 align:start position:0%
Here's why Claude code can hit a $10,000
bar<00:01:34.160><c> and</c><00:01:34.320><c> why</c><00:01:34.480><c> most</c><00:01:34.920><c> no-code</c><00:01:35.560><c> website</c>

00:01:35.950 --> 00:01:35.960 align:start position:0%
bar and why most no-code website
 

00:01:35.960 --> 00:01:38.270 align:start position:0%
bar and why most no-code website
builders<00:01:36.400><c> can't.</c><00:01:37.080><c> When</c><00:01:37.240><c> you</c><00:01:37.360><c> use</c><00:01:37.520><c> a</c><00:01:37.560><c> tool</c><00:01:37.920><c> like</c>

00:01:38.270 --> 00:01:38.280 align:start position:0%
builders can't. When you use a tool like
 

00:01:38.280 --> 00:01:40.030 align:start position:0%
builders can't. When you use a tool like
Wix<00:01:38.640><c> or</c><00:01:38.800><c> Squarespace,</c><00:01:39.520><c> you</c><00:01:39.640><c> start</c><00:01:39.840><c> with</c><00:01:39.960><c> a</c>

00:01:40.030 --> 00:01:40.040 align:start position:0%
Wix or Squarespace, you start with a
 

00:01:40.040 --> 00:01:42.470 align:start position:0%
Wix or Squarespace, you start with a
template,<00:01:41.120><c> and</c><00:01:41.280><c> whatever</c><00:01:41.600><c> you</c><00:01:41.760><c> build</c><00:01:42.160><c> ends</c><00:01:42.360><c> up</c>

00:01:42.470 --> 00:01:42.480 align:start position:0%
template, and whatever you build ends up
 

00:01:42.480 --> 00:01:44.070 align:start position:0%
template, and whatever you build ends up
looking<00:01:42.720><c> like</c><00:01:43.000><c> every</c><00:01:43.320><c> other</c><00:01:43.520><c> site</c><00:01:43.960><c> that</c>

00:01:44.070 --> 00:01:44.080 align:start position:0%
looking like every other site that
 

00:01:44.080 --> 00:01:46.310 align:start position:0%
looking like every other site that
started<00:01:44.400><c> from</c><00:01:44.520><c> that</c><00:01:44.720><c> template.</c><00:01:45.760><c> Claude</c><00:01:46.120><c> code</c>

00:01:46.310 --> 00:01:46.320 align:start position:0%
started from that template. Claude code
 

00:01:46.320 --> 00:01:48.150 align:start position:0%
started from that template. Claude code
doesn't<00:01:46.560><c> work</c><00:01:46.760><c> that</c><00:01:46.960><c> way.</c><00:01:47.680><c> It</c><00:01:47.840><c> writes</c><00:01:48.040><c> the</c>

00:01:48.150 --> 00:01:48.160 align:start position:0%
doesn't work that way. It writes the
 

00:01:48.160 --> 00:01:50.550 align:start position:0%
doesn't work that way. It writes the
code<00:01:48.560><c> for</c><00:01:48.680><c> your</c><00:01:48.840><c> site</c><00:01:49.120><c> from</c><00:01:49.320><c> scratch</c><00:01:49.960><c> based</c><00:01:50.360><c> on</c>

00:01:50.550 --> 00:01:50.560 align:start position:0%
code for your site from scratch based on
 

00:01:50.560 --> 00:01:52.550 align:start position:0%
code for your site from scratch based on
what<00:01:50.720><c> you</c><00:01:50.800><c> describe.</c><00:01:51.800><c> So,</c><00:01:52.000><c> you</c><00:01:52.120><c> can</c><00:01:52.280><c> get</c><00:01:52.520><c> a</c>

00:01:52.550 --> 00:01:52.560 align:start position:0%
what you describe. So, you can get a
 

00:01:52.560 --> 00:01:54.910 align:start position:0%
what you describe. So, you can get a
completely<00:01:53.400><c> custom</c><00:01:53.840><c> result</c><00:01:54.200><c> without</c><00:01:54.640><c> ever</c>

00:01:54.910 --> 00:01:54.920 align:start position:0%
completely custom result without ever
 

00:01:54.920 --> 00:01:57.270 align:start position:0%
completely custom result without ever
having<00:01:55.240><c> to</c><00:01:55.360><c> learn</c><00:01:55.560><c> to</c><00:01:55.680><c> code</c><00:01:55.920><c> yourself.</c><00:01:56.920><c> On</c><00:01:57.040><c> top</c>

00:01:57.270 --> 00:01:57.280 align:start position:0%
having to learn to code yourself. On top
 

00:01:57.280 --> 00:01:59.110 align:start position:0%
having to learn to code yourself. On top
of<00:01:57.360><c> that,</c><00:01:57.840><c> Claude</c><00:01:58.200><c> can</c><00:01:58.320><c> install</c><00:01:58.680><c> design</c>

00:01:59.110 --> 00:01:59.120 align:start position:0%
of that, Claude can install design
 

00:01:59.120 --> 00:02:00.830 align:start position:0%
of that, Claude can install design
skills<00:01:59.520><c> that</c><00:01:59.720><c> level</c><00:02:00.040><c> up</c><00:02:00.320><c> everything</c><00:02:00.720><c> it</c>

00:02:00.830 --> 00:02:00.840 align:start position:0%
skills that level up everything it
 

00:02:00.840 --> 00:02:02.990 align:start position:0%
skills that level up everything it
makes.<00:02:01.760><c> You</c><00:02:01.880><c> can</c><00:02:02.000><c> drop</c><00:02:02.320><c> in</c><00:02:02.520><c> pre-made</c>

00:02:02.990 --> 00:02:03.000 align:start position:0%
makes. You can drop in pre-made
 

00:02:03.000 --> 00:02:04.910 align:start position:0%
makes. You can drop in pre-made
components<00:02:03.479><c> from</c><00:02:03.640><c> libraries</c><00:02:04.120><c> online,</c><00:02:04.800><c> the</c>

00:02:04.910 --> 00:02:04.920 align:start position:0%
components from libraries online, the
 

00:02:04.920 --> 00:02:06.310 align:start position:0%
components from libraries online, the
kind<00:02:05.080><c> of</c><00:02:05.160><c> things</c><00:02:05.400><c> that</c><00:02:05.600><c> used</c><00:02:05.840><c> to</c><00:02:05.920><c> require</c><00:02:06.280><c> a</c>

00:02:06.310 --> 00:02:06.320 align:start position:0%
kind of things that used to require a
 

00:02:06.320 --> 00:02:08.109 align:start position:0%
kind of things that used to require a
real<00:02:06.520><c> developer,</c><00:02:07.280><c> and</c><00:02:07.640><c> you</c><00:02:07.720><c> can</c><00:02:07.840><c> keep</c>

00:02:08.109 --> 00:02:08.119 align:start position:0%
real developer, and you can keep
 

00:02:08.119 --> 00:02:10.150 align:start position:0%
real developer, and you can keep
iterating<00:02:08.520><c> with</c><00:02:08.679><c> Claude</c><00:02:09.080><c> on</c><00:02:09.320><c> every</c><00:02:09.600><c> detail</c>

00:02:10.150 --> 00:02:10.160 align:start position:0%
iterating with Claude on every detail
 

00:02:10.160 --> 00:02:13.230 align:start position:0%
iterating with Claude on every detail
until<00:02:10.399><c> the</c><00:02:10.479><c> site</c><00:02:10.840><c> actually</c><00:02:11.200><c> feels</c><00:02:11.680><c> expensive.</c>

00:02:13.230 --> 00:02:13.240 align:start position:0%
until the site actually feels expensive.
 

00:02:13.240 --> 00:02:15.470 align:start position:0%
until the site actually feels expensive.
We're<00:02:13.400><c> going</c><00:02:13.640><c> to</c><00:02:13.720><c> do</c><00:02:14.080><c> all</c><00:02:14.320><c> of</c><00:02:14.400><c> that</c><00:02:14.560><c> today.</c><00:02:15.320><c> The</c>

00:02:15.470 --> 00:02:15.480 align:start position:0%
We're going to do all of that today. The
 

00:02:15.480 --> 00:02:17.550 align:start position:0%
We're going to do all of that today. The
first<00:02:15.840><c> step</c><00:02:16.200><c> is</c><00:02:16.320><c> getting</c><00:02:16.560><c> Claude</c><00:02:16.920><c> code</c><00:02:17.200><c> set</c><00:02:17.360><c> up</c>

00:02:17.550 --> 00:02:17.560 align:start position:0%
first step is getting Claude code set up
 

00:02:17.560 --> 00:02:19.710 align:start position:0%
first step is getting Claude code set up
on<00:02:17.720><c> your</c><00:02:17.840><c> computer.</c>

00:02:19.710 --> 00:02:19.720 align:start position:0%
on your computer.
 

00:02:19.720 --> 00:02:21.590 align:start position:0%
on your computer.
Go<00:02:19.840><c> to</c><00:02:19.959><c> claude.com</c><00:02:20.920><c> using</c><00:02:21.160><c> the</c><00:02:21.240><c> link</c><00:02:21.480><c> in</c><00:02:21.560><c> the</c>

00:02:21.590 --> 00:02:21.600 align:start position:0%
Go to claude.com using the link in the
 

00:02:21.600 --> 00:02:24.590 align:start position:0%
Go to claude.com using the link in the
description<00:02:22.040><c> below</c><00:02:22.600><c> and</c><00:02:22.959><c> pick</c><00:02:23.200><c> the</c><00:02:23.320><c> pro</c><00:02:23.560><c> plan.</c>

00:02:24.590 --> 00:02:24.600 align:start position:0%
description below and pick the pro plan.
 

00:02:24.600 --> 00:02:26.310 align:start position:0%
description below and pick the pro plan.
Right<00:02:24.800><c> now,</c><00:02:25.160><c> as</c><00:02:25.400><c> I'm</c><00:02:25.520><c> recording</c><00:02:25.880><c> this,</c><00:02:26.080><c> it's</c>

00:02:26.310 --> 00:02:26.320 align:start position:0%
Right now, as I'm recording this, it's
 

00:02:26.320 --> 00:02:28.390 align:start position:0%
Right now, as I'm recording this, it's
only<00:02:26.520><c> $20</c><00:02:27.280><c> per</c><00:02:27.400><c> month,</c><00:02:27.880><c> and</c><00:02:27.959><c> that's</c><00:02:28.160><c> going</c><00:02:28.320><c> to</c>

00:02:28.390 --> 00:02:28.400 align:start position:0%
only $20 per month, and that's going to
 

00:02:28.400 --> 00:02:31.030 align:start position:0%
only $20 per month, and that's going to
cover<00:02:28.760><c> everything</c><00:02:29.240><c> we</c><00:02:29.320><c> need</c><00:02:29.520><c> for</c><00:02:29.640><c> this</c><00:02:29.800><c> video.</c>

00:02:31.030 --> 00:02:31.040 align:start position:0%
cover everything we need for this video.
 

00:02:31.040 --> 00:02:32.990 align:start position:0%
cover everything we need for this video.
Get<00:02:31.160><c> yourself</c><00:02:31.480><c> signed</c><00:02:31.720><c> up</c><00:02:32.360><c> and</c><00:02:32.600><c> I'll</c><00:02:32.760><c> skip</c>

00:02:32.990 --> 00:02:33.000 align:start position:0%
Get yourself signed up and I'll skip
 

00:02:33.000 --> 00:02:35.150 align:start position:0%
Get yourself signed up and I'll skip
past<00:02:33.240><c> the</c><00:02:33.320><c> boring</c><00:02:33.640><c> stuff.</c>

00:02:35.150 --> 00:02:35.160 align:start position:0%
past the boring stuff.
 

00:02:35.160 --> 00:02:36.910 align:start position:0%
past the boring stuff.
Once<00:02:35.360><c> you're</c><00:02:35.440><c> logged</c><00:02:35.760><c> in,</c><00:02:36.400><c> in</c><00:02:36.520><c> the</c><00:02:36.600><c> bottom</c>

00:02:36.910 --> 00:02:36.920 align:start position:0%
Once you're logged in, in the bottom
 

00:02:36.920 --> 00:02:38.910 align:start position:0%
Once you're logged in, in the bottom
left<00:02:37.160><c> corner</c><00:02:37.400><c> of</c><00:02:37.480><c> the</c><00:02:37.560><c> page,</c><00:02:38.280><c> click</c><00:02:38.800><c> the</c>

00:02:38.910 --> 00:02:38.920 align:start position:0%
left corner of the page, click the
 

00:02:38.920 --> 00:02:40.870 align:start position:0%
left corner of the page, click the
download<00:02:39.480><c> icon.</c>

00:02:40.870 --> 00:02:40.880 align:start position:0%
download icon.
 

00:02:40.880 --> 00:02:43.790 align:start position:0%
download icon.
Navigate<00:02:41.360><c> to</c><00:02:41.440><c> the</c><00:02:41.560><c> Claude</c><00:02:41.880><c> code</c><00:02:42.200><c> section.</c>

00:02:43.790 --> 00:02:43.800 align:start position:0%
Navigate to the Claude code section.
 

00:02:43.800 --> 00:02:46.590 align:start position:0%
Navigate to the Claude code section.
Download<00:02:44.200><c> the</c><00:02:44.280><c> desktop</c><00:02:44.760><c> app</c><00:02:44.959><c> version,</c><00:02:45.680><c> then</c>

00:02:46.590 --> 00:02:46.600 align:start position:0%
Download the desktop app version, then
 

00:02:46.600 --> 00:02:49.030 align:start position:0%
Download the desktop app version, then
open<00:02:46.880><c> the</c><00:02:46.959><c> file</c><00:02:47.280><c> to</c><00:02:47.400><c> run</c><00:02:47.560><c> the</c><00:02:47.640><c> installer.</c>

00:02:49.030 --> 00:02:49.040 align:start position:0%
open the file to run the installer.
 

00:02:49.040 --> 00:02:50.630 align:start position:0%
open the file to run the installer.
Once<00:02:49.240><c> you</c><00:02:49.320><c> get</c><00:02:49.440><c> it</c><00:02:49.560><c> installed,</c><00:02:50.200><c> open</c><00:02:50.560><c> the</c>

00:02:50.630 --> 00:02:50.640 align:start position:0%
Once you get it installed, open the
 

00:02:50.640 --> 00:02:53.790 align:start position:0%
Once you get it installed, open the
desktop<00:02:51.240><c> app,</c><00:02:51.880><c> then</c><00:02:52.520><c> sign</c><00:02:52.840><c> in.</c><00:02:53.440><c> At</c><00:02:53.600><c> this</c>

00:02:53.790 --> 00:02:53.800 align:start position:0%
desktop app, then sign in. At this
 

00:02:53.800 --> 00:02:55.710 align:start position:0%
desktop app, then sign in. At this
point,<00:02:54.160><c> I</c><00:02:54.240><c> need</c><00:02:54.480><c> to</c><00:02:54.560><c> mention,</c><00:02:55.120><c> depending</c><00:02:55.600><c> on</c>

00:02:55.710 --> 00:02:55.720 align:start position:0%
point, I need to mention, depending on
 

00:02:55.720 --> 00:02:57.350 align:start position:0%
point, I need to mention, depending on
when<00:02:55.880><c> you</c><00:02:55.959><c> watch</c><00:02:56.200><c> this</c><00:02:56.320><c> video,</c><00:02:56.720><c> the</c><00:02:56.920><c> actual</c>

00:02:57.350 --> 00:02:57.360 align:start position:0%
when you watch this video, the actual
 

00:02:57.360 --> 00:02:59.190 align:start position:0%
when you watch this video, the actual
software<00:02:57.800><c> interface</c><00:02:58.320><c> might</c><00:02:58.640><c> look</c><00:02:58.840><c> different</c>

00:02:59.190 --> 00:02:59.200 align:start position:0%
software interface might look different
 

00:02:59.200 --> 00:03:01.470 align:start position:0%
software interface might look different
for<00:02:59.320><c> you</c><00:02:59.519><c> than</c><00:02:59.640><c> it</c><00:02:59.760><c> does</c><00:02:59.959><c> for</c><00:03:00.080><c> me</c><00:03:00.239><c> here.</c><00:03:01.160><c> Claude</c>

00:03:01.470 --> 00:03:01.480 align:start position:0%
for you than it does for me here. Claude
 

00:03:01.480 --> 00:03:03.590 align:start position:0%
for you than it does for me here. Claude
gets<00:03:01.720><c> updated</c><00:03:02.160><c> regularly,</c><00:03:02.920><c> so</c><00:03:03.200><c> if</c><00:03:03.360><c> things</c>

00:03:03.590 --> 00:03:03.600 align:start position:0%
gets updated regularly, so if things
 

00:03:03.600 --> 00:03:05.830 align:start position:0%
gets updated regularly, so if things
don't<00:03:03.760><c> look</c><00:03:03.920><c> the</c><00:03:04.040><c> exact</c><00:03:04.440><c> same,</c><00:03:04.920><c> don't</c><00:03:05.160><c> panic.</c>

00:03:05.830 --> 00:03:05.840 align:start position:0%
don't look the exact same, don't panic.
 

00:03:05.840 --> 00:03:07.030 align:start position:0%
don't look the exact same, don't panic.
Just<00:03:06.040><c> try</c><00:03:06.160><c> to</c><00:03:06.280><c> understand</c><00:03:06.720><c> the</c><00:03:06.800><c> general</c>

00:03:07.030 --> 00:03:07.040 align:start position:0%
Just try to understand the general
 

00:03:07.040 --> 00:03:08.630 align:start position:0%
Just try to understand the general
concepts<00:03:07.519><c> I'm</c><00:03:07.600><c> explaining</c><00:03:08.120><c> and</c><00:03:08.239><c> apply</c><00:03:08.519><c> them</c>

00:03:08.630 --> 00:03:08.640 align:start position:0%
concepts I'm explaining and apply them
 

00:03:08.640 --> 00:03:10.030 align:start position:0%
concepts I'm explaining and apply them
to<00:03:08.760><c> how</c><00:03:08.880><c> the</c><00:03:09.000><c> software</c><00:03:09.360><c> looks</c><00:03:09.640><c> when</c><00:03:09.840><c> you're</c>

00:03:10.030 --> 00:03:10.040 align:start position:0%
to how the software looks when you're
 

00:03:10.040 --> 00:03:12.270 align:start position:0%
to how the software looks when you're
using<00:03:10.400><c> it.</c><00:03:10.800><c> When</c><00:03:10.920><c> you</c><00:03:11.000><c> get</c><00:03:11.160><c> signed</c><00:03:11.519><c> in,</c><00:03:11.840><c> switch</c>

00:03:12.270 --> 00:03:12.280 align:start position:0%
using it. When you get signed in, switch
 

00:03:12.280 --> 00:03:14.949 align:start position:0%
using it. When you get signed in, switch
from<00:03:12.519><c> chat</c><00:03:12.880><c> mode</c><00:03:13.480><c> to</c><00:03:13.640><c> code</c><00:03:14.040><c> mode.</c>

00:03:14.949 --> 00:03:14.959 align:start position:0%
from chat mode to code mode.
 

00:03:14.959 --> 00:03:17.150 align:start position:0%
from chat mode to code mode.
In<00:03:15.040><c> my</c><00:03:15.239><c> app,</c><00:03:15.720><c> that</c><00:03:15.959><c> tab</c><00:03:16.320><c> is</c><00:03:16.440><c> available</c><00:03:16.880><c> in</c><00:03:17.000><c> the</c>

00:03:17.150 --> 00:03:17.160 align:start position:0%
In my app, that tab is available in the
 

00:03:17.160 --> 00:03:19.750 align:start position:0%
In my app, that tab is available in the
upper<00:03:17.400><c> left.</c><00:03:18.519><c> Alternatively,</c><00:03:19.239><c> you</c><00:03:19.360><c> can</c><00:03:19.480><c> also</c>

00:03:19.750 --> 00:03:19.760 align:start position:0%
upper left. Alternatively, you can also
 

00:03:19.760 --> 00:03:21.830 align:start position:0%
upper left. Alternatively, you can also
press<00:03:20.080><c> command</c><00:03:20.600><c> three</c><00:03:20.959><c> on</c><00:03:21.120><c> your</c><00:03:21.239><c> keyboard</c><00:03:21.720><c> on</c>

00:03:21.830 --> 00:03:21.840 align:start position:0%
press command three on your keyboard on
 

00:03:21.840 --> 00:03:25.070 align:start position:0%
press command three on your keyboard on
a<00:03:21.880><c> Mac</c><00:03:22.519><c> or</c><00:03:22.800><c> control</c><00:03:23.600><c> three</c><00:03:24.000><c> on</c><00:03:24.239><c> Windows</c><00:03:25.000><c> to</c>

00:03:25.070 --> 00:03:25.080 align:start position:0%
a Mac or control three on Windows to
 

00:03:25.080 --> 00:03:26.990 align:start position:0%
a Mac or control three on Windows to
switch<00:03:25.320><c> to</c><00:03:25.400><c> code</c><00:03:25.640><c> mode.</c><00:03:26.200><c> Claude</c><00:03:26.519><c> code</c><00:03:26.760><c> works</c>

00:03:26.990 --> 00:03:27.000 align:start position:0%
switch to code mode. Claude code works
 

00:03:27.000 --> 00:03:29.110 align:start position:0%
switch to code mode. Claude code works
best<00:03:27.239><c> when</c><00:03:27.360><c> it</c><00:03:27.480><c> has</c><00:03:27.720><c> its</c><00:03:28.000><c> own</c><00:03:28.280><c> folder</c><00:03:28.680><c> to</c><00:03:28.840><c> live</c>

00:03:29.110 --> 00:03:29.120 align:start position:0%
best when it has its own folder to live
 

00:03:29.120 --> 00:03:30.030 align:start position:0%
best when it has its own folder to live
in.

00:03:30.030 --> 00:03:30.040 align:start position:0%
in.
 

00:03:30.040 --> 00:03:32.070 align:start position:0%
in.
Create<00:03:30.400><c> one</c><00:03:30.720><c> anywhere</c><00:03:31.080><c> on</c><00:03:31.160><c> your</c><00:03:31.280><c> computer,</c>

00:03:32.070 --> 00:03:32.080 align:start position:0%
Create one anywhere on your computer,
 

00:03:32.080 --> 00:03:33.990 align:start position:0%
Create one anywhere on your computer,
then<00:03:32.360><c> click</c><00:03:32.680><c> the</c><00:03:32.800><c> folder</c><00:03:33.160><c> select</c><00:03:33.560><c> button</c><00:03:33.880><c> near</c>

00:03:33.990 --> 00:03:34.000 align:start position:0%
then click the folder select button near
 

00:03:34.000 --> 00:03:35.430 align:start position:0%
then click the folder select button near
the<00:03:34.120><c> chat</c><00:03:34.400><c> box,</c>

00:03:35.430 --> 00:03:35.440 align:start position:0%
the chat box,
 

00:03:35.440 --> 00:03:37.270 align:start position:0%
the chat box,
and<00:03:35.560><c> select</c><00:03:35.920><c> your</c><00:03:36.040><c> new</c><00:03:36.239><c> folder</c><00:03:36.640><c> to</c><00:03:36.840><c> open</c><00:03:37.120><c> it</c>

00:03:37.270 --> 00:03:37.280 align:start position:0%
and select your new folder to open it
 

00:03:37.280 --> 00:03:39.070 align:start position:0%
and select your new folder to open it
inside<00:03:37.720><c> the</c><00:03:37.880><c> app.</c>

00:03:39.070 --> 00:03:39.080 align:start position:0%
inside the app.
 

00:03:39.080 --> 00:03:40.509 align:start position:0%
inside the app.
That<00:03:39.320><c> folder</c><00:03:39.680><c> is</c><00:03:39.800><c> going</c><00:03:40.040><c> to</c><00:03:40.120><c> be</c><00:03:40.239><c> your</c>

00:03:40.509 --> 00:03:40.519 align:start position:0%
That folder is going to be your
 

00:03:40.519 --> 00:03:42.990 align:start position:0%
That folder is going to be your
workspace<00:03:41.120><c> for</c><00:03:41.320><c> this</c><00:03:41.480><c> project</c><00:03:41.959><c> from</c><00:03:42.120><c> now</c><00:03:42.360><c> on.</c>

00:03:42.990 --> 00:03:43.000 align:start position:0%
workspace for this project from now on.
 

00:03:43.000 --> 00:03:44.870 align:start position:0%
workspace for this project from now on.
All<00:03:43.080><c> right,</c><00:03:43.440><c> that's</c><00:03:43.640><c> the</c><00:03:43.760><c> setup</c><00:03:44.239><c> done.</c><00:03:44.680><c> Now</c>

00:03:44.870 --> 00:03:44.880 align:start position:0%
All right, that's the setup done. Now
 

00:03:44.880 --> 00:03:46.670 align:start position:0%
All right, that's the setup done. Now
we're<00:03:45.000><c> going</c><00:03:45.200><c> to</c><00:03:45.320><c> level</c><00:03:45.600><c> Claude</c><00:03:46.000><c> up</c><00:03:46.519><c> by</c>

00:03:46.670 --> 00:03:46.680 align:start position:0%
we're going to level Claude up by
 

00:03:46.680 --> 00:03:49.390 align:start position:0%
we're going to level Claude up by
installing<00:03:47.320><c> two</c><00:03:47.600><c> skills.</c>

00:03:49.390 --> 00:03:49.400 align:start position:0%
installing two skills.
 

00:03:49.400 --> 00:03:50.870 align:start position:0%
installing two skills.
Out<00:03:49.560><c> of</c><00:03:49.640><c> the</c><00:03:49.720><c> box,</c><00:03:50.120><c> Claude</c><00:03:50.600><c> is</c><00:03:50.760><c> a</c>

00:03:50.870 --> 00:03:50.880 align:start position:0%
Out of the box, Claude is a
 

00:03:50.880 --> 00:03:54.030 align:start position:0%
Out of the box, Claude is a
general-purpose<00:03:51.880><c> AI.</c><00:03:52.680><c> It</c><00:03:52.920><c> knows</c><00:03:53.240><c> a</c><00:03:53.320><c> lot</c><00:03:53.720><c> about</c>

00:03:54.030 --> 00:03:54.040 align:start position:0%
general-purpose AI. It knows a lot about
 

00:03:54.040 --> 00:03:56.670 align:start position:0%
general-purpose AI. It knows a lot about
a<00:03:54.080><c> lot</c><00:03:54.280><c> of</c><00:03:54.400><c> things,</c><00:03:55.280><c> but</c><00:03:55.600><c> its</c><00:03:55.800><c> default</c><00:03:56.200><c> design</c>

00:03:56.670 --> 00:03:56.680 align:start position:0%
a lot of things, but its default design
 

00:03:56.680 --> 00:03:58.990 align:start position:0%
a lot of things, but its default design
output<00:03:57.280><c> is</c><00:03:57.400><c> just</c><00:03:57.880><c> okay.</c>

00:03:58.990 --> 00:03:59.000 align:start position:0%
output is just okay.
 

00:03:59.000 --> 00:04:00.830 align:start position:0%
output is just okay.
It<00:03:59.080><c> tends</c><00:03:59.320><c> to</c><00:03:59.440><c> reach</c><00:03:59.640><c> for</c><00:03:59.720><c> the</c><00:03:59.800><c> same</c><00:04:00.160><c> fonts,</c>

00:04:00.830 --> 00:04:00.840 align:start position:0%
It tends to reach for the same fonts,
 

00:04:00.840 --> 00:04:02.350 align:start position:0%
It tends to reach for the same fonts,
the<00:04:00.960><c> same</c><00:04:01.200><c> colors,</c><00:04:01.840><c> and</c><00:04:02.000><c> the</c><00:04:02.080><c> same</c>

00:04:02.350 --> 00:04:02.360 align:start position:0%
the same colors, and the same
 

00:04:02.360 --> 00:04:04.430 align:start position:0%
the same colors, and the same
predictable<00:04:02.880><c> layouts</c><00:04:03.320><c> you've</c><00:04:03.440><c> seen</c><00:04:03.720><c> on</c><00:04:04.040><c> every</c>

00:04:04.430 --> 00:04:04.440 align:start position:0%
predictable layouts you've seen on every
 

00:04:04.440 --> 00:04:06.790 align:start position:0%
predictable layouts you've seen on every
other<00:04:04.840><c> AI-generated</c><00:04:05.600><c> website.</c>

00:04:06.790 --> 00:04:06.800 align:start position:0%
other AI-generated website.
 

00:04:06.800 --> 00:04:08.790 align:start position:0%
other AI-generated website.
This<00:04:06.959><c> is</c><00:04:07.080><c> why</c><00:04:07.240><c> a</c><00:04:07.320><c> lot</c><00:04:07.600><c> of</c><00:04:07.720><c> AI</c><00:04:07.920><c> websites</c><00:04:08.440><c> end</c><00:04:08.640><c> up</c>

00:04:08.790 --> 00:04:08.800 align:start position:0%
This is why a lot of AI websites end up
 

00:04:08.800 --> 00:04:11.910 align:start position:0%
This is why a lot of AI websites end up
looking<00:04:09.080><c> generic.</c><00:04:09.959><c> Skills</c><00:04:10.640><c> fix</c><00:04:10.959><c> that.</c><00:04:11.840><c> A</c>

00:04:11.910 --> 00:04:11.920 align:start position:0%
looking generic. Skills fix that. A
 

00:04:11.920 --> 00:04:13.870 align:start position:0%
looking generic. Skills fix that. A
skill<00:04:12.320><c> is</c><00:04:12.480><c> like</c><00:04:12.640><c> an</c><00:04:12.720><c> instruction</c><00:04:13.280><c> manual</c><00:04:13.720><c> for</c>

00:04:13.870 --> 00:04:13.880 align:start position:0%
skill is like an instruction manual for
 

00:04:13.880 --> 00:04:15.790 align:start position:0%
skill is like an instruction manual for
Claude,<00:04:14.440><c> a</c><00:04:14.560><c> text</c><00:04:14.920><c> file</c><00:04:15.200><c> that</c><00:04:15.400><c> levels</c><00:04:15.680><c> up</c>

00:04:15.790 --> 00:04:15.800 align:start position:0%
Claude, a text file that levels up
 

00:04:15.800 --> 00:04:18.270 align:start position:0%
Claude, a text file that levels up
Claude's<00:04:16.200><c> knowledge</c><00:04:16.640><c> in</c><00:04:16.880><c> one</c><00:04:17.160><c> specific</c><00:04:17.680><c> area.</c>

00:04:18.270 --> 00:04:18.280 align:start position:0%
Claude's knowledge in one specific area.
 

00:04:18.280 --> 00:04:20.949 align:start position:0%
Claude's knowledge in one specific area.
You<00:04:18.440><c> install</c><00:04:18.760><c> it</c><00:04:18.959><c> once,</c><00:04:19.799><c> and</c><00:04:20.040><c> Claude</c><00:04:20.440><c> uses</c><00:04:20.799><c> it</c>

00:04:20.949 --> 00:04:20.959 align:start position:0%
You install it once, and Claude uses it
 

00:04:20.959 --> 00:04:22.990 align:start position:0%
You install it once, and Claude uses it
forever.<00:04:21.720><c> We're</c><00:04:21.920><c> installing</c><00:04:22.400><c> two</c><00:04:22.640><c> skills</c>

00:04:22.990 --> 00:04:23.000 align:start position:0%
forever. We're installing two skills
 

00:04:23.000 --> 00:04:25.190 align:start position:0%
forever. We're installing two skills
today,<00:04:23.400><c> and</c><00:04:23.600><c> both</c><00:04:23.840><c> of</c><00:04:23.919><c> them</c><00:04:24.080><c> are</c><00:04:24.200><c> free.</c><00:04:25.120><c> The</c>

00:04:25.190 --> 00:04:25.200 align:start position:0%
today, and both of them are free. The
 

00:04:25.200 --> 00:04:26.710 align:start position:0%
today, and both of them are free. The
first<00:04:25.560><c> skill</c><00:04:25.800><c> we're</c><00:04:25.919><c> installing</c><00:04:26.360><c> is</c><00:04:26.440><c> called</c>

00:04:26.710 --> 00:04:26.720 align:start position:0%
first skill we're installing is called
 

00:04:26.720 --> 00:04:28.950 align:start position:0%
first skill we're installing is called
front-end<00:04:27.360><c> design.</c><00:04:28.160><c> It's</c><00:04:28.400><c> built</c><00:04:28.680><c> by</c>

00:04:28.950 --> 00:04:28.960 align:start position:0%
front-end design. It's built by
 

00:04:28.960 --> 00:04:31.510 align:start position:0%
front-end design. It's built by
Anthropic,<00:04:29.760><c> the</c><00:04:29.880><c> company</c><00:04:30.240><c> behind</c><00:04:30.680><c> Claude.</c><00:04:31.320><c> It</c>

00:04:31.510 --> 00:04:31.520 align:start position:0%
Anthropic, the company behind Claude. It
 

00:04:31.520 --> 00:04:33.430 align:start position:0%
Anthropic, the company behind Claude. It
runs<00:04:31.760><c> in</c><00:04:31.800><c> the</c><00:04:31.919><c> background,</c><00:04:32.600><c> and</c><00:04:32.840><c> it</c><00:04:32.960><c> quietly</c>

00:04:33.430 --> 00:04:33.440 align:start position:0%
runs in the background, and it quietly
 

00:04:33.440 --> 00:04:35.750 align:start position:0%
runs in the background, and it quietly
makes<00:04:33.680><c> Claude</c><00:04:34.040><c> smarter</c><00:04:34.480><c> at</c><00:04:34.600><c> design.</c>

00:04:35.750 --> 00:04:35.760 align:start position:0%
makes Claude smarter at design.
 

00:04:35.760 --> 00:04:38.110 align:start position:0%
makes Claude smarter at design.
What<00:04:35.840><c> it</c><00:04:36.000><c> actually</c><00:04:36.400><c> does</c><00:04:36.800><c> is</c><00:04:37.080><c> ban</c><00:04:37.640><c> the</c><00:04:37.760><c> most</c>

00:04:38.110 --> 00:04:38.120 align:start position:0%
What it actually does is ban the most
 

00:04:38.120 --> 00:04:40.190 align:start position:0%
What it actually does is ban the most
overused<00:04:38.680><c> fonts</c><00:04:39.080><c> on</c><00:04:39.240><c> the</c><00:04:39.360><c> internet</c><00:04:39.800><c> and</c><00:04:39.960><c> push</c>

00:04:40.190 --> 00:04:40.200 align:start position:0%
overused fonts on the internet and push
 

00:04:40.200 --> 00:04:42.790 align:start position:0%
overused fonts on the internet and push
Claude<00:04:40.600><c> toward</c><00:04:41.080><c> bold</c><00:04:41.600><c> design</c><00:04:42.080><c> direction</c>

00:04:42.790 --> 00:04:42.800 align:start position:0%
Claude toward bold design direction
 

00:04:42.800 --> 00:04:45.350 align:start position:0%
Claude toward bold design direction
instead<00:04:43.240><c> of</c><00:04:43.320><c> generic</c><00:04:43.840><c> AI</c><00:04:44.120><c> output.</c><00:04:44.840><c> To</c><00:04:44.960><c> install</c>

00:04:45.350 --> 00:04:45.360 align:start position:0%
instead of generic AI output. To install
 

00:04:45.360 --> 00:04:47.710 align:start position:0%
instead of generic AI output. To install
it,<00:04:45.760><c> grab</c><00:04:46.080><c> the</c><00:04:46.200><c> front-end</c><00:04:46.840><c> design</c><00:04:47.280><c> link</c><00:04:47.560><c> from</c>

00:04:47.710 --> 00:04:47.720 align:start position:0%
it, grab the front-end design link from
 

00:04:47.720 --> 00:04:49.790 align:start position:0%
it, grab the front-end design link from
the<00:04:47.760><c> description</c><00:04:48.320><c> below</c><00:04:48.800><c> and</c><00:04:49.000><c> paste</c><00:04:49.360><c> it</c><00:04:49.520><c> into</c>

00:04:49.790 --> 00:04:49.800 align:start position:0%
the description below and paste it into
 

00:04:49.800 --> 00:04:52.510 align:start position:0%
the description below and paste it into
Claude<00:04:50.240><c> code</c><00:04:50.720><c> with</c><00:04:50.880><c> the</c><00:04:51.000><c> message</c><00:04:52.000><c> install</c>

00:04:52.510 --> 00:04:52.520 align:start position:0%
Claude code with the message install
 

00:04:52.520 --> 00:04:54.070 align:start position:0%
Claude code with the message install
this<00:04:52.840><c> skill.</c>

00:04:54.070 --> 00:04:54.080 align:start position:0%
this skill.
 

00:04:54.080 --> 00:04:56.909 align:start position:0%
this skill.
Then,<00:04:54.760><c> send</c><00:04:54.919><c> the</c><00:04:55.000><c> message</c><00:04:55.480><c> and</c><00:04:55.640><c> let</c><00:04:55.760><c> it</c><00:04:55.880><c> run.</c>

00:04:56.909 --> 00:04:56.919 align:start position:0%
Then, send the message and let it run.
 

00:04:56.919 --> 00:04:59.030 align:start position:0%
Then, send the message and let it run.
Allow<00:04:57.200><c> the</c><00:04:57.360><c> edits</c><00:04:57.680><c> when</c><00:04:57.800><c> it</c><00:04:57.960><c> asks,</c>

00:04:59.030 --> 00:04:59.040 align:start position:0%
Allow the edits when it asks,
 

00:04:59.040 --> 00:05:00.950 align:start position:0%
Allow the edits when it asks,
and<00:04:59.320><c> install</c><00:04:59.680><c> it</c><00:04:59.800><c> globally.</c>

00:05:00.950 --> 00:05:00.960 align:start position:0%
and install it globally.
 

00:05:00.960 --> 00:05:03.270 align:start position:0%
and install it globally.
The<00:05:01.000><c> second</c><00:05:01.360><c> skill</c><00:05:01.760><c> is</c><00:05:01.960><c> community-built.</c>

00:05:03.270 --> 00:05:03.280 align:start position:0%
The second skill is community-built.
 

00:05:03.280 --> 00:05:07.070 align:start position:0%
The second skill is community-built.
It's<00:05:03.440><c> called</c><00:05:03.960><c> UI</c><00:05:04.680><c> UX</c><00:05:05.320><c> Pro</c><00:05:05.720><c> Max.</c>

00:05:07.070 --> 00:05:07.080 align:start position:0%
It's called UI UX Pro Max.
 

00:05:07.080 --> 00:05:09.070 align:start position:0%
It's called UI UX Pro Max.
As<00:05:07.240><c> you</c><00:05:07.320><c> can</c><00:05:07.480><c> see</c><00:05:07.680><c> on</c><00:05:07.840><c> screen,</c><00:05:08.320><c> it</c><00:05:08.520><c> ships</c><00:05:08.840><c> with</c>

00:05:09.070 --> 00:05:09.080 align:start position:0%
As you can see on screen, it ships with
 

00:05:09.080 --> 00:05:13.590 align:start position:0%
As you can see on screen, it ships with
57<00:05:09.760><c> UI</c><00:05:10.080><c> styles,</c><00:05:10.800><c> 95</c><00:05:11.840><c> color</c><00:05:12.160><c> palettes,</c><00:05:12.680><c> and</c><00:05:12.919><c> 56</c>

00:05:13.590 --> 00:05:13.600 align:start position:0%
57 UI styles, 95 color palettes, and 56
 

00:05:13.600 --> 00:05:15.070 align:start position:0%
57 UI styles, 95 color palettes, and 56
font<00:05:13.919><c> pairings.</c>

00:05:15.070 --> 00:05:15.080 align:start position:0%
font pairings.
 

00:05:15.080 --> 00:05:17.350 align:start position:0%
font pairings.
Unlike<00:05:15.480><c> the</c><00:05:15.600><c> first</c><00:05:15.960><c> skill,</c><00:05:16.560><c> this</c><00:05:16.760><c> one</c><00:05:16.960><c> we</c><00:05:17.080><c> call</c>

00:05:17.350 --> 00:05:17.360 align:start position:0%
Unlike the first skill, this one we call
 

00:05:17.360 --> 00:05:19.870 align:start position:0%
Unlike the first skill, this one we call
directly<00:05:18.120><c> when</c><00:05:18.320><c> we</c><00:05:18.440><c> want</c><00:05:18.760><c> a</c><00:05:18.880><c> big</c><00:05:19.360><c> design</c>

00:05:19.870 --> 00:05:19.880 align:start position:0%
directly when we want a big design
 

00:05:19.880 --> 00:05:21.950 align:start position:0%
directly when we want a big design
intervention.<00:05:21.160><c> And</c><00:05:21.320><c> that's</c><00:05:21.480><c> exactly</c><00:05:21.840><c> how</c>

00:05:21.950 --> 00:05:21.960 align:start position:0%
intervention. And that's exactly how
 

00:05:21.960 --> 00:05:23.750 align:start position:0%
intervention. And that's exactly how
we're<00:05:22.080><c> going</c><00:05:22.240><c> to</c><00:05:22.360><c> build</c><00:05:22.560><c> our</c><00:05:22.680><c> site</c><00:05:22.919><c> today.</c><00:05:23.640><c> To</c>

00:05:23.750 --> 00:05:23.760 align:start position:0%
we're going to build our site today. To
 

00:05:23.760 --> 00:05:26.830 align:start position:0%
we're going to build our site today. To
install<00:05:24.160><c> it,</c><00:05:24.400><c> grab</c><00:05:24.760><c> the</c><00:05:24.919><c> UI</c><00:05:25.400><c> UX</c><00:05:25.919><c> Pro</c><00:05:26.160><c> Max</c><00:05:26.520><c> link</c>

00:05:26.830 --> 00:05:26.840 align:start position:0%
install it, grab the UI UX Pro Max link
 

00:05:26.840 --> 00:05:28.950 align:start position:0%
install it, grab the UI UX Pro Max link
from<00:05:27.000><c> the</c><00:05:27.080><c> description</c><00:05:27.600><c> below</c><00:05:28.360><c> and</c><00:05:28.560><c> paste</c><00:05:28.840><c> it</c>

00:05:28.950 --> 00:05:28.960 align:start position:0%
from the description below and paste it
 

00:05:28.960 --> 00:05:31.070 align:start position:0%
from the description below and paste it
into<00:05:29.200><c> Claude</c><00:05:29.520><c> code</c><00:05:29.840><c> with</c><00:05:30.000><c> the</c><00:05:30.080><c> message</c>

00:05:31.070 --> 00:05:31.080 align:start position:0%
into Claude code with the message
 

00:05:31.080 --> 00:05:34.510 align:start position:0%
into Claude code with the message
install<00:05:31.560><c> this</c><00:05:31.760><c> plugin</c><00:05:32.360><c> using</c><00:05:32.840><c> npm.</c>

00:05:34.510 --> 00:05:34.520 align:start position:0%
install this plugin using npm.
 

00:05:34.520 --> 00:05:36.150 align:start position:0%
install this plugin using npm.
That<00:05:34.680><c> exact</c><00:05:35.040><c> phrasing</c><00:05:35.360><c> matters</c><00:05:35.720><c> because</c><00:05:36.000><c> it's</c>

00:05:36.150 --> 00:05:36.160 align:start position:0%
That exact phrasing matters because it's
 

00:05:36.160 --> 00:05:38.390 align:start position:0%
That exact phrasing matters because it's
what<00:05:36.400><c> gets</c><00:05:36.640><c> it</c><00:05:36.760><c> to</c><00:05:36.880><c> install</c><00:05:37.320><c> cleanly</c><00:05:38.040><c> using</c>

00:05:38.390 --> 00:05:38.400 align:start position:0%
what gets it to install cleanly using
 

00:05:38.400 --> 00:05:39.670 align:start position:0%
what gets it to install cleanly using
the<00:05:38.520><c> terminal.</c>

00:05:39.670 --> 00:05:39.680 align:start position:0%
the terminal.
 

00:05:39.680 --> 00:05:41.790 align:start position:0%
the terminal.
Allow<00:05:39.919><c> the</c><00:05:40.080><c> edits</c><00:05:40.400><c> when</c><00:05:40.520><c> it</c><00:05:40.720><c> asks,</c>

00:05:41.790 --> 00:05:41.800 align:start position:0%
Allow the edits when it asks,
 

00:05:41.800 --> 00:05:43.630 align:start position:0%
Allow the edits when it asks,
and<00:05:42.040><c> install</c><00:05:42.400><c> it</c><00:05:42.520><c> globally.</c>

00:05:43.630 --> 00:05:43.640 align:start position:0%
and install it globally.
 

00:05:43.640 --> 00:05:45.390 align:start position:0%
and install it globally.
Now,<00:05:43.840><c> there's</c><00:05:44.040><c> one</c><00:05:44.280><c> last</c><00:05:44.600><c> setup</c><00:05:44.880><c> move</c><00:05:45.120><c> before</c>

00:05:45.390 --> 00:05:45.400 align:start position:0%
Now, there's one last setup move before
 

00:05:45.400 --> 00:05:46.950 align:start position:0%
Now, there's one last setup move before
we<00:05:45.520><c> start</c><00:05:45.760><c> building.</c>

00:05:46.950 --> 00:05:46.960 align:start position:0%
we start building.
 

00:05:46.960 --> 00:05:48.790 align:start position:0%
we start building.
Click<00:05:47.200><c> the</c><00:05:47.320><c> mode</c><00:05:47.680><c> selector</c><00:05:48.200><c> in</c><00:05:48.320><c> the</c><00:05:48.440><c> bottom</c>

00:05:48.790 --> 00:05:48.800 align:start position:0%
Click the mode selector in the bottom
 

00:05:48.800 --> 00:05:50.470 align:start position:0%
Click the mode selector in the bottom
left<00:05:49.120><c> under</c><00:05:49.280><c> your</c><00:05:49.440><c> chat</c>

00:05:50.470 --> 00:05:50.480 align:start position:0%
left under your chat
 

00:05:50.480 --> 00:05:52.990 align:start position:0%
left under your chat
and<00:05:50.640><c> switch</c><00:05:51.000><c> it</c><00:05:51.160><c> to</c><00:05:51.360><c> auto</c><00:05:51.680><c> mode.</c><00:05:52.520><c> This</c><00:05:52.760><c> lets</c>

00:05:52.990 --> 00:05:53.000 align:start position:0%
and switch it to auto mode. This lets
 

00:05:53.000 --> 00:05:55.150 align:start position:0%
and switch it to auto mode. This lets
Claude<00:05:53.480><c> work</c><00:05:53.760><c> without</c><00:05:54.160><c> stopping</c><00:05:54.600><c> to</c><00:05:54.720><c> ask</c><00:05:55.000><c> for</c>

00:05:55.150 --> 00:05:55.160 align:start position:0%
Claude work without stopping to ask for
 

00:05:55.160 --> 00:05:57.390 align:start position:0%
Claude work without stopping to ask for
permission<00:05:55.760><c> at</c><00:05:55.920><c> every</c><00:05:56.120><c> step.</c><00:05:56.720><c> With</c><00:05:56.960><c> auto</c><00:05:57.160><c> mode</c>

00:05:57.390 --> 00:05:57.400 align:start position:0%
permission at every step. With auto mode
 

00:05:57.400 --> 00:05:59.630 align:start position:0%
permission at every step. With auto mode
on<00:05:57.760><c> and</c><00:05:58.000><c> both</c><00:05:58.360><c> skills</c><00:05:58.760><c> installed,</c><00:05:59.440><c> we're</c>

00:05:59.630 --> 00:05:59.640 align:start position:0%
on and both skills installed, we're
 

00:05:59.640 --> 00:06:01.550 align:start position:0%
on and both skills installed, we're
ready<00:05:59.920><c> to</c><00:06:00.040><c> write</c><00:06:00.240><c> the</c><00:06:00.360><c> prompt</c><00:06:00.800><c> that</c><00:06:01.080><c> builds</c>

00:06:01.550 --> 00:06:01.560 align:start position:0%
ready to write the prompt that builds
 

00:06:01.560 --> 00:06:03.870 align:start position:0%
ready to write the prompt that builds
the<00:06:01.720><c> site.</c><00:06:02.440><c> But,</c><00:06:02.760><c> there's</c><00:06:03.040><c> one</c><00:06:03.360><c> more</c><00:06:03.560><c> thing</c>

00:06:03.870 --> 00:06:03.880 align:start position:0%
the site. But, there's one more thing
 

00:06:03.880 --> 00:06:06.990 align:start position:0%
the site. But, there's one more thing
worth<00:06:04.160><c> talking</c><00:06:04.560><c> about</c><00:06:05.120><c> first.</c>

00:06:06.990 --> 00:06:07.000 align:start position:0%
worth talking about first.
 

00:06:07.000 --> 00:06:08.670 align:start position:0%
worth talking about first.
The<00:06:07.160><c> other</c><00:06:07.400><c> big</c><00:06:07.680><c> thing</c><00:06:07.920><c> that</c><00:06:08.080><c> separates</c><00:06:08.600><c> a</c>

00:06:08.670 --> 00:06:08.680 align:start position:0%
The other big thing that separates a
 

00:06:08.680 --> 00:06:10.910 align:start position:0%
The other big thing that separates a
great<00:06:09.080><c> result</c><00:06:09.440><c> from</c><00:06:09.640><c> a</c><00:06:09.680><c> mediocre</c><00:06:10.280><c> one</c><00:06:10.560><c> is</c><00:06:10.800><c> the</c>

00:06:10.910 --> 00:06:10.920 align:start position:0%
great result from a mediocre one is the
 

00:06:10.920 --> 00:06:13.470 align:start position:0%
great result from a mediocre one is the
brief<00:06:11.360><c> you</c><00:06:11.520><c> give</c><00:06:11.880><c> Claude.</c><00:06:12.680><c> The</c><00:06:12.760><c> more</c><00:06:12.960><c> specific</c>

00:06:13.470 --> 00:06:13.480 align:start position:0%
brief you give Claude. The more specific
 

00:06:13.480 --> 00:06:15.470 align:start position:0%
brief you give Claude. The more specific
you<00:06:13.600><c> are,</c><00:06:13.880><c> the</c><00:06:14.000><c> better</c><00:06:14.200><c> the</c><00:06:14.280><c> result.</c><00:06:15.160><c> If</c><00:06:15.320><c> you</c>

00:06:15.470 --> 00:06:15.480 align:start position:0%
you are, the better the result. If you
 

00:06:15.480 --> 00:06:17.430 align:start position:0%
you are, the better the result. If you
already<00:06:15.760><c> know</c><00:06:15.920><c> exactly</c><00:06:16.320><c> what</c><00:06:16.480><c> you</c><00:06:16.600><c> want,</c><00:06:17.240><c> just</c>

00:06:17.430 --> 00:06:17.440 align:start position:0%
already know exactly what you want, just
 

00:06:17.440 --> 00:06:19.750 align:start position:0%
already know exactly what you want, just
describe<00:06:17.919><c> it.</c><00:06:18.360><c> And</c><00:06:18.640><c> that's</c><00:06:18.960><c> what</c><00:06:19.200><c> I</c><00:06:19.320><c> did</c><00:06:19.600><c> for</c>

00:06:19.750 --> 00:06:19.760 align:start position:0%
describe it. And that's what I did for
 

00:06:19.760 --> 00:06:22.630 align:start position:0%
describe it. And that's what I did for
this<00:06:20.000><c> build.</c><00:06:20.760><c> But,</c><00:06:21.040><c> describing</c><00:06:21.760><c> visual</c><00:06:22.200><c> taste</c>

00:06:22.630 --> 00:06:22.640 align:start position:0%
this build. But, describing visual taste
 

00:06:22.640 --> 00:06:25.190 align:start position:0%
this build. But, describing visual taste
in<00:06:22.880><c> words</c><00:06:23.320><c> is</c><00:06:23.560><c> hard,</c><00:06:24.280><c> especially</c><00:06:24.880><c> if</c><00:06:25.040><c> you're</c>

00:06:25.190 --> 00:06:25.200 align:start position:0%
in words is hard, especially if you're
 

00:06:25.200 --> 00:06:27.350 align:start position:0%
in words is hard, especially if you're
newer<00:06:25.640><c> to</c><00:06:25.800><c> design.</c><00:06:26.680><c> You</c><00:06:26.800><c> don't</c><00:06:27.000><c> speak</c><00:06:27.280><c> the</c>

00:06:27.350 --> 00:06:27.360 align:start position:0%
newer to design. You don't speak the
 

00:06:27.360 --> 00:06:29.590 align:start position:0%
newer to design. You don't speak the
design<00:06:27.880><c> language</c><00:06:28.360><c> yet,</c><00:06:28.919><c> and</c><00:06:29.080><c> that</c><00:06:29.240><c> makes</c><00:06:29.440><c> it</c>

00:06:29.590 --> 00:06:29.600 align:start position:0%
design language yet, and that makes it
 

00:06:29.600 --> 00:06:32.110 align:start position:0%
design language yet, and that makes it
tough<00:06:29.840><c> to</c><00:06:29.960><c> tell</c><00:06:30.200><c> Claude</c><00:06:30.560><c> what</c><00:06:30.720><c> you</c><00:06:30.880><c> want.</c>

00:06:32.110 --> 00:06:32.120 align:start position:0%
tough to tell Claude what you want.
 

00:06:32.120 --> 00:06:34.430 align:start position:0%
tough to tell Claude what you want.
If<00:06:32.240><c> you're</c><00:06:32.360><c> in</c><00:06:32.480><c> that</c><00:06:32.720><c> spot,</c><00:06:33.480><c> references</c><00:06:34.280><c> are</c>

00:06:34.430 --> 00:06:34.440 align:start position:0%
If you're in that spot, references are
 

00:06:34.440 --> 00:06:36.550 align:start position:0%
If you're in that spot, references are
your<00:06:34.600><c> shortcut.</c><00:06:35.600><c> References</c><00:06:36.200><c> are</c><00:06:36.320><c> just</c>

00:06:36.550 --> 00:06:36.560 align:start position:0%
your shortcut. References are just
 

00:06:36.560 --> 00:06:38.990 align:start position:0%
your shortcut. References are just
screenshots<00:06:37.400><c> of</c><00:06:37.800><c> sites</c><00:06:38.160><c> you</c><00:06:38.240><c> like</c><00:06:38.760><c> that</c><00:06:38.880><c> you</c>

00:06:38.990 --> 00:06:39.000 align:start position:0%
screenshots of sites you like that you
 

00:06:39.000 --> 00:06:40.470 align:start position:0%
screenshots of sites you like that you
give<00:06:39.160><c> to</c><00:06:39.280><c> Claude</c><00:06:39.720><c> so</c><00:06:39.880><c> it</c><00:06:39.960><c> can</c><00:06:40.080><c> match</c><00:06:40.360><c> the</c>

00:06:40.470 --> 00:06:40.480 align:start position:0%
give to Claude so it can match the
 

00:06:40.480 --> 00:06:43.070 align:start position:0%
give to Claude so it can match the
visual<00:06:40.880><c> style.</c><00:06:41.840><c> It's</c><00:06:42.000><c> a</c><00:06:42.040><c> lot</c><00:06:42.360><c> easier</c><00:06:42.600><c> to</c><00:06:42.760><c> show</c>

00:06:43.070 --> 00:06:43.080 align:start position:0%
visual style. It's a lot easier to show
 

00:06:43.080 --> 00:06:45.070 align:start position:0%
visual style. It's a lot easier to show
Claude<00:06:43.440><c> what</c><00:06:43.560><c> you</c><00:06:43.720><c> want</c><00:06:44.120><c> than</c><00:06:44.400><c> to</c><00:06:44.520><c> describe</c>

00:06:45.070 --> 00:06:45.080 align:start position:0%
Claude what you want than to describe
 

00:06:45.080 --> 00:06:47.070 align:start position:0%
Claude what you want than to describe
it.<00:06:45.520><c> References</c><00:06:46.080><c> are</c><00:06:46.280><c> also</c><00:06:46.560><c> useful</c><00:06:46.919><c> for</c>

00:06:47.070 --> 00:06:47.080 align:start position:0%
it. References are also useful for
 

00:06:47.080 --> 00:06:49.230 align:start position:0%
it. References are also useful for
refining<00:06:47.680><c> your</c><00:06:47.919><c> own</c><00:06:48.120><c> direction</c><00:06:48.760><c> before</c><00:06:49.120><c> you</c>

00:06:49.230 --> 00:06:49.240 align:start position:0%
refining your own direction before you
 

00:06:49.240 --> 00:06:51.550 align:start position:0%
refining your own direction before you
commit.<00:06:49.960><c> You</c><00:06:50.120><c> scroll,</c><00:06:50.720><c> you</c><00:06:50.880><c> find</c><00:06:51.160><c> things</c><00:06:51.440><c> you</c>

00:06:51.550 --> 00:06:51.560 align:start position:0%
commit. You scroll, you find things you
 

00:06:51.560 --> 00:06:52.990 align:start position:0%
commit. You scroll, you find things you
like,<00:06:51.840><c> and</c><00:06:51.960><c> you</c><00:06:52.040><c> start</c><00:06:52.280><c> to</c><00:06:52.360><c> understand</c><00:06:52.880><c> what</c>

00:06:52.990 --> 00:06:53.000 align:start position:0%
like, and you start to understand what
 

00:06:53.000 --> 00:06:55.710 align:start position:0%
like, and you start to understand what
your<00:06:53.160><c> taste</c><00:06:53.640><c> actually</c><00:06:54.200><c> is.</c><00:06:55.040><c> I'll</c><00:06:55.240><c> share</c><00:06:55.480><c> a</c><00:06:55.520><c> few</c>

00:06:55.710 --> 00:06:55.720 align:start position:0%
your taste actually is. I'll share a few
 

00:06:55.720 --> 00:06:57.310 align:start position:0%
your taste actually is. I'll share a few
of<00:06:55.840><c> my</c><00:06:56.000><c> favorite</c><00:06:56.360><c> websites</c><00:06:56.800><c> with</c><00:06:57.000><c> you</c><00:06:57.120><c> that</c>

00:06:57.310 --> 00:06:57.320 align:start position:0%
of my favorite websites with you that
 

00:06:57.320 --> 00:06:59.870 align:start position:0%
of my favorite websites with you that
you<00:06:57.480><c> can</c><00:06:57.640><c> draw</c><00:06:58.000><c> ideas</c><00:06:58.520><c> from.</c><00:06:59.120><c> This</c><00:06:59.600><c> is</c>

00:06:59.870 --> 00:06:59.880 align:start position:0%
you can draw ideas from. This is
 

00:06:59.880 --> 00:07:01.990 align:start position:0%
you can draw ideas from. This is
Dribbble.<00:07:00.840><c> It's</c><00:07:01.000><c> where</c><00:07:01.160><c> designers</c><00:07:01.720><c> post</c>

00:07:01.990 --> 00:07:02.000 align:start position:0%
Dribbble. It's where designers post
 

00:07:02.000 --> 00:07:03.630 align:start position:0%
Dribbble. It's where designers post
their<00:07:02.200><c> work,</c><00:07:02.480><c> and</c><00:07:02.600><c> it's</c><00:07:02.760><c> full</c><00:07:02.960><c> of</c><00:07:03.040><c> inspiration</c>

00:07:03.630 --> 00:07:03.640 align:start position:0%
their work, and it's full of inspiration
 

00:07:03.640 --> 00:07:06.190 align:start position:0%
their work, and it's full of inspiration
for<00:07:03.760><c> almost</c><00:07:04.160><c> any</c><00:07:04.440><c> style</c><00:07:04.760><c> of</c><00:07:04.880><c> website.</c>

00:07:06.190 --> 00:07:06.200 align:start position:0%
for almost any style of website.
 

00:07:06.200 --> 00:07:08.870 align:start position:0%
for almost any style of website.
This<00:07:06.560><c> is</c><00:07:06.840><c> Awwwards.</c><00:07:08.040><c> These</c><00:07:08.320><c> are</c><00:07:08.440><c> sites</c><00:07:08.760><c> that</c>

00:07:08.870 --> 00:07:08.880 align:start position:0%
This is Awwwards. These are sites that
 

00:07:08.880 --> 00:07:10.909 align:start position:0%
This is Awwwards. These are sites that
have<00:07:09.080><c> won</c><00:07:09.400><c> industry</c><00:07:09.840><c> design</c><00:07:10.200><c> awards,</c><00:07:10.680><c> so</c><00:07:10.800><c> it's</c>

00:07:10.909 --> 00:07:10.919 align:start position:0%
have won industry design awards, so it's
 

00:07:10.919 --> 00:07:12.750 align:start position:0%
have won industry design awards, so it's
a<00:07:10.960><c> great</c><00:07:11.200><c> place</c><00:07:11.440><c> to</c><00:07:11.520><c> browse</c><00:07:12.000><c> high-quality</c>

00:07:12.750 --> 00:07:12.760 align:start position:0%
a great place to browse high-quality
 

00:07:12.760 --> 00:07:15.430 align:start position:0%
a great place to browse high-quality
designs.<00:07:13.800><c> And</c><00:07:14.160><c> you</c><00:07:14.240><c> can</c><00:07:14.400><c> always</c><00:07:14.720><c> just</c><00:07:15.040><c> search</c>

00:07:15.430 --> 00:07:15.440 align:start position:0%
designs. And you can always just search
 

00:07:15.440 --> 00:07:17.150 align:start position:0%
designs. And you can always just search
Pinterest<00:07:16.080><c> for</c><00:07:16.160><c> the</c><00:07:16.240><c> kind</c><00:07:16.480><c> of</c><00:07:16.560><c> site</c><00:07:16.800><c> you</c><00:07:16.919><c> want</c>

00:07:17.150 --> 00:07:17.160 align:start position:0%
Pinterest for the kind of site you want
 

00:07:17.160 --> 00:07:19.030 align:start position:0%
Pinterest for the kind of site you want
to<00:07:17.240><c> build.</c><00:07:18.120><c> It</c><00:07:18.240><c> pulls</c><00:07:18.440><c> examples</c><00:07:18.880><c> from</c>

00:07:19.030 --> 00:07:19.040 align:start position:0%
to build. It pulls examples from
 

00:07:19.040 --> 00:07:21.030 align:start position:0%
to build. It pulls examples from
everywhere.<00:07:20.000><c> Here,</c><00:07:20.164><c> [snorts]</c><00:07:20.560><c> I</c><00:07:20.680><c> searched</c>

00:07:21.030 --> 00:07:21.040 align:start position:0%
everywhere. Here, [snorts] I searched
 

00:07:21.040 --> 00:07:24.030 align:start position:0%
everywhere. Here, [snorts] I searched
for<00:07:21.400><c> modern</c><00:07:21.919><c> website</c><00:07:22.520><c> design</c><00:07:23.200><c> restaurant.</c>

00:07:24.030 --> 00:07:24.040 align:start position:0%
for modern website design restaurant.
 

00:07:24.040 --> 00:07:25.470 align:start position:0%
for modern website design restaurant.
I've<00:07:24.200><c> included</c><00:07:24.560><c> links</c><00:07:24.760><c> to</c><00:07:24.880><c> all</c><00:07:25.080><c> of</c><00:07:25.120><c> these</c><00:07:25.360><c> in</c>

00:07:25.470 --> 00:07:25.480 align:start position:0%
I've included links to all of these in
 

00:07:25.480 --> 00:07:27.470 align:start position:0%
I've included links to all of these in
the<00:07:25.560><c> description</c><00:07:26.040><c> below.</c><00:07:26.640><c> Find</c><00:07:27.000><c> three</c><00:07:27.320><c> to</c>

00:07:27.470 --> 00:07:27.480 align:start position:0%
the description below. Find three to
 

00:07:27.480 --> 00:07:30.070 align:start position:0%
the description below. Find three to
five<00:07:27.760><c> sites</c><00:07:28.120><c> you</c><00:07:28.280><c> like</c><00:07:28.720><c> and</c><00:07:29.120><c> save</c><00:07:29.400><c> screenshots</c>

00:07:30.070 --> 00:07:30.080 align:start position:0%
five sites you like and save screenshots
 

00:07:30.080 --> 00:07:32.270 align:start position:0%
five sites you like and save screenshots
of<00:07:30.200><c> them.</c><00:07:30.640><c> You're</c><00:07:30.760><c> not</c><00:07:31.040><c> copying</c><00:07:31.600><c> these</c><00:07:31.840><c> sites.</c>

00:07:32.270 --> 00:07:32.280 align:start position:0%
of them. You're not copying these sites.
 

00:07:32.280 --> 00:07:34.230 align:start position:0%
of them. You're not copying these sites.
Instead,<00:07:33.000><c> you're</c><00:07:33.160><c> showing</c><00:07:33.520><c> Claude</c><00:07:33.919><c> what</c><00:07:34.080><c> you</c>

00:07:34.230 --> 00:07:34.240 align:start position:0%
Instead, you're showing Claude what you
 

00:07:34.240 --> 00:07:36.670 align:start position:0%
Instead, you're showing Claude what you
like<00:07:34.760><c> and</c><00:07:35.160><c> how</c><00:07:35.360><c> you</c><00:07:35.520><c> want</c><00:07:35.720><c> your</c><00:07:35.919><c> own</c><00:07:36.080><c> design</c><00:07:36.520><c> to</c>

00:07:36.670 --> 00:07:36.680 align:start position:0%
like and how you want your own design to
 

00:07:36.680 --> 00:07:38.830 align:start position:0%
like and how you want your own design to
end<00:07:36.919><c> up.</c><00:07:37.560><c> For</c><00:07:37.720><c> my</c><00:07:37.919><c> build,</c><00:07:38.320><c> I'm</c><00:07:38.480><c> creating</c><00:07:38.800><c> a</c>

00:07:38.830 --> 00:07:38.840 align:start position:0%
end up. For my build, I'm creating a
 

00:07:38.840 --> 00:07:41.590 align:start position:0%
end up. For my build, I'm creating a
website<00:07:39.360><c> for</c><00:07:39.520><c> a</c><00:07:39.600><c> restaurant</c><00:07:40.200><c> in</c><00:07:40.400><c> Seattle.</c>

00:07:41.590 --> 00:07:41.600 align:start position:0%
website for a restaurant in Seattle.
 

00:07:41.600 --> 00:07:43.670 align:start position:0%
website for a restaurant in Seattle.
Here's<00:07:41.760><c> the</c><00:07:41.840><c> prompt</c><00:07:42.240><c> I</c><00:07:42.400><c> used.</c><00:07:43.320><c> This</c><00:07:43.480><c> is</c><00:07:43.600><c> the</c>

00:07:43.670 --> 00:07:43.680 align:start position:0%
Here's the prompt I used. This is the
 

00:07:43.680 --> 00:07:46.070 align:start position:0%
Here's the prompt I used. This is the
whole<00:07:43.960><c> video</c><00:07:44.480><c> in</c><00:07:44.640><c> a</c><00:07:44.720><c> single</c><00:07:45.120><c> sentence.</c>

00:07:46.070 --> 00:07:46.080 align:start position:0%
whole video in a single sentence.
 

00:07:46.080 --> 00:07:51.270 align:start position:0%
whole video in a single sentence.
{forward<00:07:46.360><c> slash}</c><00:07:47.080><c> UI-UX-Pro-Max</c>

00:07:51.270 --> 00:07:51.280 align:start position:0%
 
 

00:07:51.280 --> 00:07:53.510 align:start position:0%
 
is<00:07:51.480><c> how</c><00:07:51.720><c> we</c><00:07:51.840><c> call</c><00:07:52.120><c> the</c><00:07:52.240><c> design</c><00:07:52.720><c> skill</c><00:07:53.120><c> we</c><00:07:53.240><c> just</c>

00:07:53.510 --> 00:07:53.520 align:start position:0%
is how we call the design skill we just
 

00:07:53.520 --> 00:07:56.070 align:start position:0%
is how we call the design skill we just
installed.<00:07:54.400><c> Then</c><00:07:54.680><c> we</c><00:07:54.840><c> type</c><00:07:55.160><c> out</c><00:07:55.360><c> the</c><00:07:55.480><c> brief</c>

00:07:56.070 --> 00:07:56.080 align:start position:0%
installed. Then we type out the brief
 

00:07:56.080 --> 00:07:58.150 align:start position:0%
installed. Then we type out the brief
for<00:07:56.240><c> the</c><00:07:56.400><c> AI.</c><00:07:57.160><c> The</c><00:07:57.280><c> trick</c><00:07:57.560><c> to</c><00:07:57.680><c> making</c><00:07:57.960><c> this</c>

00:07:58.150 --> 00:07:58.160 align:start position:0%
for the AI. The trick to making this
 

00:07:58.160 --> 00:08:00.790 align:start position:0%
for the AI. The trick to making this
work<00:07:58.600><c> is</c><00:07:59.000><c> this</c><00:07:59.280><c> last</c><00:07:59.720><c> line.</c><00:08:00.280><c> Ask</c><00:08:00.600><c> me</c>

00:08:00.790 --> 00:08:00.800 align:start position:0%
work is this last line. Ask me
 

00:08:00.800 --> 00:08:02.990 align:start position:0%
work is this last line. Ask me
clarifying<00:08:01.480><c> questions.</c><00:08:02.360><c> That's</c><00:08:02.640><c> the</c><00:08:02.760><c> line</c>

00:08:02.990 --> 00:08:03.000 align:start position:0%
clarifying questions. That's the line
 

00:08:03.000 --> 00:08:04.990 align:start position:0%
clarifying questions. That's the line
that<00:08:03.120><c> makes</c><00:08:03.360><c> Claude</c><00:08:03.720><c> stop</c><00:08:04.160><c> and</c><00:08:04.280><c> to</c><00:08:04.400><c> think</c>

00:08:04.990 --> 00:08:05.000 align:start position:0%
that makes Claude stop and to think
 

00:08:05.000 --> 00:08:06.990 align:start position:0%
that makes Claude stop and to think
before<00:08:05.400><c> it</c><00:08:05.480><c> starts</c><00:08:05.800><c> building.</c>

00:08:06.990 --> 00:08:07.000 align:start position:0%
before it starts building.
 

00:08:07.000 --> 00:08:08.830 align:start position:0%
before it starts building.
Here<00:08:07.360><c> Claude</c><00:08:07.760><c> comes</c><00:08:08.000><c> back</c><00:08:08.280><c> with</c><00:08:08.480><c> seven</c>

00:08:08.830 --> 00:08:08.840 align:start position:0%
Here Claude comes back with seven
 

00:08:08.840 --> 00:08:10.910 align:start position:0%
Here Claude comes back with seven
questions.<00:08:10.000><c> They</c><00:08:10.040><c> cover</c><00:08:10.240><c> the</c><00:08:10.360><c> restaurant</c>

00:08:10.910 --> 00:08:10.920 align:start position:0%
questions. They cover the restaurant
 

00:08:10.920 --> 00:08:13.150 align:start position:0%
questions. They cover the restaurant
name,<00:08:11.600><c> the</c><00:08:11.680><c> style</c><00:08:12.000><c> direction,</c><00:08:12.919><c> which</c>

00:08:13.150 --> 00:08:13.160 align:start position:0%
name, the style direction, which
 

00:08:13.160 --> 00:08:14.909 align:start position:0%
name, the style direction, which
sections<00:08:13.520><c> we</c><00:08:13.640><c> want,</c><00:08:14.320><c> who's</c><00:08:14.560><c> writing</c><00:08:14.800><c> the</c>

00:08:14.909 --> 00:08:14.919 align:start position:0%
sections we want, who's writing the
 

00:08:14.919 --> 00:08:17.390 align:start position:0%
sections we want, who's writing the
content,<00:08:15.760><c> the</c><00:08:15.880><c> tech</c><00:08:16.120><c> stack,</c><00:08:16.760><c> the</c><00:08:16.880><c> animation</c>

00:08:17.390 --> 00:08:17.400 align:start position:0%
content, the tech stack, the animation
 

00:08:17.400 --> 00:08:18.870 align:start position:0%
content, the tech stack, the animation
level,<00:08:17.760><c> and</c><00:08:17.960><c> anything</c><00:08:18.320><c> else</c><00:08:18.560><c> we</c><00:08:18.680><c> want</c><00:08:18.840><c> to</c>

00:08:18.870 --> 00:08:18.880 align:start position:0%
level, and anything else we want to
 

00:08:18.880 --> 00:08:20.470 align:start position:0%
level, and anything else we want to
specify.

00:08:20.470 --> 00:08:20.480 align:start position:0%
specify.
 

00:08:20.480 --> 00:08:22.510 align:start position:0%
specify.
And<00:08:20.520><c> here's</c><00:08:20.720><c> the</c><00:08:20.800><c> part</c><00:08:21.000><c> that</c><00:08:21.280><c> really</c><00:08:21.640><c> matters.</c>

00:08:22.510 --> 00:08:22.520 align:start position:0%
And here's the part that really matters.
 

00:08:22.520 --> 00:08:24.830 align:start position:0%
And here's the part that really matters.
Claude<00:08:22.919><c> offers</c><00:08:23.320><c> three</c><00:08:23.919><c> style</c><00:08:24.280><c> directions</c><00:08:24.760><c> to</c>

00:08:24.830 --> 00:08:24.840 align:start position:0%
Claude offers three style directions to
 

00:08:24.840 --> 00:08:27.110 align:start position:0%
Claude offers three style directions to
choose<00:08:25.120><c> from.</c><00:08:25.720><c> A</c><00:08:25.800><c> Manhattan</c><00:08:26.400><c> steakhouse</c><00:08:26.919><c> with</c>

00:08:27.110 --> 00:08:27.120 align:start position:0%
choose from. A Manhattan steakhouse with
 

00:08:27.120 --> 00:08:30.110 align:start position:0%
choose from. A Manhattan steakhouse with
dark<00:08:27.600><c> moody</c><00:08:27.960><c> energy,</c><00:08:28.919><c> a</c><00:08:29.000><c> Pacific</c><00:08:29.560><c> Northwest</c>

00:08:30.110 --> 00:08:30.120 align:start position:0%
dark moody energy, a Pacific Northwest
 

00:08:30.120 --> 00:08:32.510 align:start position:0%
dark moody energy, a Pacific Northwest
modern<00:08:30.480><c> look,</c><00:08:31.120><c> or</c><00:08:31.400><c> a</c><00:08:31.480><c> classic</c><00:08:32.000><c> old-school</c>

00:08:32.510 --> 00:08:32.520 align:start position:0%
modern look, or a classic old-school
 

00:08:32.520 --> 00:08:34.630 align:start position:0%
modern look, or a classic old-school
chop<00:08:32.840><c> house.</c><00:08:33.479><c> It's</c><00:08:33.640><c> giving</c><00:08:33.919><c> you</c><00:08:34.000><c> the</c><00:08:34.120><c> menu</c><00:08:34.479><c> of</c>

00:08:34.630 --> 00:08:34.640 align:start position:0%
chop house. It's giving you the menu of
 

00:08:34.640 --> 00:08:37.630 align:start position:0%
chop house. It's giving you the menu of
style<00:08:35.120><c> options.</c><00:08:36.000><c> I</c><00:08:36.200><c> picked</c><00:08:36.719><c> dark</c><00:08:37.240><c> moody</c>

00:08:37.630 --> 00:08:37.640 align:start position:0%
style options. I picked dark moody
 

00:08:37.640 --> 00:08:40.149 align:start position:0%
style options. I picked dark moody
luxury,<00:08:38.400><c> but</c><00:08:38.960><c> with</c><00:08:39.200><c> Pacific</c><00:08:39.640><c> Northwest</c>

00:08:40.149 --> 00:08:40.159 align:start position:0%
luxury, but with Pacific Northwest
 

00:08:40.159 --> 00:08:41.469 align:start position:0%
luxury, but with Pacific Northwest
grounding,<00:08:40.680><c> so</c><00:08:40.800><c> it</c><00:08:40.880><c> doesn't</c><00:08:41.159><c> look</c><00:08:41.280><c> like</c><00:08:41.400><c> a</c>

00:08:41.469 --> 00:08:41.479 align:start position:0%
grounding, so it doesn't look like a
 

00:08:41.479 --> 00:08:43.350 align:start position:0%
grounding, so it doesn't look like a
Manhattan<00:08:42.039><c> steakhouse.</c>

00:08:43.350 --> 00:08:43.360 align:start position:0%
Manhattan steakhouse.
 

00:08:43.360 --> 00:08:45.950 align:start position:0%
Manhattan steakhouse.
Five<00:08:43.560><c> sections</c><00:08:43.960><c> total.</c><00:08:45.000><c> No</c><00:08:45.160><c> gallery,</c><00:08:45.720><c> no</c>

00:08:45.950 --> 00:08:45.960 align:start position:0%
Five sections total. No gallery, no
 

00:08:45.960 --> 00:08:47.910 align:start position:0%
Five sections total. No gallery, no
booking<00:08:46.280><c> system,</c><00:08:46.800><c> just</c><00:08:47.000><c> a</c><00:08:47.040><c> single</c><00:08:47.480><c> page</c><00:08:47.760><c> that</c>

00:08:47.910 --> 00:08:47.920 align:start position:0%
booking system, just a single page that
 

00:08:47.920 --> 00:08:50.190 align:start position:0%
booking system, just a single page that
scrolls<00:08:48.520><c> all</c><00:08:48.720><c> the</c><00:08:48.800><c> way</c><00:08:48.960><c> through.</c>

00:08:50.190 --> 00:08:50.200 align:start position:0%
scrolls all the way through.
 

00:08:50.200 --> 00:08:51.750 align:start position:0%
scrolls all the way through.
This<00:08:50.320><c> is</c><00:08:50.440><c> the</c><00:08:50.520><c> most</c><00:08:50.760><c> important</c><00:08:51.200><c> moment</c><00:08:51.560><c> in</c><00:08:51.640><c> the</c>

00:08:51.750 --> 00:08:51.760 align:start position:0%
This is the most important moment in the
 

00:08:51.760 --> 00:08:54.230 align:start position:0%
This is the most important moment in the
entire<00:08:52.240><c> build.</c><00:08:53.080><c> The</c><00:08:53.240><c> answers</c><00:08:53.600><c> you</c><00:08:53.720><c> give</c><00:08:53.920><c> here</c>

00:08:54.230 --> 00:08:54.240 align:start position:0%
entire build. The answers you give here
 

00:08:54.240 --> 00:08:57.070 align:start position:0%
entire build. The answers you give here
become<00:08:55.040><c> the</c><00:08:55.200><c> entire</c><00:08:55.800><c> site.</c><00:08:56.720><c> The</c><00:08:56.839><c> more</c>

00:08:57.070 --> 00:08:57.080 align:start position:0%
become the entire site. The more
 

00:08:57.080 --> 00:08:59.230 align:start position:0%
become the entire site. The more
specific<00:08:57.720><c> you</c><00:08:57.839><c> are</c><00:08:58.000><c> at</c><00:08:58.120><c> this</c><00:08:58.360><c> stage,</c><00:08:58.839><c> the</c><00:08:59.000><c> less</c>

00:08:59.230 --> 00:08:59.240 align:start position:0%
specific you are at this stage, the less
 

00:08:59.240 --> 00:09:01.030 align:start position:0%
specific you are at this stage, the less
you'll<00:08:59.360><c> have</c><00:08:59.560><c> to</c><00:08:59.680><c> fight</c><00:09:00.000><c> Claude</c><00:09:00.400><c> later</c><00:09:00.839><c> to</c>

00:09:01.030 --> 00:09:01.040 align:start position:0%
you'll have to fight Claude later to
 

00:09:01.040 --> 00:09:02.630 align:start position:0%
you'll have to fight Claude later to
make<00:09:01.240><c> revisions.</c>

00:09:02.630 --> 00:09:02.640 align:start position:0%
make revisions.
 

00:09:02.640 --> 00:09:04.430 align:start position:0%
make revisions.
Really<00:09:02.960><c> take</c><00:09:03.240><c> your</c><00:09:03.360><c> time</c><00:09:03.800><c> to</c><00:09:04.000><c> answer</c><00:09:04.320><c> the</c>

00:09:04.430 --> 00:09:04.440 align:start position:0%
Really take your time to answer the
 

00:09:04.440 --> 00:09:06.270 align:start position:0%
Really take your time to answer the
questions<00:09:05.000><c> thoughtfully.</c>

00:09:06.270 --> 00:09:06.280 align:start position:0%
questions thoughtfully.
 

00:09:06.280 --> 00:09:09.750 align:start position:0%
questions thoughtfully.
Then<00:09:07.280><c> send</c><00:09:07.960><c> to</c><00:09:08.080><c> watch</c><00:09:08.320><c> the</c><00:09:08.400><c> magic</c><00:09:08.760><c> begin.</c>

00:09:09.750 --> 00:09:09.760 align:start position:0%
Then send to watch the magic begin.
 

00:09:09.760 --> 00:09:11.990 align:start position:0%
Then send to watch the magic begin.
Now<00:09:10.200><c> Claude</c><00:09:10.680><c> reads</c><00:09:10.960><c> the</c><00:09:11.040><c> brief,</c><00:09:11.520><c> and</c><00:09:11.640><c> it</c><00:09:11.760><c> takes</c>

00:09:11.990 --> 00:09:12.000 align:start position:0%
Now Claude reads the brief, and it takes
 

00:09:12.000 --> 00:09:13.950 align:start position:0%
Now Claude reads the brief, and it takes
about<00:09:12.320><c> 3</c><00:09:12.600><c> minutes</c><00:09:12.880><c> before</c><00:09:13.400><c> it</c><00:09:13.680><c> writes</c><00:09:13.920><c> a</c>

00:09:13.950 --> 00:09:13.960 align:start position:0%
about 3 minutes before it writes a
 

00:09:13.960 --> 00:09:16.270 align:start position:0%
about 3 minutes before it writes a
single<00:09:14.320><c> line</c><00:09:14.520><c> of</c><00:09:14.640><c> code.</c><00:09:15.560><c> Then</c><00:09:15.839><c> it</c><00:09:15.960><c> spends</c>

00:09:16.270 --> 00:09:16.280 align:start position:0%
single line of code. Then it spends
 

00:09:16.280 --> 00:09:17.950 align:start position:0%
single line of code. Then it spends
another<00:09:16.560><c> four</c><00:09:16.839><c> or</c><00:09:16.920><c> five</c><00:09:17.240><c> minutes</c><00:09:17.520><c> or</c><00:09:17.600><c> so</c>

00:09:17.950 --> 00:09:17.960 align:start position:0%
another four or five minutes or so
 

00:09:17.960 --> 00:09:20.590 align:start position:0%
another four or five minutes or so
actually<00:09:18.520><c> building.</c><00:09:19.560><c> So</c><00:09:19.800><c> I'll</c><00:09:19.960><c> skip</c><00:09:20.200><c> ahead</c><00:09:20.520><c> to</c>

00:09:20.590 --> 00:09:20.600 align:start position:0%
actually building. So I'll skip ahead to
 

00:09:20.600 --> 00:09:23.910 align:start position:0%
actually building. So I'll skip ahead to
the<00:09:20.680><c> fun</c><00:09:20.920><c> part,</c><00:09:21.440><c> the</c><00:09:21.560><c> reveal.</c>

00:09:23.910 --> 00:09:23.920 align:start position:0%
the fun part, the reveal.
 

00:09:23.920 --> 00:09:25.710 align:start position:0%
the fun part, the reveal.
And<00:09:24.240><c> there</c><00:09:24.600><c> it</c><00:09:24.760><c> is.</c>

00:09:25.710 --> 00:09:25.720 align:start position:0%
And there it is.
 

00:09:25.720 --> 00:09:27.790 align:start position:0%
And there it is.
This<00:09:25.960><c> is</c><00:09:26.160><c> already</c><00:09:26.600><c> better</c><00:09:26.920><c> than</c><00:09:27.120><c> most</c><00:09:27.560><c> AI</c>

00:09:27.790 --> 00:09:27.800 align:start position:0%
This is already better than most AI
 

00:09:27.800 --> 00:09:29.829 align:start position:0%
This is already better than most AI
website<00:09:28.320><c> demos</c><00:09:28.720><c> I've</c><00:09:28.880><c> seen,</c><00:09:29.320><c> and</c><00:09:29.440><c> we</c><00:09:29.560><c> haven't</c>

00:09:29.829 --> 00:09:29.839 align:start position:0%
website demos I've seen, and we haven't
 

00:09:29.839 --> 00:09:31.750 align:start position:0%
website demos I've seen, and we haven't
even<00:09:29.960><c> started</c><00:09:30.280><c> polishing</c><00:09:30.800><c> yet.</c>

00:09:31.750 --> 00:09:31.760 align:start position:0%
even started polishing yet.
 

00:09:31.760 --> 00:09:33.110 align:start position:0%
even started polishing yet.
So<00:09:31.821><c> [gasps and snorts]</c><00:09:32.200><c> how</c><00:09:32.520><c> does</c><00:09:32.680><c> it</c><00:09:32.800><c> stack</c>

00:09:33.110 --> 00:09:33.120 align:start position:0%
So [gasps and snorts] how does it stack
 

00:09:33.120 --> 00:09:35.390 align:start position:0%
So [gasps and snorts] how does it stack
up<00:09:33.280><c> against</c><00:09:33.640><c> our</c><00:09:33.760><c> $10,000</c><00:09:34.920><c> website</c>

00:09:35.390 --> 00:09:35.400 align:start position:0%
up against our $10,000 website
 

00:09:35.400 --> 00:09:36.790 align:start position:0%
up against our $10,000 website
checklist?

00:09:36.790 --> 00:09:36.800 align:start position:0%
checklist?
 

00:09:36.800 --> 00:09:38.470 align:start position:0%
checklist?
Let's<00:09:36.960><c> start</c><00:09:37.120><c> with</c><00:09:37.280><c> point</c><00:09:37.480><c> of</c><00:09:37.560><c> view.</c><00:09:38.200><c> Look</c><00:09:38.400><c> at</c>

00:09:38.470 --> 00:09:38.480 align:start position:0%
Let's start with point of view. Look at
 

00:09:38.480 --> 00:09:40.630 align:start position:0%
Let's start with point of view. Look at
the<00:09:38.600><c> brief</c><00:09:38.920><c> we</c><00:09:39.040><c> gave</c><00:09:39.280><c> Claude.</c><00:09:39.920><c> We</c><00:09:40.040><c> had</c><00:09:40.160><c> a</c><00:09:40.240><c> real</c>

00:09:40.630 --> 00:09:40.640 align:start position:0%
the brief we gave Claude. We had a real
 

00:09:40.640 --> 00:09:42.110 align:start position:0%
the brief we gave Claude. We had a real
direction<00:09:41.160><c> in</c><00:09:41.280><c> mind</c><00:09:41.560><c> when</c><00:09:41.640><c> we</c><00:09:41.760><c> answered</c><00:09:42.000><c> its</c>

00:09:42.110 --> 00:09:42.120 align:start position:0%
direction in mind when we answered its
 

00:09:42.120 --> 00:09:44.470 align:start position:0%
direction in mind when we answered its
questions,<00:09:42.920><c> not</c><00:09:43.080><c> just</c><00:09:43.240><c> a</c><00:09:43.280><c> mood</c><00:09:43.560><c> board.</c><00:09:44.080><c> Then</c>

00:09:44.470 --> 00:09:44.480 align:start position:0%
questions, not just a mood board. Then
 

00:09:44.480 --> 00:09:46.750 align:start position:0%
questions, not just a mood board. Then
there's<00:09:44.720><c> typography.</c><00:09:46.040><c> Claude</c><00:09:46.360><c> picked</c>

00:09:46.750 --> 00:09:46.760 align:start position:0%
there's typography. Claude picked
 

00:09:46.760 --> 00:09:49.270 align:start position:0%
there's typography. Claude picked
Francis<00:09:47.480><c> for</c><00:09:47.720><c> the</c><00:09:47.840><c> headlines</c><00:09:48.480><c> and</c><00:09:48.760><c> Inter</c><00:09:49.160><c> for</c>

00:09:49.270 --> 00:09:49.280 align:start position:0%
Francis for the headlines and Inter for
 

00:09:49.280 --> 00:09:51.310 align:start position:0%
Francis for the headlines and Inter for
the<00:09:49.360><c> body.</c><00:09:50.120><c> Now,</c><00:09:50.360><c> we'll</c><00:09:50.560><c> swap</c><00:09:50.920><c> out</c><00:09:51.040><c> Inter</c>

00:09:51.310 --> 00:09:51.320 align:start position:0%
the body. Now, we'll swap out Inter
 

00:09:51.320 --> 00:09:52.590 align:start position:0%
the body. Now, we'll swap out Inter
later<00:09:51.640><c> because</c><00:09:51.880><c> it's</c><00:09:52.040><c> one</c><00:09:52.160><c> of</c><00:09:52.200><c> the</c><00:09:52.280><c> most</c>

00:09:52.590 --> 00:09:52.600 align:start position:0%
later because it's one of the most
 

00:09:52.600 --> 00:09:54.430 align:start position:0%
later because it's one of the most
overused<00:09:53.160><c> AI</c><00:09:53.400><c> fonts</c><00:09:53.760><c> on</c><00:09:53.840><c> the</c><00:09:53.920><c> internet</c><00:09:54.280><c> right</c>

00:09:54.430 --> 00:09:54.440 align:start position:0%
overused AI fonts on the internet right
 

00:09:54.440 --> 00:09:57.310 align:start position:0%
overused AI fonts on the internet right
now.<00:09:55.040><c> For</c><00:09:55.200><c> color,</c><00:09:55.880><c> Claude</c><00:09:56.240><c> landed</c><00:09:56.560><c> on</c><00:09:56.800><c> five</c>

00:09:57.310 --> 00:09:57.320 align:start position:0%
now. For color, Claude landed on five
 

00:09:57.320 --> 00:10:00.510 align:start position:0%
now. For color, Claude landed on five
hex<00:09:57.640><c> values:</c><00:09:58.560><c> near</c><00:09:58.880><c> black,</c><00:09:59.520><c> warm</c><00:09:59.880><c> cream,</c>

00:10:00.510 --> 00:10:00.520 align:start position:0%
hex values: near black, warm cream,
 

00:10:00.520 --> 00:10:03.710 align:start position:0%
hex values: near black, warm cream,
oxblood,<00:10:01.400><c> brass,</c><00:10:02.080><c> and</c><00:10:02.320><c> slate.</c><00:10:03.080><c> There</c><00:10:03.240><c> are</c><00:10:03.360><c> no</c>

00:10:03.710 --> 00:10:03.720 align:start position:0%
oxblood, brass, and slate. There are no
 

00:10:03.720 --> 00:10:06.390 align:start position:0%
oxblood, brass, and slate. There are no
rainbow<00:10:04.280><c> palettes</c><00:10:04.760><c> here.</c><00:10:05.560><c> Restraint</c><00:10:06.240><c> with</c>

00:10:06.390 --> 00:10:06.400 align:start position:0%
rainbow palettes here. Restraint with
 

00:10:06.400 --> 00:10:08.790 align:start position:0%
rainbow palettes here. Restraint with
color<00:10:06.760><c> is</c><00:10:06.920><c> what</c><00:10:07.120><c> signals</c><00:10:07.680><c> quality.</c><00:10:08.560><c> Then</c>

00:10:08.790 --> 00:10:08.800 align:start position:0%
color is what signals quality. Then
 

00:10:08.800 --> 00:10:10.670 align:start position:0%
color is what signals quality. Then
there's<00:10:09.040><c> hierarchy.</c><00:10:10.160><c> Look</c><00:10:10.320><c> at</c><00:10:10.400><c> how</c><00:10:10.520><c> this</c>

00:10:10.670 --> 00:10:10.680 align:start position:0%
there's hierarchy. Look at how this
 

00:10:10.680 --> 00:10:12.670 align:start position:0%
there's hierarchy. Look at how this
section<00:10:11.040><c> is</c><00:10:11.160><c> laid</c><00:10:11.400><c> out.</c><00:10:11.920><c> The</c><00:10:12.040><c> city</c><00:10:12.320><c> name</c><00:10:12.520><c> is</c>

00:10:12.670 --> 00:10:12.680 align:start position:0%
section is laid out. The city name is
 

00:10:12.680 --> 00:10:14.790 align:start position:0%
section is laid out. The city name is
huge,<00:10:13.120><c> the</c><00:10:13.320><c> address</c><00:10:13.720><c> is</c><00:10:13.840><c> medium-sized,</c><00:10:14.680><c> and</c>

00:10:14.790 --> 00:10:14.800 align:start position:0%
huge, the address is medium-sized, and
 

00:10:14.800 --> 00:10:16.950 align:start position:0%
huge, the address is medium-sized, and
the<00:10:14.880><c> room</c><00:10:15.160><c> description</c><00:10:15.680><c> is</c><00:10:15.840><c> small.</c><00:10:16.720><c> That's</c>

00:10:16.950 --> 00:10:16.960 align:start position:0%
the room description is small. That's
 

00:10:16.960 --> 00:10:19.030 align:start position:0%
the room description is small. That's
not<00:10:17.160><c> random</c><00:10:17.480><c> sizing.</c><00:10:18.120><c> It's</c><00:10:18.280><c> telling</c><00:10:18.600><c> your</c><00:10:18.880><c> eye</c>

00:10:19.030 --> 00:10:19.040 align:start position:0%
not random sizing. It's telling your eye
 

00:10:19.040 --> 00:10:22.230 align:start position:0%
not random sizing. It's telling your eye
what<00:10:19.320><c> to</c><00:10:19.560><c> read</c><00:10:19.920><c> first,</c><00:10:20.600><c> second,</c><00:10:21.120><c> and</c><00:10:21.360><c> third.</c>

00:10:22.230 --> 00:10:22.240 align:start position:0%
what to read first, second, and third.
 

00:10:22.240 --> 00:10:24.870 align:start position:0%
what to read first, second, and third.
Without<00:10:22.600><c> that,</c><00:10:22.920><c> a</c><00:10:22.960><c> site</c><00:10:23.280><c> feels</c><00:10:23.720><c> flat</c><00:10:24.320><c> and</c><00:10:24.560><c> hard</c>

00:10:24.870 --> 00:10:24.880 align:start position:0%
Without that, a site feels flat and hard
 

00:10:24.880 --> 00:10:26.230 align:start position:0%
Without that, a site feels flat and hard
to<00:10:24.960><c> scan.</c>

00:10:26.230 --> 00:10:26.240 align:start position:0%
to scan.
 

00:10:26.240 --> 00:10:29.150 align:start position:0%
to scan.
Take<00:10:26.440><c> a</c><00:10:26.480><c> look</c><00:10:26.640><c> at</c><00:10:26.720><c> the</c><00:10:26.800><c> copy,</c><00:10:27.240><c> too.</c><00:10:28.160><c> Dry-aged</c>

00:10:29.150 --> 00:10:29.160 align:start position:0%
Take a look at the copy, too. Dry-aged
 

00:10:29.160 --> 00:10:33.030 align:start position:0%
Take a look at the copy, too. Dry-aged
ribeye,<00:10:30.160><c> 16</c><00:10:30.720><c> oz,</c><00:10:31.480><c> 60-day,</c>

00:10:33.030 --> 00:10:33.040 align:start position:0%
ribeye, 16 oz, 60-day,
 

00:10:33.040 --> 00:10:35.390 align:start position:0%
ribeye, 16 oz, 60-day,
hearth-fired.<00:10:34.440><c> That's</c><00:10:34.600><c> not</c><00:10:34.760><c> generic</c><00:10:35.240><c> AI</c>

00:10:35.390 --> 00:10:35.400 align:start position:0%
hearth-fired. That's not generic AI
 

00:10:35.400 --> 00:10:37.190 align:start position:0%
hearth-fired. That's not generic AI
text.<00:10:35.960><c> That's</c><00:10:36.160><c> a</c><00:10:36.200><c> restaurant</c><00:10:36.680><c> copy</c><00:10:37.000><c> that</c>

00:10:37.190 --> 00:10:37.200 align:start position:0%
text. That's a restaurant copy that
 

00:10:37.200 --> 00:10:39.270 align:start position:0%
text. That's a restaurant copy that
reads<00:10:37.400><c> like</c><00:10:37.520><c> a</c><00:10:37.600><c> real</c><00:10:37.960><c> chef</c><00:10:38.320><c> wrote</c><00:10:38.520><c> it.</c><00:10:39.120><c> We're</c>

00:10:39.270 --> 00:10:39.280 align:start position:0%
reads like a real chef wrote it. We're
 

00:10:39.280 --> 00:10:40.670 align:start position:0%
reads like a real chef wrote it. We're
going<00:10:39.480><c> to</c><00:10:39.560><c> come</c><00:10:39.720><c> back</c><00:10:39.960><c> to</c><00:10:40.040><c> this</c><00:10:40.240><c> in</c><00:10:40.320><c> chapter</c>

00:10:40.670 --> 00:10:40.680 align:start position:0%
going to come back to this in chapter
 

00:10:40.680 --> 00:10:43.070 align:start position:0%
going to come back to this in chapter
seven.<00:10:41.640><c> All</c><00:10:41.720><c> right,</c><00:10:41.960><c> that's</c><00:10:42.240><c> four</c><00:10:42.600><c> boxes</c>

00:10:43.070 --> 00:10:43.080 align:start position:0%
seven. All right, that's four boxes
 

00:10:43.080 --> 00:10:44.950 align:start position:0%
seven. All right, that's four boxes
checked.<00:10:43.720><c> We've</c><00:10:43.880><c> still</c><00:10:44.080><c> got</c><00:10:44.280><c> four</c><00:10:44.440><c> to</c><00:10:44.560><c> go,</c><00:10:44.839><c> and</c>

00:10:44.950 --> 00:10:44.960 align:start position:0%
checked. We've still got four to go, and
 

00:10:44.960 --> 00:10:46.670 align:start position:0%
checked. We've still got four to go, and
the<00:10:45.040><c> next</c><00:10:45.320><c> ones</c><00:10:45.520><c> are</c><00:10:45.680><c> going</c><00:10:46.000><c> to</c><00:10:46.120><c> need</c><00:10:46.320><c> a</c><00:10:46.360><c> bit</c>

00:10:46.670 --> 00:10:46.680 align:start position:0%
the next ones are going to need a bit
 

00:10:46.680 --> 00:10:48.990 align:start position:0%
the next ones are going to need a bit
more<00:10:47.000><c> work.</c><00:10:47.760><c> Number</c><00:10:48.120><c> five</c><00:10:48.440><c> on</c><00:10:48.520><c> the</c><00:10:48.600><c> checklist</c>

00:10:48.990 --> 00:10:49.000 align:start position:0%
more work. Number five on the checklist
 

00:10:49.000 --> 00:10:51.630 align:start position:0%
more work. Number five on the checklist
is<00:10:49.280><c> imagery.</c><00:10:50.040><c> This</c><00:10:50.240><c> is</c><00:10:50.440><c> one</c><00:10:50.680><c> pillar</c><00:10:51.160><c> Claude</c>

00:10:51.630 --> 00:10:51.640 align:start position:0%
is imagery. This is one pillar Claude
 

00:10:51.640 --> 00:10:53.350 align:start position:0%
is imagery. This is one pillar Claude
can't<00:10:51.960><c> fully</c><00:10:52.280><c> solve</c><00:10:52.600><c> on</c><00:10:52.720><c> its</c><00:10:52.880><c> own.</c><00:10:53.200><c> You're</c>

00:10:53.350 --> 00:10:53.360 align:start position:0%
can't fully solve on its own. You're
 

00:10:53.360 --> 00:10:54.710 align:start position:0%
can't fully solve on its own. You're
going<00:10:53.600><c> to</c><00:10:53.680><c> have</c><00:10:53.839><c> to</c><00:10:53.920><c> bring</c><00:10:54.160><c> some</c><00:10:54.360><c> assets</c>

00:10:54.710 --> 00:10:54.720 align:start position:0%
going to have to bring some assets
 

00:10:54.720 --> 00:10:55.870 align:start position:0%
going to have to bring some assets
yourself.

00:10:55.870 --> 00:10:55.880 align:start position:0%
yourself.
 

00:10:55.880 --> 00:10:57.829 align:start position:0%
yourself.
The<00:10:55.960><c> best</c><00:10:56.280><c> thing</c><00:10:56.520><c> you</c><00:10:56.640><c> can</c><00:10:56.800><c> have</c><00:10:57.080><c> on</c><00:10:57.240><c> a</c><00:10:57.280><c> premium</c>

00:10:57.829 --> 00:10:57.839 align:start position:0%
The best thing you can have on a premium
 

00:10:57.839 --> 00:11:00.750 align:start position:0%
The best thing you can have on a premium
website<00:10:58.440><c> is</c><00:10:58.760><c> custom</c><00:10:59.240><c> photography</c><00:10:59.960><c> or</c><00:11:00.280><c> custom</c>

00:11:00.750 --> 00:11:00.760 align:start position:0%
website is custom photography or custom
 

00:11:00.760 --> 00:11:02.710 align:start position:0%
website is custom photography or custom
graphics.<00:11:01.640><c> Work</c><00:11:01.839><c> that's</c><00:11:02.040><c> been</c><00:11:02.200><c> shot</c><00:11:02.600><c> or</c>

00:11:02.710 --> 00:11:02.720 align:start position:0%
graphics. Work that's been shot or
 

00:11:02.720 --> 00:11:05.310 align:start position:0%
graphics. Work that's been shot or
designed<00:11:03.160><c> specifically</c><00:11:03.880><c> for</c><00:11:04.160><c> your</c><00:11:04.280><c> brand.</c><00:11:05.160><c> If</c>

00:11:05.310 --> 00:11:05.320 align:start position:0%
designed specifically for your brand. If
 

00:11:05.320 --> 00:11:07.670 align:start position:0%
designed specifically for your brand. If
you've<00:11:05.520><c> got</c><00:11:05.760><c> that,</c><00:11:06.360><c> great.</c><00:11:07.000><c> Drop</c><00:11:07.320><c> it</c><00:11:07.440><c> into</c>

00:11:07.670 --> 00:11:07.680 align:start position:0%
you've got that, great. Drop it into
 

00:11:07.680 --> 00:11:09.550 align:start position:0%
you've got that, great. Drop it into
your<00:11:07.800><c> project</c><00:11:08.240><c> folder,</c><00:11:08.760><c> and</c><00:11:08.880><c> you're</c><00:11:09.040><c> set.</c>

00:11:09.550 --> 00:11:09.560 align:start position:0%
your project folder, and you're set.
 

00:11:09.560 --> 00:11:11.670 align:start position:0%
your project folder, and you're set.
Just<00:11:09.839><c> tell</c><00:11:10.040><c> Claude</c><00:11:10.480><c> what</c><00:11:10.800><c> and</c><00:11:11.000><c> where</c><00:11:11.240><c> it</c><00:11:11.360><c> is,</c>

00:11:11.670 --> 00:11:11.680 align:start position:0%
Just tell Claude what and where it is,
 

00:11:11.680 --> 00:11:13.430 align:start position:0%
Just tell Claude what and where it is,
and<00:11:11.880><c> what</c><00:11:12.080><c> to</c><00:11:12.160><c> do</c><00:11:12.280><c> with</c><00:11:12.520><c> it.</c>

00:11:13.430 --> 00:11:13.440 align:start position:0%
and what to do with it.
 

00:11:13.440 --> 00:11:14.990 align:start position:0%
and what to do with it.
But<00:11:13.839><c> many</c><00:11:14.200><c> people</c><00:11:14.520><c> don't</c><00:11:14.760><c> have</c><00:11:14.920><c> a</c>

00:11:14.990 --> 00:11:15.000 align:start position:0%
But many people don't have a
 

00:11:15.000 --> 00:11:17.230 align:start position:0%
But many people don't have a
professional<00:11:15.560><c> photo</c><00:11:15.839><c> shoot</c><00:11:16.120><c> budget.</c><00:11:16.760><c> So,</c><00:11:17.080><c> the</c>

00:11:17.230 --> 00:11:17.240 align:start position:0%
professional photo shoot budget. So, the
 

00:11:17.240 --> 00:11:20.310 align:start position:0%
professional photo shoot budget. So, the
next<00:11:17.600><c> best</c><00:11:17.920><c> thing</c><00:11:18.320><c> is</c><00:11:18.720><c> AI</c><00:11:19.280><c> image</c><00:11:19.800><c> and</c><00:11:20.000><c> video</c>

00:11:20.310 --> 00:11:20.320 align:start position:0%
next best thing is AI image and video
 

00:11:20.320 --> 00:11:22.310 align:start position:0%
next best thing is AI image and video
generation.<00:11:21.280><c> The</c><00:11:21.400><c> tools</c><00:11:21.760><c> are</c><00:11:21.880><c> good</c><00:11:22.040><c> enough</c>

00:11:22.310 --> 00:11:22.320 align:start position:0%
generation. The tools are good enough
 

00:11:22.320 --> 00:11:25.190 align:start position:0%
generation. The tools are good enough
now<00:11:22.800><c> that</c><00:11:23.120><c> used</c><00:11:23.680><c> right,</c><00:11:24.360><c> nobody</c><00:11:24.839><c> can</c><00:11:24.960><c> tell</c><00:11:25.120><c> the</c>

00:11:25.190 --> 00:11:25.200 align:start position:0%
now that used right, nobody can tell the
 

00:11:25.200 --> 00:11:28.190 align:start position:0%
now that used right, nobody can tell the
difference.<00:11:26.120><c> For</c><00:11:26.320><c> a</c><00:11:26.400><c> single</c><00:11:26.920><c> image,</c><00:11:27.480><c> ChatGPT</c>

00:11:28.190 --> 00:11:28.200 align:start position:0%
difference. For a single image, ChatGPT
 

00:11:28.200 --> 00:11:29.910 align:start position:0%
difference. For a single image, ChatGPT
is<00:11:28.320><c> the</c><00:11:28.440><c> fastest</c><00:11:28.920><c> path</c><00:11:29.480><c> if</c><00:11:29.640><c> you've</c><00:11:29.760><c> got</c><00:11:29.880><c> a</c>

00:11:29.910 --> 00:11:29.920 align:start position:0%
is the fastest path if you've got a
 

00:11:29.920 --> 00:11:32.310 align:start position:0%
is the fastest path if you've got a
subscription<00:11:30.480><c> already.</c><00:11:31.280><c> It's</c><00:11:31.520><c> latest</c><00:11:31.960><c> image</c>

00:11:32.310 --> 00:11:32.320 align:start position:0%
subscription already. It's latest image
 

00:11:32.320 --> 00:11:35.230 align:start position:0%
subscription already. It's latest image
model<00:11:32.680><c> is</c><00:11:32.920><c> excellent</c><00:11:33.440><c> for</c><00:11:33.600><c> photoreal</c><00:11:34.280><c> work,</c>

00:11:35.230 --> 00:11:35.240 align:start position:0%
model is excellent for photoreal work,
 

00:11:35.240 --> 00:11:38.150 align:start position:0%
model is excellent for photoreal work,
but<00:11:35.520><c> there's</c><00:11:35.680><c> a</c><00:11:35.720><c> catch.</c><00:11:36.600><c> Chat</c><00:11:36.880><c> GPT</c><00:11:37.360><c> can't</c><00:11:37.800><c> make</c>

00:11:38.150 --> 00:11:38.160 align:start position:0%
but there's a catch. Chat GPT can't make
 

00:11:38.160 --> 00:11:40.350 align:start position:0%
but there's a catch. Chat GPT can't make
video.<00:11:38.840><c> So,</c><00:11:39.000><c> if</c><00:11:39.120><c> your</c><00:11:39.240><c> site</c><00:11:39.520><c> needs</c><00:11:39.840><c> any</c><00:11:40.120><c> kind</c>

00:11:40.350 --> 00:11:40.360 align:start position:0%
video. So, if your site needs any kind
 

00:11:40.360 --> 00:11:42.590 align:start position:0%
video. So, if your site needs any kind
of<00:11:40.480><c> animation</c><00:11:41.120><c> like</c><00:11:41.360><c> the</c><00:11:41.480><c> hero</c><00:11:41.880><c> scroll</c><00:11:42.200><c> effect</c>

00:11:42.590 --> 00:11:42.600 align:start position:0%
of animation like the hero scroll effect
 

00:11:42.600 --> 00:11:45.470 align:start position:0%
of animation like the hero scroll effect
I'm<00:11:42.760><c> about</c><00:11:43.080><c> to</c><00:11:43.160><c> build,</c><00:11:43.880><c> Chat</c><00:11:44.120><c> GPT</c><00:11:44.600><c> alone</c><00:11:45.160><c> won't</c>

00:11:45.470 --> 00:11:45.480 align:start position:0%
I'm about to build, Chat GPT alone won't
 

00:11:45.480 --> 00:11:47.670 align:start position:0%
I'm about to build, Chat GPT alone won't
get<00:11:45.760><c> you</c><00:11:45.880><c> there.</c><00:11:46.520><c> That's</c><00:11:46.760><c> where</c><00:11:47.080><c> aggregator</c>

00:11:47.670 --> 00:11:47.680 align:start position:0%
get you there. That's where aggregator
 

00:11:47.680 --> 00:11:49.630 align:start position:0%
get you there. That's where aggregator
tools<00:11:47.960><c> come</c><00:11:48.200><c> in.</c><00:11:48.840><c> These</c><00:11:49.080><c> tools</c><00:11:49.360><c> give</c><00:11:49.520><c> you</c>

00:11:49.630 --> 00:11:49.640 align:start position:0%
tools come in. These tools give you
 

00:11:49.640 --> 00:11:52.030 align:start position:0%
tools come in. These tools give you
access<00:11:50.040><c> to</c><00:11:50.280><c> every</c><00:11:50.560><c> major</c><00:11:51.120><c> image</c><00:11:51.520><c> and</c><00:11:51.720><c> video</c>

00:11:52.030 --> 00:11:52.040 align:start position:0%
access to every major image and video
 

00:11:52.040 --> 00:11:55.190 align:start position:0%
access to every major image and video
generation<00:11:52.640><c> model</c><00:11:53.000><c> from</c><00:11:53.360><c> one</c><00:11:53.640><c> tab.</c><00:11:54.480><c> The</c><00:11:54.600><c> one</c><00:11:54.960><c> I</c>

00:11:55.190 --> 00:11:55.200 align:start position:0%
generation model from one tab. The one I
 

00:11:55.200 --> 00:11:57.870 align:start position:0%
generation model from one tab. The one I
use<00:11:55.600><c> is</c><00:11:55.760><c> 11</c><00:11:56.120><c> Labs.</c><00:11:56.760><c> 11</c><00:11:57.120><c> Labs</c><00:11:57.400><c> is</c><00:11:57.520><c> a</c><00:11:57.560><c> paid</c>

00:11:57.870 --> 00:11:57.880 align:start position:0%
use is 11 Labs. 11 Labs is a paid
 

00:11:57.880 --> 00:12:00.030 align:start position:0%
use is 11 Labs. 11 Labs is a paid
service,<00:11:58.280><c> but</c><00:11:58.440><c> their</c><00:11:58.560><c> plans</c><00:11:59.000><c> are</c><00:11:59.120><c> reasonable.</c>

00:12:00.030 --> 00:12:00.040 align:start position:0%
service, but their plans are reasonable.
 

00:12:00.040 --> 00:12:01.670 align:start position:0%
service, but their plans are reasonable.
And<00:12:00.120><c> if</c><00:12:00.240><c> you</c><00:12:00.400><c> use</c><00:12:00.640><c> the</c><00:12:00.720><c> 11</c><00:12:01.040><c> Labs</c><00:12:01.280><c> link</c><00:12:01.520><c> in</c><00:12:01.600><c> the</c>

00:12:01.670 --> 00:12:01.680 align:start position:0%
And if you use the 11 Labs link in the
 

00:12:01.680 --> 00:12:04.030 align:start position:0%
And if you use the 11 Labs link in the
description<00:12:02.160><c> below,</c><00:12:02.520><c> you'll</c><00:12:02.760><c> get</c><00:12:03.080><c> 50%</c><00:12:03.840><c> off</c>

00:12:04.030 --> 00:12:04.040 align:start position:0%
description below, you'll get 50% off
 

00:12:04.040 --> 00:12:06.070 align:start position:0%
description below, you'll get 50% off
your<00:12:04.200><c> first</c><00:12:04.560><c> month</c><00:12:04.840><c> of</c><00:12:05.000><c> the</c><00:12:05.120><c> creator</c><00:12:05.680><c> plan,</c>

00:12:06.070 --> 00:12:06.080 align:start position:0%
your first month of the creator plan,
 

00:12:06.080 --> 00:12:07.910 align:start position:0%
your first month of the creator plan,
which<00:12:06.320><c> gets</c><00:12:06.560><c> you</c><00:12:06.720><c> access</c><00:12:07.120><c> to</c><00:12:07.280><c> everything</c><00:12:07.800><c> I'm</c>

00:12:07.910 --> 00:12:07.920 align:start position:0%
which gets you access to everything I'm
 

00:12:07.920 --> 00:12:10.310 align:start position:0%
which gets you access to everything I'm
about<00:12:08.240><c> to</c><00:12:08.320><c> demonstrate.</c><00:12:09.280><c> Inside</c><00:12:09.720><c> 11</c><00:12:10.080><c> Labs</c>

00:12:10.310 --> 00:12:10.320 align:start position:0%
about to demonstrate. Inside 11 Labs
 

00:12:10.320 --> 00:12:12.390 align:start position:0%
about to demonstrate. Inside 11 Labs
here,<00:12:10.720><c> I</c><00:12:10.840><c> generate</c><00:12:11.280><c> an</c><00:12:11.400><c> image</c><00:12:11.840><c> with</c><00:12:12.080><c> Chat</c>

00:12:12.390 --> 00:12:12.400 align:start position:0%
here, I generate an image with Chat
 

00:12:12.400 --> 00:12:15.110 align:start position:0%
here, I generate an image with Chat
GPT's<00:12:13.120><c> image</c><00:12:13.480><c> model.</c>

00:12:15.110 --> 00:12:15.120 align:start position:0%
GPT's image model.
 

00:12:15.120 --> 00:12:17.110 align:start position:0%
GPT's image model.
Once<00:12:15.320><c> that</c><00:12:15.600><c> renders,</c><00:12:16.440><c> I'll</c><00:12:16.560><c> pick</c><00:12:16.840><c> one</c><00:12:16.960><c> of</c><00:12:17.000><c> the</c>

00:12:17.110 --> 00:12:17.120 align:start position:0%
Once that renders, I'll pick one of the
 

00:12:17.120 --> 00:12:19.870 align:start position:0%
Once that renders, I'll pick one of the
four<00:12:17.400><c> options,</c><00:12:18.400><c> and</c><00:12:18.520><c> then</c><00:12:18.840><c> drop</c><00:12:19.200><c> that</c><00:12:19.360><c> exact</c>

00:12:19.870 --> 00:12:19.880 align:start position:0%
four options, and then drop that exact
 

00:12:19.880 --> 00:12:22.310 align:start position:0%
four options, and then drop that exact
image<00:12:20.280><c> in</c><00:12:20.640><c> as</c><00:12:20.840><c> the</c><00:12:20.960><c> starting</c><00:12:21.440><c> frame</c><00:12:21.960><c> for</c>

00:12:22.310 --> 00:12:22.320 align:start position:0%
image in as the starting frame for
 

00:12:22.320 --> 00:12:24.430 align:start position:0%
image in as the starting frame for
Google's<00:12:22.880><c> VO3.1</c>

00:12:24.430 --> 00:12:24.440 align:start position:0%
Google's VO3.1
 

00:12:24.440 --> 00:12:26.990 align:start position:0%
Google's VO3.1
to<00:12:24.600><c> turn</c><00:12:24.880><c> it</c><00:12:25.000><c> into</c><00:12:25.320><c> a</c><00:12:25.400><c> video.</c><00:12:26.280><c> Then,</c><00:12:26.680><c> once</c><00:12:26.920><c> I</c>

00:12:26.990 --> 00:12:27.000 align:start position:0%
to turn it into a video. Then, once I
 

00:12:27.000 --> 00:12:28.510 align:start position:0%
to turn it into a video. Then, once I
get<00:12:27.120><c> the</c><00:12:27.240><c> output</c><00:12:27.560><c> for</c><00:12:27.680><c> that,</c><00:12:27.960><c> I'll</c><00:12:28.080><c> select</c><00:12:28.440><c> one</c>

00:12:28.510 --> 00:12:28.520 align:start position:0%
get the output for that, I'll select one
 

00:12:28.520 --> 00:12:31.150 align:start position:0%
get the output for that, I'll select one
of<00:12:28.600><c> the</c><00:12:28.720><c> options,</c><00:12:29.640><c> then</c><00:12:30.080><c> upscale</c><00:12:30.640><c> the</c><00:12:30.720><c> result</c>

00:12:31.150 --> 00:12:31.160 align:start position:0%
of the options, then upscale the result
 

00:12:31.160 --> 00:12:35.030 align:start position:0%
of the options, then upscale the result
with<00:12:31.440><c> Topaz,</c><00:12:32.680><c> all</c><00:12:32.920><c> without</c><00:12:33.320><c> leaving</c><00:12:33.600><c> the</c><00:12:33.680><c> tab.</c>

00:12:35.030 --> 00:12:35.040 align:start position:0%
with Topaz, all without leaving the tab.
 

00:12:35.040 --> 00:12:36.430 align:start position:0%
with Topaz, all without leaving the tab.
That's<00:12:35.320><c> the</c><00:12:35.440><c> workflow</c><00:12:35.839><c> we're</c><00:12:36.040><c> using</c><00:12:36.320><c> to</c>

00:12:36.430 --> 00:12:36.440 align:start position:0%
That's the workflow we're using to
 

00:12:36.440 --> 00:12:38.230 align:start position:0%
That's the workflow we're using to
create<00:12:36.720><c> the</c><00:12:36.800><c> hero</c><00:12:37.120><c> asset</c><00:12:37.480><c> for</c><00:12:37.600><c> our</c><00:12:37.720><c> steakhouse</c>

00:12:38.230 --> 00:12:38.240 align:start position:0%
create the hero asset for our steakhouse
 

00:12:38.240 --> 00:12:40.030 align:start position:0%
create the hero asset for our steakhouse
here.<00:12:38.839><c> Here's</c><00:12:39.080><c> the</c><00:12:39.160><c> trick</c><00:12:39.440><c> that</c><00:12:39.560><c> makes</c><00:12:39.800><c> this</c>

00:12:40.030 --> 00:12:40.040 align:start position:0%
here. Here's the trick that makes this
 

00:12:40.040 --> 00:12:42.430 align:start position:0%
here. Here's the trick that makes this
fast.<00:12:40.839><c> You</c><00:12:41.040><c> don't</c><00:12:41.400><c> have</c><00:12:41.680><c> to</c><00:12:41.839><c> write</c><00:12:42.040><c> the</c><00:12:42.160><c> image</c>

00:12:42.430 --> 00:12:42.440 align:start position:0%
fast. You don't have to write the image
 

00:12:42.440 --> 00:12:44.390 align:start position:0%
fast. You don't have to write the image
prompt<00:12:42.720><c> yourself.</c><00:12:43.480><c> Claude</c><00:12:43.839><c> already</c><00:12:44.160><c> knows</c>

00:12:44.390 --> 00:12:44.400 align:start position:0%
prompt yourself. Claude already knows
 

00:12:44.400 --> 00:12:46.870 align:start position:0%
prompt yourself. Claude already knows
your<00:12:44.560><c> project,</c><00:12:45.280><c> so</c><00:12:45.600><c> you</c><00:12:45.720><c> can</c><00:12:45.960><c> ask</c><00:12:46.320><c> Claude</c><00:12:46.720><c> to</c>

00:12:46.870 --> 00:12:46.880 align:start position:0%
your project, so you can ask Claude to
 

00:12:46.880 --> 00:12:48.710 align:start position:0%
your project, so you can ask Claude to
write<00:12:47.080><c> the</c><00:12:47.240><c> image</c><00:12:47.520><c> generation</c><00:12:48.040><c> prompt</c><00:12:48.440><c> for</c>

00:12:48.710 --> 00:12:48.720 align:start position:0%
write the image generation prompt for
 

00:12:48.720 --> 00:12:50.829 align:start position:0%
write the image generation prompt for
you.<00:12:49.280><c> You</c><00:12:49.440><c> paste</c><00:12:49.800><c> that</c><00:12:50.040><c> prompt</c><00:12:50.440><c> into</c><00:12:50.680><c> your</c>

00:12:50.829 --> 00:12:50.839 align:start position:0%
you. You paste that prompt into your
 

00:12:50.839 --> 00:12:52.829 align:start position:0%
you. You paste that prompt into your
image<00:12:51.160><c> generator,</c><00:12:52.040><c> and</c><00:12:52.200><c> you</c><00:12:52.320><c> get</c><00:12:52.560><c> something</c>

00:12:52.829 --> 00:12:52.839 align:start position:0%
image generator, and you get something
 

00:12:52.839 --> 00:12:54.150 align:start position:0%
image generator, and you get something
that<00:12:52.960><c> matches</c><00:12:53.280><c> your</c><00:12:53.400><c> brand</c><00:12:53.839><c> and</c><00:12:53.960><c> your</c>

00:12:54.150 --> 00:12:54.160 align:start position:0%
that matches your brand and your
 

00:12:54.160 --> 00:12:56.150 align:start position:0%
that matches your brand and your
existing<00:12:54.760><c> design</c><00:12:55.160><c> aesthetic</c><00:12:55.640><c> on</c><00:12:55.760><c> the</c><00:12:55.839><c> first</c>

00:12:56.150 --> 00:12:56.160 align:start position:0%
existing design aesthetic on the first
 

00:12:56.160 --> 00:12:58.990 align:start position:0%
existing design aesthetic on the first
try.<00:12:56.920><c> Once</c><00:12:57.160><c> you</c><00:12:57.280><c> have</c><00:12:57.480><c> your</c><00:12:57.640><c> asset,</c><00:12:58.560><c> drop</c><00:12:58.920><c> it</c>

00:12:58.990 --> 00:12:59.000 align:start position:0%
try. Once you have your asset, drop it
 

00:12:59.000 --> 00:13:00.870 align:start position:0%
try. Once you have your asset, drop it
into<00:12:59.120><c> your</c><00:12:59.280><c> project</c><00:12:59.680><c> folder,</c><00:13:00.160><c> and</c><00:13:00.360><c> Claude</c><00:13:00.720><c> has</c>

00:13:00.870 --> 00:13:00.880 align:start position:0%
into your project folder, and Claude has
 

00:13:00.880 --> 00:13:02.829 align:start position:0%
into your project folder, and Claude has
everything<00:13:01.200><c> it</c><00:13:01.320><c> needs.</c><00:13:02.000><c> Okay,</c><00:13:02.240><c> that</c><00:13:02.480><c> covers</c>

00:13:02.829 --> 00:13:02.839 align:start position:0%
everything it needs. Okay, that covers
 

00:13:02.839 --> 00:13:04.590 align:start position:0%
everything it needs. Okay, that covers
imagery.<00:13:03.680><c> But,</c><00:13:03.880><c> what</c><00:13:04.040><c> about</c><00:13:04.280><c> when</c><00:13:04.400><c> you</c><00:13:04.480><c> want</c>

00:13:04.590 --> 00:13:04.600 align:start position:0%
imagery. But, what about when you want
 

00:13:04.600 --> 00:13:06.350 align:start position:0%
imagery. But, what about when you want
to<00:13:04.680><c> level</c><00:13:05.000><c> up</c><00:13:05.160><c> visuals</c><00:13:05.640><c> on</c><00:13:05.720><c> your</c><00:13:05.839><c> site</c><00:13:06.120><c> that</c>

00:13:06.350 --> 00:13:06.360 align:start position:0%
to level up visuals on your site that
 

00:13:06.360 --> 00:13:08.430 align:start position:0%
to level up visuals on your site that
aren't<00:13:06.800><c> photos</c><00:13:07.200><c> or</c><00:13:07.280><c> videos?</c>

00:13:08.430 --> 00:13:08.440 align:start position:0%
aren't photos or videos?
 

00:13:08.440 --> 00:13:11.550 align:start position:0%
aren't photos or videos?
That's<00:13:08.720><c> where</c><00:13:08.880><c> 21st.dev</c><00:13:10.200><c> comes</c><00:13:10.520><c> in.</c>

00:13:11.550 --> 00:13:11.560 align:start position:0%
That's where 21st.dev comes in.
 

00:13:11.560 --> 00:13:14.470 align:start position:0%
That's where 21st.dev comes in.
21st.dev<00:13:12.560><c> is</c><00:13:12.720><c> a</c><00:13:12.800><c> library</c><00:13:13.400><c> of</c><00:13:13.560><c> pre-made</c><00:13:14.120><c> web</c>

00:13:14.470 --> 00:13:14.480 align:start position:0%
21st.dev is a library of pre-made web
 

00:13:14.480 --> 00:13:17.790 align:start position:0%
21st.dev is a library of pre-made web
components,<00:13:15.560><c> animations,</c><00:13:16.520><c> scroll</c><00:13:16.920><c> effects,</c>

00:13:17.790 --> 00:13:17.800 align:start position:0%
components, animations, scroll effects,
 

00:13:17.800 --> 00:13:20.190 align:start position:0%
components, animations, scroll effects,
buttons,<00:13:18.520><c> and</c><00:13:18.680><c> more.</c><00:13:19.240><c> All</c><00:13:19.480><c> built</c><00:13:19.760><c> by</c><00:13:19.960><c> real</c>

00:13:20.190 --> 00:13:20.200 align:start position:0%
buttons, and more. All built by real
 

00:13:20.200 --> 00:13:23.550 align:start position:0%
buttons, and more. All built by real
developers,<00:13:21.160><c> and</c><00:13:21.360><c> all</c><00:13:21.600><c> free</c><00:13:22.080><c> to</c><00:13:22.240><c> grab.</c>

00:13:23.550 --> 00:13:23.560 align:start position:0%
developers, and all free to grab.
 

00:13:23.560 --> 00:13:26.710 align:start position:0%
developers, and all free to grab.
You<00:13:23.640><c> can</c><00:13:23.800><c> use</c><00:13:24.000><c> 21st.dev</c><00:13:25.280><c> two</c><00:13:25.600><c> ways.</c><00:13:26.480><c> You</c><00:13:26.600><c> can</c>

00:13:26.710 --> 00:13:26.720 align:start position:0%
You can use 21st.dev two ways. You can
 

00:13:26.720 --> 00:13:28.830 align:start position:0%
You can use 21st.dev two ways. You can
browse<00:13:27.000><c> around</c><00:13:27.320><c> for</c><00:13:27.480><c> visual</c><00:13:27.960><c> inspiration</c><00:13:28.680><c> if</c>

00:13:28.830 --> 00:13:28.840 align:start position:0%
browse around for visual inspiration if
 

00:13:28.840 --> 00:13:30.110 align:start position:0%
browse around for visual inspiration if
you're<00:13:28.960><c> not</c><00:13:29.160><c> sure</c><00:13:29.320><c> what</c><00:13:29.440><c> you</c><00:13:29.560><c> want</c><00:13:29.760><c> to</c><00:13:29.880><c> add</c><00:13:30.040><c> to</c>

00:13:30.110 --> 00:13:30.120 align:start position:0%
you're not sure what you want to add to
 

00:13:30.120 --> 00:13:32.430 align:start position:0%
you're not sure what you want to add to
your<00:13:30.240><c> site.</c><00:13:30.840><c> Or,</c><00:13:31.400><c> if</c><00:13:31.560><c> you</c><00:13:31.680><c> find</c><00:13:31.920><c> a</c><00:13:31.960><c> specific</c>

00:13:32.430 --> 00:13:32.440 align:start position:0%
your site. Or, if you find a specific
 

00:13:32.440 --> 00:13:34.830 align:start position:0%
your site. Or, if you find a specific
design<00:13:32.800><c> or</c><00:13:32.920><c> element</c><00:13:33.240><c> you</c><00:13:33.360><c> like,</c><00:13:34.080><c> you</c><00:13:34.200><c> can</c><00:13:34.400><c> copy</c>

00:13:34.830 --> 00:13:34.840 align:start position:0%
design or element you like, you can copy
 

00:13:34.840 --> 00:13:37.430 align:start position:0%
design or element you like, you can copy
a<00:13:34.960><c> prompt</c><00:13:35.560><c> that</c><00:13:35.760><c> tells</c><00:13:36.080><c> Claude</c><00:13:36.560><c> exactly</c><00:13:37.320><c> how</c>

00:13:37.430 --> 00:13:37.440 align:start position:0%
a prompt that tells Claude exactly how
 

00:13:37.440 --> 00:13:40.030 align:start position:0%
a prompt that tells Claude exactly how
to<00:13:37.600><c> recreate</c><00:13:38.200><c> it</c><00:13:38.400><c> in</c><00:13:38.560><c> your</c><00:13:38.720><c> project.</c><00:13:39.720><c> For</c><00:13:39.920><c> our</c>

00:13:40.030 --> 00:13:40.040 align:start position:0%
to recreate it in your project. For our
 

00:13:40.040 --> 00:13:41.470 align:start position:0%
to recreate it in your project. For our
build,<00:13:40.400><c> I</c><00:13:40.480><c> want</c><00:13:40.760><c> to</c><00:13:40.840><c> build</c><00:13:41.120><c> something</c>

00:13:41.470 --> 00:13:41.480 align:start position:0%
build, I want to build something
 

00:13:41.480 --> 00:13:44.150 align:start position:0%
build, I want to build something
visually<00:13:42.200><c> striking</c><00:13:42.800><c> for</c><00:13:42.960><c> the</c><00:13:43.080><c> hero</c><00:13:43.400><c> section.</c>

00:13:44.150 --> 00:13:44.160 align:start position:0%
visually striking for the hero section.
 

00:13:44.160 --> 00:13:46.110 align:start position:0%
visually striking for the hero section.
A<00:13:44.280><c> really</c><00:13:44.600><c> cool</c><00:13:44.920><c> image</c><00:13:45.240><c> effect</c><00:13:45.680><c> that</c><00:13:45.840><c> makes</c>

00:13:46.110 --> 00:13:46.120 align:start position:0%
A really cool image effect that makes
 

00:13:46.120 --> 00:13:48.230 align:start position:0%
A really cool image effect that makes
the<00:13:46.200><c> site</c><00:13:46.520><c> feel</c><00:13:46.760><c> premium</c><00:13:47.440><c> right</c><00:13:47.800><c> when</c><00:13:47.960><c> someone</c>

00:13:48.230 --> 00:13:48.240 align:start position:0%
the site feel premium right when someone
 

00:13:48.240 --> 00:13:51.110 align:start position:0%
the site feel premium right when someone
lands<00:13:48.560><c> on</c><00:13:48.720><c> it.</c><00:13:49.400><c> Scrolling</c><00:13:49.840><c> through</c><00:13:50.080><c> 21st.dev</c>

00:13:51.110 --> 00:13:51.120 align:start position:0%
lands on it. Scrolling through 21st.dev
 

00:13:51.120 --> 00:13:53.470 align:start position:0%
lands on it. Scrolling through 21st.dev
here,<00:13:51.520><c> I</c><00:13:51.600><c> find</c><00:13:51.960><c> a</c><00:13:52.080><c> smooth</c><00:13:52.640><c> scroll</c><00:13:53.160><c> image</c>

00:13:53.470 --> 00:13:53.480 align:start position:0%
here, I find a smooth scroll image
 

00:13:53.480 --> 00:13:55.950 align:start position:0%
here, I find a smooth scroll image
component<00:13:54.000><c> I</c><00:13:54.080><c> like.</c><00:13:54.880><c> So,</c><00:13:55.240><c> I'll</c><00:13:55.400><c> click</c><00:13:55.680><c> the</c>

00:13:55.950 --> 00:13:55.960 align:start position:0%
component I like. So, I'll click the
 

00:13:55.960 --> 00:13:58.310 align:start position:0%
component I like. So, I'll click the
copy<00:13:56.560><c> prompt</c><00:13:57.040><c> button</c><00:13:57.400><c> on</c><00:13:57.600><c> it</c><00:13:57.760><c> and</c><00:13:58.000><c> back</c><00:13:58.240><c> in</c>

00:13:58.310 --> 00:13:58.320 align:start position:0%
copy prompt button on it and back in
 

00:13:58.320 --> 00:14:01.150 align:start position:0%
copy prompt button on it and back in
Claude<00:13:58.600><c> code,</c><00:13:59.120><c> I'll</c><00:13:59.280><c> paste</c><00:13:59.560><c> that</c><00:13:59.760><c> prompt</c><00:14:00.120><c> in,</c>

00:14:01.150 --> 00:14:01.160 align:start position:0%
Claude code, I'll paste that prompt in,
 

00:14:01.160 --> 00:14:03.670 align:start position:0%
Claude code, I'll paste that prompt in,
add<00:14:01.480><c> the</c><00:14:01.600><c> stake</c><00:14:01.920><c> video</c><00:14:02.240><c> we</c><00:14:02.360><c> just</c><00:14:02.560><c> generated,</c>

00:14:03.670 --> 00:14:03.680 align:start position:0%
add the stake video we just generated,
 

00:14:03.680 --> 00:14:05.870 align:start position:0%
add the stake video we just generated,
and<00:14:03.880><c> tell</c><00:14:04.160><c> Claude</c><00:14:04.640><c> to</c><00:14:04.800><c> use</c><00:14:05.040><c> the</c><00:14:05.160><c> component</c><00:14:05.800><c> to</c>

00:14:05.870 --> 00:14:05.880 align:start position:0%
and tell Claude to use the component to
 

00:14:05.880 --> 00:14:08.150 align:start position:0%
and tell Claude to use the component to
build<00:14:06.120><c> out</c><00:14:06.320><c> the</c><00:14:06.400><c> hero.</c>

00:14:08.150 --> 00:14:08.160 align:start position:0%
build out the hero.
 

00:14:08.160 --> 00:14:10.390 align:start position:0%
build out the hero.
Now,<00:14:08.400><c> watch</c><00:14:08.680><c> what</c><00:14:08.800><c> Claude</c><00:14:09.120><c> does</c><00:14:09.320><c> next.</c>

00:14:10.390 --> 00:14:10.400 align:start position:0%
Now, watch what Claude does next.
 

00:14:10.400 --> 00:14:11.950 align:start position:0%
Now, watch what Claude does next.
It<00:14:10.480><c> pushes</c><00:14:10.840><c> back.</c>

00:14:11.950 --> 00:14:11.960 align:start position:0%
It pushes back.
 

00:14:11.960 --> 00:14:14.310 align:start position:0%
It pushes back.
The<00:14:12.080><c> 21st.dev</c><00:14:13.040><c> component</c><00:14:13.520><c> I</c><00:14:13.600><c> picked</c><00:14:13.960><c> is</c><00:14:14.080><c> for</c><00:14:14.240><c> a</c>

00:14:14.310 --> 00:14:14.320 align:start position:0%
The 21st.dev component I picked is for a
 

00:14:14.320 --> 00:14:17.230 align:start position:0%
The 21st.dev component I picked is for a
system<00:14:14.720><c> called</c><00:14:15.280><c> React.</c><00:14:16.320><c> React</c><00:14:16.720><c> is</c><00:14:16.840><c> a</c><00:14:16.880><c> more</c>

00:14:17.230 --> 00:14:17.240 align:start position:0%
system called React. React is a more
 

00:14:17.240 --> 00:14:18.950 align:start position:0%
system called React. React is a more
complex<00:14:17.920><c> setup</c><00:14:18.120><c> than</c><00:14:18.280><c> what</c><00:14:18.440><c> we're</c><00:14:18.600><c> using</c>

00:14:18.950 --> 00:14:18.960 align:start position:0%
complex setup than what we're using
 

00:14:18.960 --> 00:14:21.350 align:start position:0%
complex setup than what we're using
here.<00:14:19.600><c> Our</c><00:14:19.800><c> project</c><00:14:20.280><c> is</c><00:14:20.400><c> a</c><00:14:20.480><c> simple</c><00:14:20.920><c> static</c>

00:14:21.350 --> 00:14:21.360 align:start position:0%
here. Our project is a simple static
 

00:14:21.360 --> 00:14:23.950 align:start position:0%
here. Our project is a simple static
site,<00:14:21.680><c> so</c><00:14:21.840><c> Claude</c><00:14:22.280><c> says</c><00:14:22.800><c> no</c><00:14:23.440><c> to</c><00:14:23.560><c> dropping</c><00:14:23.880><c> in</c>

00:14:23.950 --> 00:14:23.960 align:start position:0%
site, so Claude says no to dropping in
 

00:14:23.960 --> 00:14:25.990 align:start position:0%
site, so Claude says no to dropping in
the<00:14:24.040><c> React</c><00:14:24.400><c> component</c><00:14:25.000><c> as</c><00:14:25.360><c> is</c><00:14:25.640><c> because</c><00:14:25.920><c> it</c>

00:14:25.990 --> 00:14:26.000 align:start position:0%
the React component as is because it
 

00:14:26.000 --> 00:14:27.630 align:start position:0%
the React component as is because it
would<00:14:26.120><c> change</c><00:14:26.520><c> how</c><00:14:26.680><c> our</c><00:14:26.840><c> whole</c><00:14:27.120><c> project</c>

00:14:27.630 --> 00:14:27.640 align:start position:0%
would change how our whole project
 

00:14:27.640 --> 00:14:29.550 align:start position:0%
would change how our whole project
works.<00:14:28.560><c> For</c><00:14:28.640><c> your</c><00:14:28.800><c> project,</c><00:14:29.280><c> you</c><00:14:29.400><c> might</c>

00:14:29.550 --> 00:14:29.560 align:start position:0%
works. For your project, you might
 

00:14:29.560 --> 00:14:31.070 align:start position:0%
works. For your project, you might
actually<00:14:29.839><c> want</c><00:14:30.120><c> something</c><00:14:30.440><c> more</c><00:14:30.600><c> complex</c>

00:14:31.070 --> 00:14:31.080 align:start position:0%
actually want something more complex
 

00:14:31.080 --> 00:14:32.590 align:start position:0%
actually want something more complex
than<00:14:31.200><c> what</c><00:14:31.320><c> we're</c><00:14:31.440><c> doing</c><00:14:31.680><c> here,</c><00:14:32.240><c> like</c><00:14:32.520><c> a</c>

00:14:32.590 --> 00:14:32.600 align:start position:0%
than what we're doing here, like a
 

00:14:32.600 --> 00:14:34.710 align:start position:0%
than what we're doing here, like a
dashboard,<00:14:33.280><c> a</c><00:14:33.360><c> checkout</c><00:14:33.839><c> flow,</c><00:14:34.200><c> or</c><00:14:34.400><c> a</c><00:14:34.440><c> site</c>

00:14:34.710 --> 00:14:34.720 align:start position:0%
dashboard, a checkout flow, or a site
 

00:14:34.720 --> 00:14:36.750 align:start position:0%
dashboard, a checkout flow, or a site
with<00:14:34.839><c> a</c><00:14:34.920><c> login.</c><00:14:35.760><c> In</c><00:14:35.880><c> that</c><00:14:36.040><c> case,</c><00:14:36.280><c> Claude</c><00:14:36.600><c> would</c>

00:14:36.750 --> 00:14:36.760 align:start position:0%
with a login. In that case, Claude would
 

00:14:36.760 --> 00:14:38.350 align:start position:0%
with a login. In that case, Claude would
say<00:14:36.920><c> yes</c><00:14:37.200><c> to</c><00:14:37.320><c> React</c><00:14:37.720><c> because</c><00:14:37.960><c> it</c><00:14:38.080><c> fits</c><00:14:38.240><c> your</c>

00:14:38.350 --> 00:14:38.360 align:start position:0%
say yes to React because it fits your
 

00:14:38.360 --> 00:14:40.390 align:start position:0%
say yes to React because it fits your
project.<00:14:39.200><c> The</c><00:14:39.320><c> point</c><00:14:39.600><c> is</c><00:14:39.760><c> that</c><00:14:40.000><c> Claude</c>

00:14:40.390 --> 00:14:40.400 align:start position:0%
project. The point is that Claude
 

00:14:40.400 --> 00:14:42.470 align:start position:0%
project. The point is that Claude
protects<00:14:40.880><c> the</c><00:14:41.000><c> architecture</c><00:14:41.680><c> you</c><00:14:41.760><c> set</c><00:14:41.960><c> up.</c><00:14:42.360><c> It</c>

00:14:42.470 --> 00:14:42.480 align:start position:0%
protects the architecture you set up. It
 

00:14:42.480 --> 00:14:43.990 align:start position:0%
protects the architecture you set up. It
doesn't<00:14:42.760><c> break</c><00:14:43.040><c> things</c><00:14:43.360><c> just</c><00:14:43.520><c> because</c><00:14:43.839><c> you</c>

00:14:43.990 --> 00:14:44.000 align:start position:0%
doesn't break things just because you
 

00:14:44.000 --> 00:14:45.270 align:start position:0%
doesn't break things just because you
asked.

00:14:45.270 --> 00:14:45.280 align:start position:0%
asked.
 

00:14:45.280 --> 00:14:47.510 align:start position:0%
asked.
For<00:14:45.400><c> our</c><00:14:45.480><c> static</c><00:14:45.800><c> site,</c><00:14:46.200><c> single</c><00:14:46.560><c> file</c><00:14:46.920><c> HTML</c><00:14:47.440><c> is</c>

00:14:47.510 --> 00:14:47.520 align:start position:0%
For our static site, single file HTML is
 

00:14:47.520 --> 00:14:49.310 align:start position:0%
For our static site, single file HTML is
the<00:14:47.640><c> right</c><00:14:47.880><c> choice</c><00:14:48.240><c> and</c><00:14:48.360><c> you'll</c><00:14:48.480><c> see</c><00:14:48.720><c> why</c><00:14:49.200><c> when</c>

00:14:49.310 --> 00:14:49.320 align:start position:0%
the right choice and you'll see why when
 

00:14:49.320 --> 00:14:51.350 align:start position:0%
the right choice and you'll see why when
we<00:14:49.400><c> deploy</c><00:14:49.839><c> in</c><00:14:49.960><c> chapter</c><00:14:50.400><c> eight.</c>

00:14:51.350 --> 00:14:51.360 align:start position:0%
we deploy in chapter eight.
 

00:14:51.360 --> 00:14:53.390 align:start position:0%
we deploy in chapter eight.
So,<00:14:51.760><c> Claude</c><00:14:52.200><c> rebuilds</c><00:14:52.600><c> the</c><00:14:52.680><c> hero</c><00:14:53.040><c> without</c>

00:14:53.390 --> 00:14:53.400 align:start position:0%
So, Claude rebuilds the hero without
 

00:14:53.400 --> 00:14:55.430 align:start position:0%
So, Claude rebuilds the hero without
React<00:14:54.080><c> and</c><00:14:54.320><c> the</c><00:14:54.440><c> first</c><00:14:54.760><c> attempt</c><00:14:55.120><c> doesn't</c>

00:14:55.430 --> 00:14:55.440 align:start position:0%
React and the first attempt doesn't
 

00:14:55.440 --> 00:14:57.430 align:start position:0%
React and the first attempt doesn't
work.<00:14:55.920><c> The</c><00:14:56.040><c> video</c><00:14:56.360><c> shows</c><00:14:56.640><c> up</c><00:14:56.800><c> on</c><00:14:56.960><c> the</c><00:14:57.080><c> page,</c>

00:14:57.430 --> 00:14:57.440 align:start position:0%
work. The video shows up on the page,
 

00:14:57.440 --> 00:14:59.870 align:start position:0%
work. The video shows up on the page,
but<00:14:57.800><c> it</c><00:14:57.960><c> isn't</c><00:14:58.280><c> scrolling.</c><00:14:59.320><c> So,</c><00:14:59.520><c> I</c><00:14:59.600><c> tell</c>

00:14:59.870 --> 00:14:59.880 align:start position:0%
but it isn't scrolling. So, I tell
 

00:14:59.880 --> 00:15:02.030 align:start position:0%
but it isn't scrolling. So, I tell
Claude<00:15:00.200><c> what's</c><00:15:00.360><c> happening.</c><00:15:01.200><c> It</c><00:15:01.360><c> finds</c><00:15:01.800><c> two</c>

00:15:02.030 --> 00:15:02.040 align:start position:0%
Claude what's happening. It finds two
 

00:15:02.040 --> 00:15:04.910 align:start position:0%
Claude what's happening. It finds two
bugs<00:15:02.839><c> and</c><00:15:03.080><c> fixes</c><00:15:03.520><c> them.</c><00:15:04.280><c> The</c><00:15:04.360><c> page</c><00:15:04.640><c> is</c><00:15:04.720><c> still</c>

00:15:04.910 --> 00:15:04.920 align:start position:0%
bugs and fixes them. The page is still
 

00:15:04.920 --> 00:15:06.990 align:start position:0%
bugs and fixes them. The page is still
broken<00:15:05.320><c> though,</c><00:15:05.560><c> so</c><00:15:05.920><c> I</c><00:15:06.040><c> ask</c><00:15:06.360><c> Claude</c><00:15:06.640><c> to</c><00:15:06.720><c> dig</c>

00:15:06.990 --> 00:15:07.000 align:start position:0%
broken though, so I ask Claude to dig
 

00:15:07.000 --> 00:15:08.150 align:start position:0%
broken though, so I ask Claude to dig
deeper.

00:15:08.150 --> 00:15:08.160 align:start position:0%
deeper.
 

00:15:08.160 --> 00:15:10.150 align:start position:0%
deeper.
It<00:15:08.360><c> actually</c><00:15:08.839><c> opens</c><00:15:09.120><c> the</c><00:15:09.200><c> page</c><00:15:09.440><c> itself</c><00:15:09.880><c> in</c><00:15:10.040><c> my</c>

00:15:10.150 --> 00:15:10.160 align:start position:0%
It actually opens the page itself in my
 

00:15:10.160 --> 00:15:12.910 align:start position:0%
It actually opens the page itself in my
browser,<00:15:11.040><c> inspects</c><00:15:11.520><c> what's</c><00:15:11.680><c> happening</c><00:15:12.120><c> live,</c>

00:15:12.910 --> 00:15:12.920 align:start position:0%
browser, inspects what's happening live,
 

00:15:12.920 --> 00:15:15.190 align:start position:0%
browser, inspects what's happening live,
and<00:15:13.120><c> finds</c><00:15:13.560><c> the</c><00:15:13.680><c> real</c><00:15:14.000><c> problem.</c>

00:15:15.190 --> 00:15:15.200 align:start position:0%
and finds the real problem.
 

00:15:15.200 --> 00:15:17.710 align:start position:0%
and finds the real problem.
Three<00:15:15.520><c> layers</c><00:15:15.839><c> in,</c><00:15:16.360><c> it</c><00:15:16.560><c> works.</c><00:15:17.320><c> The</c><00:15:17.400><c> lesson</c>

00:15:17.710 --> 00:15:17.720 align:start position:0%
Three layers in, it works. The lesson
 

00:15:17.720 --> 00:15:19.270 align:start position:0%
Three layers in, it works. The lesson
here<00:15:17.960><c> is</c><00:15:18.080><c> to</c><00:15:18.200><c> keep</c><00:15:18.480><c> pushing</c><00:15:18.800><c> when</c><00:15:18.920><c> something</c>

00:15:19.270 --> 00:15:19.280 align:start position:0%
here is to keep pushing when something
 

00:15:19.280 --> 00:15:21.790 align:start position:0%
here is to keep pushing when something
breaks.<00:15:20.000><c> Just</c><00:15:20.200><c> explain</c><00:15:20.640><c> what</c><00:15:20.880><c> went</c><00:15:21.160><c> wrong</c><00:15:21.600><c> and</c>

00:15:21.790 --> 00:15:21.800 align:start position:0%
breaks. Just explain what went wrong and
 

00:15:21.800 --> 00:15:24.030 align:start position:0%
breaks. Just explain what went wrong and
what<00:15:21.960><c> you</c><00:15:22.080><c> were</c><00:15:22.160><c> expecting</c><00:15:22.680><c> instead.</c><00:15:23.760><c> Claude</c>

00:15:24.030 --> 00:15:24.040 align:start position:0%
what you were expecting instead. Claude
 

00:15:24.040 --> 00:15:25.950 align:start position:0%
what you were expecting instead. Claude
can<00:15:24.320><c> usually</c><00:15:24.880><c> solve</c><00:15:25.240><c> it</c><00:15:25.400><c> if</c><00:15:25.560><c> you</c><00:15:25.640><c> give</c><00:15:25.800><c> it</c><00:15:25.880><c> the</c>

00:15:25.950 --> 00:15:25.960 align:start position:0%
can usually solve it if you give it the
 

00:15:25.960 --> 00:15:27.790 align:start position:0%
can usually solve it if you give it the
chance<00:15:26.280><c> to</c><00:15:26.400><c> look</c><00:15:26.640><c> closer.</c>

00:15:27.790 --> 00:15:27.800 align:start position:0%
chance to look closer.
 

00:15:27.800 --> 00:15:30.110 align:start position:0%
chance to look closer.
And<00:15:28.000><c> there</c><00:15:28.240><c> it</c><00:15:28.360><c> is,</c><00:15:28.720><c> a</c><00:15:28.800><c> cinematic</c><00:15:29.440><c> hero</c>

00:15:30.110 --> 00:15:30.120 align:start position:0%
And there it is, a cinematic hero
 

00:15:30.120 --> 00:15:32.750 align:start position:0%
And there it is, a cinematic hero
scroll-driven,<00:15:31.440><c> exactly</c><00:15:32.160><c> like</c><00:15:32.360><c> we</c><00:15:32.480><c> asked</c>

00:15:32.750 --> 00:15:32.760 align:start position:0%
scroll-driven, exactly like we asked
 

00:15:32.760 --> 00:15:34.150 align:start position:0%
scroll-driven, exactly like we asked
for.

00:15:34.150 --> 00:15:34.160 align:start position:0%
for.
 

00:15:34.160 --> 00:15:36.750 align:start position:0%
for.
Next,<00:15:34.600><c> we</c><00:15:34.720><c> do</c><00:15:34.960><c> one</c><00:15:35.160><c> more</c><00:15:35.360><c> pass</c><00:15:35.720><c> on</c><00:15:35.840><c> the</c><00:15:35.920><c> hero,</c>

00:15:36.750 --> 00:15:36.760 align:start position:0%
Next, we do one more pass on the hero,
 

00:15:36.760 --> 00:15:38.590 align:start position:0%
Next, we do one more pass on the hero,
making<00:15:37.120><c> the</c><00:15:37.240><c> text</c><00:15:37.640><c> readable</c><00:15:38.120><c> against</c><00:15:38.520><c> the</c>

00:15:38.590 --> 00:15:38.600 align:start position:0%
making the text readable against the
 

00:15:38.600 --> 00:15:40.470 align:start position:0%
making the text readable against the
bright<00:15:39.000><c> background</c><00:15:39.480><c> image.</c>

00:15:40.470 --> 00:15:40.480 align:start position:0%
bright background image.
 

00:15:40.480 --> 00:15:42.470 align:start position:0%
bright background image.
And<00:15:40.600><c> making</c><00:15:40.880><c> the</c><00:15:40.960><c> hero</c><00:15:41.320><c> reveal</c><00:15:41.640><c> its</c><00:15:41.760><c> content</c>

00:15:42.470 --> 00:15:42.480 align:start position:0%
And making the hero reveal its content
 

00:15:42.480 --> 00:15:44.550 align:start position:0%
And making the hero reveal its content
as<00:15:42.680><c> the</c><00:15:42.800><c> user</c><00:15:43.120><c> scrolls.</c>

00:15:44.550 --> 00:15:44.560 align:start position:0%
as the user scrolls.
 

00:15:44.560 --> 00:15:46.590 align:start position:0%
as the user scrolls.
The<00:15:44.680><c> key</c><00:15:45.000><c> thing</c><00:15:45.280><c> to</c><00:15:45.400><c> know</c><00:15:45.800><c> is</c><00:15:46.040><c> that</c><00:15:46.320><c> you</c><00:15:46.440><c> can</c>

00:15:46.590 --> 00:15:46.600 align:start position:0%
The key thing to know is that you can
 

00:15:46.600 --> 00:15:48.950 align:start position:0%
The key thing to know is that you can
keep<00:15:47.040><c> iterating</c><00:15:47.520><c> like</c><00:15:47.720><c> this</c><00:15:48.080><c> until</c><00:15:48.400><c> your</c><00:15:48.560><c> hero</c>

00:15:48.950 --> 00:15:48.960 align:start position:0%
keep iterating like this until your hero
 

00:15:48.960 --> 00:15:51.150 align:start position:0%
keep iterating like this until your hero
feels<00:15:49.360><c> right.</c><00:15:50.040><c> Once</c><00:15:50.240><c> your</c><00:15:50.360><c> hero</c><00:15:50.680><c> section</c><00:15:51.040><c> is</c>

00:15:51.150 --> 00:15:51.160 align:start position:0%
feels right. Once your hero section is
 

00:15:51.160 --> 00:15:53.510 align:start position:0%
feels right. Once your hero section is
locked<00:15:51.440><c> in,</c><00:15:52.120><c> it's</c><00:15:52.360><c> time</c><00:15:52.640><c> to</c><00:15:52.760><c> step</c><00:15:53.040><c> back</c><00:15:53.360><c> and</c>

00:15:53.510 --> 00:15:53.520 align:start position:0%
locked in, it's time to step back and
 

00:15:53.520 --> 00:15:55.030 align:start position:0%
locked in, it's time to step back and
check<00:15:53.760><c> yourself</c><00:15:54.200><c> against</c><00:15:54.640><c> the</c><00:15:54.760><c> bigger</c>

00:15:55.030 --> 00:15:55.040 align:start position:0%
check yourself against the bigger
 

00:15:55.040 --> 00:15:56.830 align:start position:0%
check yourself against the bigger
picture.

00:15:56.830 --> 00:15:56.840 align:start position:0%
picture.
 

00:15:56.840 --> 00:15:58.430 align:start position:0%
picture.
Once<00:15:57.080><c> you've</c><00:15:57.240><c> got</c><00:15:57.440><c> the</c><00:15:57.560><c> bones</c><00:15:57.920><c> of</c><00:15:58.040><c> your</c><00:15:58.160><c> site</c>

00:15:58.430 --> 00:15:58.440 align:start position:0%
Once you've got the bones of your site
 

00:15:58.440 --> 00:16:00.150 align:start position:0%
Once you've got the bones of your site
in<00:15:58.600><c> place,</c><00:15:59.040><c> you</c><00:15:59.160><c> should</c><00:15:59.400><c> grade</c><00:15:59.760><c> yourself</c>

00:16:00.150 --> 00:16:00.160 align:start position:0%
in place, you should grade yourself
 

00:16:00.160 --> 00:16:01.990 align:start position:0%
in place, you should grade yourself
against<00:16:00.560><c> the</c><00:16:00.640><c> original</c><00:16:01.120><c> checklist</c><00:16:01.640><c> before</c>

00:16:01.990 --> 00:16:02.000 align:start position:0%
against the original checklist before
 

00:16:02.000 --> 00:16:04.270 align:start position:0%
against the original checklist before
you<00:16:02.120><c> keep</c><00:16:02.400><c> polishing.</c><00:16:03.560><c> This</c><00:16:03.800><c> is</c><00:16:03.920><c> the</c><00:16:04.000><c> move</c>

00:16:04.270 --> 00:16:04.280 align:start position:0%
you keep polishing. This is the move
 

00:16:04.280 --> 00:16:05.990 align:start position:0%
you keep polishing. This is the move
that<00:16:04.440><c> separates</c><00:16:04.920><c> a</c><00:16:05.000><c> polished</c><00:16:05.480><c> result</c><00:16:05.800><c> from</c><00:16:05.960><c> a</c>

00:16:05.990 --> 00:16:06.000 align:start position:0%
that separates a polished result from a
 

00:16:06.000 --> 00:16:07.350 align:start position:0%
that separates a polished result from a
generic<00:16:06.440><c> one.</c>

00:16:07.350 --> 00:16:07.360 align:start position:0%
generic one.
 

00:16:07.360 --> 00:16:09.950 align:start position:0%
generic one.
You<00:16:07.480><c> can</c><00:16:07.600><c> grab</c><00:16:07.840><c> a</c><00:16:07.880><c> PDF</c><00:16:08.360><c> download</c><00:16:08.960><c> of</c><00:16:09.080><c> that</c><00:16:09.360><c> 10K</c>

00:16:09.950 --> 00:16:09.960 align:start position:0%
You can grab a PDF download of that 10K
 

00:16:09.960 --> 00:16:11.830 align:start position:0%
You can grab a PDF download of that 10K
website<00:16:10.440><c> checklist</c><00:16:10.960><c> using</c><00:16:11.240><c> the</c><00:16:11.360><c> link</c><00:16:11.640><c> in</c><00:16:11.760><c> the</c>

00:16:11.830 --> 00:16:11.840 align:start position:0%
website checklist using the link in the
 

00:16:11.840 --> 00:16:13.590 align:start position:0%
website checklist using the link in the
description<00:16:12.360><c> below.</c>

00:16:13.590 --> 00:16:13.600 align:start position:0%
description below.
 

00:16:13.600 --> 00:16:15.510 align:start position:0%
description below.
You<00:16:13.680><c> set</c><00:16:13.880><c> the</c><00:16:13.960><c> bar</c><00:16:14.280><c> high</c><00:16:14.520><c> at</c><00:16:14.600><c> the</c><00:16:14.680><c> start,</c><00:16:15.400><c> and</c>

00:16:15.510 --> 00:16:15.520 align:start position:0%
You set the bar high at the start, and
 

00:16:15.520 --> 00:16:17.750 align:start position:0%
You set the bar high at the start, and
now<00:16:15.840><c> you</c><00:16:16.000><c> check</c><00:16:16.280><c> yourself</c><00:16:16.680><c> against</c><00:16:17.120><c> it.</c><00:16:17.520><c> To</c><00:16:17.640><c> do</c>

00:16:17.750 --> 00:16:17.760 align:start position:0%
now you check yourself against it. To do
 

00:16:17.760 --> 00:16:20.110 align:start position:0%
now you check yourself against it. To do
this,<00:16:18.160><c> paste</c><00:16:18.520><c> that</c><00:16:18.680><c> checklist</c><00:16:19.280><c> into</c><00:16:19.520><c> Claude</c>

00:16:20.110 --> 00:16:20.120 align:start position:0%
this, paste that checklist into Claude
 

00:16:20.120 --> 00:16:22.110 align:start position:0%
this, paste that checklist into Claude
and<00:16:20.280><c> ask,</c><00:16:20.920><c> "Where</c><00:16:21.080><c> does</c><00:16:21.280><c> this</c><00:16:21.400><c> site</c><00:16:21.720><c> land</c>

00:16:22.110 --> 00:16:22.120 align:start position:0%
and ask, "Where does this site land
 

00:16:22.120 --> 00:16:24.390 align:start position:0%
and ask, "Where does this site land
against<00:16:22.560><c> each</c><00:16:22.760><c> of</c><00:16:22.840><c> these</c><00:16:23.040><c> criteria?"</c><00:16:24.200><c> Be</c>

00:16:24.390 --> 00:16:24.400 align:start position:0%
against each of these criteria?" Be
 

00:16:24.400 --> 00:16:26.350 align:start position:0%
against each of these criteria?" Be
honest.<00:16:25.040><c> In</c><00:16:25.200><c> my</c><00:16:25.320><c> case,</c><00:16:25.640><c> Claude</c><00:16:25.920><c> goes</c><00:16:26.120><c> through</c>

00:16:26.350 --> 00:16:26.360 align:start position:0%
honest. In my case, Claude goes through
 

00:16:26.360 --> 00:16:28.590 align:start position:0%
honest. In my case, Claude goes through
each<00:16:26.560><c> one,</c><00:16:26.960><c> calling</c><00:16:27.280><c> out</c><00:16:27.480><c> what's</c><00:16:27.760><c> strong,</c>

00:16:28.590 --> 00:16:28.600 align:start position:0%
each one, calling out what's strong,
 

00:16:28.600 --> 00:16:30.870 align:start position:0%
each one, calling out what's strong,
what's<00:16:28.880><c> mixed,</c><00:16:29.520><c> and</c><00:16:29.680><c> what's</c><00:16:29.960><c> missing.</c><00:16:30.680><c> For</c>

00:16:30.870 --> 00:16:30.880 align:start position:0%
what's mixed, and what's missing. For
 

00:16:30.880 --> 00:16:32.670 align:start position:0%
what's mixed, and what's missing. For
our<00:16:31.000><c> build,</c><00:16:31.360><c> Claude</c><00:16:31.680><c> comes</c><00:16:31.920><c> back</c><00:16:32.200><c> with</c><00:16:32.440><c> point</c>

00:16:32.670 --> 00:16:32.680 align:start position:0%
our build, Claude comes back with point
 

00:16:32.680 --> 00:16:35.350 align:start position:0%
our build, Claude comes back with point
of<00:16:32.760><c> view</c><00:16:32.960><c> strong,</c><00:16:33.640><c> color</c><00:16:33.920><c> strong,</c><00:16:34.760><c> hierarchy</c>

00:16:35.350 --> 00:16:35.360 align:start position:0%
of view strong, color strong, hierarchy
 

00:16:35.360 --> 00:16:38.670 align:start position:0%
of view strong, color strong, hierarchy
strong,<00:16:35.920><c> and</c><00:16:36.080><c> typography</c><00:16:36.839><c> mixed.</c><00:16:38.160><c> Imagery,</c>

00:16:38.670 --> 00:16:38.680 align:start position:0%
strong, and typography mixed. Imagery,
 

00:16:38.680 --> 00:16:41.190 align:start position:0%
strong, and typography mixed. Imagery,
motion,<00:16:39.320><c> mobile,</c><00:16:39.920><c> and</c><00:16:40.160><c> the</c><00:16:40.320><c> invisible</c><00:16:40.800><c> stuff</c>

00:16:41.190 --> 00:16:41.200 align:start position:0%
motion, mobile, and the invisible stuff
 

00:16:41.200 --> 00:16:43.230 align:start position:0%
motion, mobile, and the invisible stuff
are<00:16:41.360><c> all</c><00:16:41.520><c> mixed.</c><00:16:42.560><c> You'll</c><00:16:42.720><c> probably</c><00:16:43.040><c> get</c><00:16:43.200><c> a</c>

00:16:43.230 --> 00:16:43.240 align:start position:0%
are all mixed. You'll probably get a
 

00:16:43.240 --> 00:16:45.190 align:start position:0%
are all mixed. You'll probably get a
similar<00:16:43.680><c> split</c><00:16:44.040><c> on</c><00:16:44.200><c> your</c><00:16:44.360><c> project,</c><00:16:44.839><c> and</c>

00:16:45.190 --> 00:16:45.200 align:start position:0%
similar split on your project, and
 

00:16:45.200 --> 00:16:46.790 align:start position:0%
similar split on your project, and
that's<00:16:45.480><c> fine.</c><00:16:46.120><c> The</c><00:16:46.240><c> point</c><00:16:46.480><c> is</c><00:16:46.600><c> to</c><00:16:46.680><c> know</c>

00:16:46.790 --> 00:16:46.800 align:start position:0%
that's fine. The point is to know
 

00:16:46.800 --> 00:16:48.950 align:start position:0%
that's fine. The point is to know
exactly<00:16:47.360><c> what's</c><00:16:47.560><c> left</c><00:16:47.800><c> to</c><00:16:47.880><c> do.</c><00:16:48.480><c> For</c><00:16:48.560><c> the</c><00:16:48.680><c> items</c>

00:16:48.950 --> 00:16:48.960 align:start position:0%
exactly what's left to do. For the items
 

00:16:48.960 --> 00:16:50.750 align:start position:0%
exactly what's left to do. For the items
that<00:16:49.080><c> need</c><00:16:49.320><c> work,</c><00:16:49.640><c> don't</c><00:16:50.000><c> ask</c><00:16:50.160><c> Claude</c><00:16:50.440><c> to</c><00:16:50.520><c> fix</c>

00:16:50.750 --> 00:16:50.760 align:start position:0%
that need work, don't ask Claude to fix
 

00:16:50.760 --> 00:16:52.430 align:start position:0%
that need work, don't ask Claude to fix
them<00:16:50.920><c> one</c><00:16:51.040><c> at</c><00:16:51.120><c> a</c><00:16:51.160><c> time.</c><00:16:51.760><c> Ask</c><00:16:52.000><c> Claude</c><00:16:52.360><c> to</c>

00:16:52.430 --> 00:16:52.440 align:start position:0%
them one at a time. Ask Claude to
 

00:16:52.440 --> 00:16:54.950 align:start position:0%
them one at a time. Ask Claude to
propose<00:16:52.880><c> a</c><00:16:52.920><c> batch</c><00:16:53.240><c> of</c><00:16:53.360><c> fixes</c><00:16:53.760><c> instead.</c><00:16:54.640><c> And</c>

00:16:54.950 --> 00:16:54.960 align:start position:0%
propose a batch of fixes instead. And
 

00:16:54.960 --> 00:16:57.150 align:start position:0%
propose a batch of fixes instead. And
lead<00:16:55.240><c> your</c><00:16:55.480><c> ask</c><00:16:55.839><c> with</c><00:16:56.080><c> intent,</c><00:16:56.920><c> not</c>

00:16:57.150 --> 00:16:57.160 align:start position:0%
lead your ask with intent, not
 

00:16:57.160 --> 00:16:59.870 align:start position:0%
lead your ask with intent, not
specifics.<00:16:58.320><c> Here's</c><00:16:58.520><c> the</c><00:16:58.640><c> exact</c><00:16:59.040><c> prompt</c><00:16:59.480><c> I</c><00:16:59.600><c> use</c>

00:16:59.870 --> 00:16:59.880 align:start position:0%
specifics. Here's the exact prompt I use
 

00:16:59.880 --> 00:17:02.190 align:start position:0%
specifics. Here's the exact prompt I use
for<00:17:00.040><c> our</c><00:17:00.160><c> build.</c><00:17:00.880><c> I</c><00:17:01.000><c> tell</c><00:17:01.200><c> Claude,</c>

00:17:02.190 --> 00:17:02.200 align:start position:0%
for our build. I tell Claude,
 

00:17:02.200 --> 00:17:03.950 align:start position:0%
for our build. I tell Claude,
"We<00:17:02.440><c> need</c><00:17:02.760><c> more</c><00:17:03.040><c> handcrafted</c>

00:17:03.950 --> 00:17:03.960 align:start position:0%
"We need more handcrafted
 

00:17:03.960 --> 00:17:05.670 align:start position:0%
"We need more handcrafted
micro-interactions.

00:17:05.670 --> 00:17:05.680 align:start position:0%
micro-interactions.
 

00:17:05.680 --> 00:17:08.110 align:start position:0%
micro-interactions.
The<00:17:05.800><c> lower</c><00:17:06.079><c> sections</c><00:17:06.640><c> feel</c><00:17:06.920><c> a</c><00:17:07.000><c> bit</c><00:17:07.199><c> generic.</c>

00:17:08.110 --> 00:17:08.120 align:start position:0%
The lower sections feel a bit generic.
 

00:17:08.120 --> 00:17:10.470 align:start position:0%
The lower sections feel a bit generic.
We<00:17:08.199><c> don't</c><00:17:08.439><c> need</c><00:17:08.600><c> to</c><00:17:08.720><c> make</c><00:17:08.920><c> them</c><00:17:09.120><c> busier,</c><00:17:10.040><c> just</c>

00:17:10.470 --> 00:17:10.480 align:start position:0%
We don't need to make them busier, just
 

00:17:10.480 --> 00:17:12.550 align:start position:0%
We don't need to make them busier, just
more<00:17:10.720><c> expensive."</c><00:17:11.760><c> Notice</c><00:17:12.040><c> what</c><00:17:12.160><c> I'm</c><00:17:12.280><c> doing</c>

00:17:12.550 --> 00:17:12.560 align:start position:0%
more expensive." Notice what I'm doing
 

00:17:12.560 --> 00:17:15.030 align:start position:0%
more expensive." Notice what I'm doing
there.<00:17:13.160><c> I'm</c><00:17:13.280><c> not</c><00:17:13.480><c> telling</c><00:17:13.760><c> Claude</c><00:17:14.400><c> what</c><00:17:14.880><c> to</c>

00:17:15.030 --> 00:17:15.040 align:start position:0%
there. I'm not telling Claude what to
 

00:17:15.040 --> 00:17:17.829 align:start position:0%
there. I'm not telling Claude what to
add,<00:17:15.600><c> I'm</c><00:17:15.760><c> telling</c><00:17:16.040><c> Claude</c><00:17:16.600><c> how</c><00:17:17.120><c> I</c><00:17:17.280><c> want</c><00:17:17.560><c> it</c><00:17:17.680><c> to</c>

00:17:17.829 --> 00:17:17.839 align:start position:0%
add, I'm telling Claude how I want it to
 

00:17:17.839 --> 00:17:18.949 align:start position:0%
add, I'm telling Claude how I want it to
feel.

00:17:18.949 --> 00:17:18.959 align:start position:0%
feel.
 

00:17:18.959 --> 00:17:21.189 align:start position:0%
feel.
Claude<00:17:19.240><c> is</c><00:17:19.360><c> better</c><00:17:19.640><c> at</c><00:17:19.760><c> translating</c><00:17:20.400><c> intent</c>

00:17:21.189 --> 00:17:21.199 align:start position:0%
Claude is better at translating intent
 

00:17:21.199 --> 00:17:23.470 align:start position:0%
Claude is better at translating intent
into<00:17:21.520><c> specifics</c><00:17:22.000><c> than</c><00:17:22.160><c> most</c><00:17:22.520><c> people</c><00:17:23.000><c> are</c><00:17:23.280><c> at</c>

00:17:23.470 --> 00:17:23.480 align:start position:0%
into specifics than most people are at
 

00:17:23.480 --> 00:17:25.750 align:start position:0%
into specifics than most people are at
writing<00:17:23.839><c> specifications.</c><00:17:25.160><c> Claude</c><00:17:25.480><c> comes</c>

00:17:25.750 --> 00:17:25.760 align:start position:0%
writing specifications. Claude comes
 

00:17:25.760 --> 00:17:28.750 align:start position:0%
writing specifications. Claude comes
back<00:17:26.079><c> with</c><00:17:26.280><c> a</c><00:17:26.439><c> batch,</c><00:17:27.560><c> film</c><00:17:27.920><c> grain</c><00:17:28.280><c> across</c><00:17:28.640><c> the</c>

00:17:28.750 --> 00:17:28.760 align:start position:0%
back with a batch, film grain across the
 

00:17:28.760 --> 00:17:31.270 align:start position:0%
back with a batch, film grain across the
whole<00:17:29.000><c> site,</c><00:17:29.960><c> animated</c><00:17:30.360><c> brass</c><00:17:30.720><c> hairlines</c>

00:17:31.270 --> 00:17:31.280 align:start position:0%
whole site, animated brass hairlines
 

00:17:31.280 --> 00:17:33.910 align:start position:0%
whole site, animated brass hairlines
between<00:17:31.600><c> sections,</c><00:17:32.560><c> a</c><00:17:32.640><c> glowing</c><00:17:33.080><c> ember</c><00:17:33.440><c> effect</c>

00:17:33.910 --> 00:17:33.920 align:start position:0%
between sections, a glowing ember effect
 

00:17:33.920 --> 00:17:35.790 align:start position:0%
between sections, a glowing ember effect
in<00:17:34.040><c> the</c><00:17:34.120><c> reserve</c><00:17:34.440><c> a</c><00:17:34.480><c> table</c><00:17:34.840><c> section,</c>

00:17:35.790 --> 00:17:35.800 align:start position:0%
in the reserve a table section,
 

00:17:35.800 --> 00:17:37.750 align:start position:0%
in the reserve a table section,
word-by-word<00:17:36.520><c> reveals</c><00:17:36.880><c> to</c><00:17:36.960><c> the</c><00:17:37.080><c> headlines,</c>

00:17:37.750 --> 00:17:37.760 align:start position:0%
word-by-word reveals to the headlines,
 

00:17:37.760 --> 00:17:40.350 align:start position:0%
word-by-word reveals to the headlines,
and<00:17:37.920><c> a</c><00:17:37.960><c> few</c><00:17:38.400><c> other</c><00:17:38.680><c> small</c><00:17:39.040><c> details</c><00:17:39.560><c> on</c><00:17:39.680><c> top.</c>

00:17:40.350 --> 00:17:40.360 align:start position:0%
and a few other small details on top.
 

00:17:40.360 --> 00:17:43.230 align:start position:0%
and a few other small details on top.
Five<00:17:40.640><c> small</c><00:17:40.920><c> changes</c><00:17:41.440><c> in</c><00:17:41.680><c> one</c><00:17:42.000><c> prompt.</c>

00:17:43.230 --> 00:17:43.240 align:start position:0%
Five small changes in one prompt.
 

00:17:43.240 --> 00:17:45.630 align:start position:0%
Five small changes in one prompt.
I<00:17:43.360><c> approve</c><00:17:43.840><c> them,</c><00:17:44.480><c> and</c><00:17:44.640><c> Claude</c><00:17:45.080><c> ships</c><00:17:45.400><c> them</c>

00:17:45.630 --> 00:17:45.640 align:start position:0%
I approve them, and Claude ships them
 

00:17:45.640 --> 00:17:47.510 align:start position:0%
I approve them, and Claude ships them
all<00:17:45.800><c> at</c><00:17:45.920><c> once.</c><00:17:46.440><c> There's</c><00:17:46.640><c> less</c><00:17:46.920><c> back</c><00:17:47.160><c> and</c><00:17:47.280><c> forth</c>

00:17:47.510 --> 00:17:47.520 align:start position:0%
all at once. There's less back and forth
 

00:17:47.520 --> 00:17:49.910 align:start position:0%
all at once. There's less back and forth
that<00:17:47.760><c> way.</c><00:17:48.240><c> You</c><00:17:48.400><c> spend</c><00:17:48.840><c> fewer</c><00:17:49.160><c> tokens,</c><00:17:49.800><c> and</c>

00:17:49.910 --> 00:17:49.920 align:start position:0%
that way. You spend fewer tokens, and
 

00:17:49.920 --> 00:17:52.150 align:start position:0%
that way. You spend fewer tokens, and
the<00:17:50.040><c> result</c><00:17:50.400><c> feels</c><00:17:50.680><c> more</c><00:17:50.920><c> cohesive</c><00:17:51.880><c> than</c><00:17:52.040><c> if</c>

00:17:52.150 --> 00:17:52.160 align:start position:0%
the result feels more cohesive than if
 

00:17:52.160 --> 00:17:54.310 align:start position:0%
the result feels more cohesive than if
you<00:17:52.280><c> drip</c><00:17:52.600><c> feed</c><00:17:52.840><c> Claude</c><00:17:53.440><c> one</c><00:17:53.720><c> tweak</c><00:17:54.160><c> at</c><00:17:54.280><c> a</c>

00:17:54.310 --> 00:17:54.320 align:start position:0%
you drip feed Claude one tweak at a
 

00:17:54.320 --> 00:17:56.510 align:start position:0%
you drip feed Claude one tweak at a
time.<00:17:55.240><c> Now,</c><00:17:55.400><c> here's</c><00:17:55.640><c> the</c><00:17:55.760><c> move</c><00:17:56.000><c> most</c><00:17:56.240><c> people</c>

00:17:56.510 --> 00:17:56.520 align:start position:0%
time. Now, here's the move most people
 

00:17:56.520 --> 00:17:57.950 align:start position:0%
time. Now, here's the move most people
skip,<00:17:56.880><c> and</c><00:17:56.960><c> it's</c><00:17:57.080><c> the</c><00:17:57.200><c> move</c><00:17:57.440><c> that</c><00:17:57.600><c> does</c><00:17:57.840><c> the</c>

00:17:57.950 --> 00:17:57.960 align:start position:0%
skip, and it's the move that does the
 

00:17:57.960 --> 00:17:59.910 align:start position:0%
skip, and it's the move that does the
most<00:17:58.320><c> work</c><00:17:58.600><c> on</c><00:17:58.760><c> whether</c><00:17:59.000><c> your</c><00:17:59.160><c> site</c><00:17:59.520><c> feels</c>

00:17:59.910 --> 00:17:59.920 align:start position:0%
most work on whether your site feels
 

00:17:59.920 --> 00:18:01.630 align:start position:0%
most work on whether your site feels
expensive.

00:18:01.630 --> 00:18:01.640 align:start position:0%
expensive.
 

00:18:01.640 --> 00:18:04.030 align:start position:0%
expensive.
Once<00:18:01.840><c> that</c><00:18:02.080><c> batch</c><00:18:02.400><c> of</c><00:18:02.520><c> edits</c><00:18:02.800><c> lands,</c><00:18:03.520><c> scroll</c>

00:18:04.030 --> 00:18:04.040 align:start position:0%
Once that batch of edits lands, scroll
 

00:18:04.040 --> 00:18:06.470 align:start position:0%
Once that batch of edits lands, scroll
through<00:18:04.200><c> your</c><00:18:04.360><c> site</c><00:18:04.880><c> section</c><00:18:05.280><c> by</c><00:18:05.440><c> section,</c>

00:18:06.470 --> 00:18:06.480 align:start position:0%
through your site section by section,
 

00:18:06.480 --> 00:18:09.550 align:start position:0%
through your site section by section,
and<00:18:06.760><c> find</c><00:18:07.120><c> the</c><00:18:07.240><c> ones</c><00:18:07.520><c> that</c><00:18:07.720><c> still</c><00:18:08.080><c> feel</c><00:18:08.680><c> flat,</c>

00:18:09.550 --> 00:18:09.560 align:start position:0%
and find the ones that still feel flat,
 

00:18:09.560 --> 00:18:11.270 align:start position:0%
and find the ones that still feel flat,
a<00:18:09.640><c> little</c><00:18:09.960><c> boring.</c><00:18:10.640><c> There's</c><00:18:10.800><c> always</c><00:18:11.000><c> going</c><00:18:11.200><c> to</c>

00:18:11.270 --> 00:18:11.280 align:start position:0%
a little boring. There's always going to
 

00:18:11.280 --> 00:18:13.070 align:start position:0%
a little boring. There's always going to
be<00:18:11.400><c> a</c><00:18:11.440><c> couple.</c><00:18:12.200><c> Claude</c><00:18:12.520><c> won't</c><00:18:12.760><c> catch</c><00:18:12.960><c> them</c>

00:18:13.070 --> 00:18:13.080 align:start position:0%
be a couple. Claude won't catch them
 

00:18:13.080 --> 00:18:15.470 align:start position:0%
be a couple. Claude won't catch them
because<00:18:13.400><c> Claude</c><00:18:13.800><c> can't</c><00:18:14.280><c> feel</c><00:18:14.800><c> your</c><00:18:15.000><c> site</c><00:18:15.360><c> the</c>

00:18:15.470 --> 00:18:15.480 align:start position:0%
because Claude can't feel your site the
 

00:18:15.480 --> 00:18:18.030 align:start position:0%
because Claude can't feel your site the
way<00:18:15.680><c> you</c><00:18:15.920><c> can.</c><00:18:16.800><c> This</c><00:18:17.080><c> pass,</c><00:18:17.560><c> you</c><00:18:17.760><c> have</c><00:18:17.960><c> to</c>

00:18:18.030 --> 00:18:18.040 align:start position:0%
way you can. This pass, you have to
 

00:18:18.040 --> 00:18:19.710 align:start position:0%
way you can. This pass, you have to
drive<00:18:18.360><c> yourself.</c>

00:18:19.710 --> 00:18:19.720 align:start position:0%
drive yourself.
 

00:18:19.720 --> 00:18:22.390 align:start position:0%
drive yourself.
For<00:18:19.920><c> each</c><00:18:20.280><c> flat</c><00:18:20.800><c> section,</c><00:18:21.440><c> you</c><00:18:21.600><c> give</c><00:18:21.840><c> Claude</c>

00:18:22.390 --> 00:18:22.400 align:start position:0%
For each flat section, you give Claude
 

00:18:22.400 --> 00:18:25.310 align:start position:0%
For each flat section, you give Claude
one<00:18:22.760><c> specific</c><00:18:23.480><c> motion</c><00:18:24.280><c> or</c><00:18:24.800><c> cursor</c>

00:18:25.310 --> 00:18:25.320 align:start position:0%
one specific motion or cursor
 

00:18:25.320 --> 00:18:28.750 align:start position:0%
one specific motion or cursor
interaction<00:18:26.040><c> to</c><00:18:26.200><c> add.</c><00:18:27.040><c> One</c><00:18:27.400><c> per</c><00:18:27.560><c> section,</c><00:18:28.520><c> all</c>

00:18:28.750 --> 00:18:28.760 align:start position:0%
interaction to add. One per section, all
 

00:18:28.760 --> 00:18:31.230 align:start position:0%
interaction to add. One per section, all
of<00:18:28.840><c> them</c><00:18:29.080><c> restrained</c><00:18:29.800><c> and</c><00:18:30.040><c> subtle.</c><00:18:30.960><c> You</c><00:18:31.080><c> can</c>

00:18:31.230 --> 00:18:31.240 align:start position:0%
of them restrained and subtle. You can
 

00:18:31.240 --> 00:18:33.190 align:start position:0%
of them restrained and subtle. You can
ask<00:18:31.560><c> for</c><00:18:31.680><c> something</c><00:18:31.920><c> specific,</c><00:18:32.840><c> grab</c>

00:18:33.190 --> 00:18:33.200 align:start position:0%
ask for something specific, grab
 

00:18:33.200 --> 00:18:35.630 align:start position:0%
ask for something specific, grab
something<00:18:33.480><c> you</c><00:18:33.600><c> like</c><00:18:33.800><c> from</c><00:18:33.920><c> 21st.dev,</c><00:18:35.240><c> or</c>

00:18:35.630 --> 00:18:35.640 align:start position:0%
something you like from 21st.dev, or
 

00:18:35.640 --> 00:18:37.670 align:start position:0%
something you like from 21st.dev, or
just<00:18:35.960><c> ask</c><00:18:36.240><c> Claude</c><00:18:36.560><c> what</c><00:18:36.720><c> makes</c><00:18:36.960><c> sense</c><00:18:37.160><c> to</c><00:18:37.280><c> add.</c>

00:18:37.670 --> 00:18:37.680 align:start position:0%
just ask Claude what makes sense to add.
 

00:18:37.680 --> 00:18:39.230 align:start position:0%
just ask Claude what makes sense to add.
In<00:18:37.880><c> our</c><00:18:38.000><c> reserve</c><00:18:38.320><c> a</c><00:18:38.360><c> table</c><00:18:38.680><c> section,</c><00:18:39.040><c> the</c>

00:18:39.230 --> 00:18:39.240 align:start position:0%
In our reserve a table section, the
 

00:18:39.240 --> 00:18:41.590 align:start position:0%
In our reserve a table section, the
ember<00:18:39.560><c> glow</c><00:18:39.880><c> from</c><00:18:40.040><c> the</c><00:18:40.160><c> batch</c><00:18:40.600><c> is</c><00:18:40.840><c> in,</c><00:18:41.360><c> but</c>

00:18:41.590 --> 00:18:41.600 align:start position:0%
ember glow from the batch is in, but
 

00:18:41.600 --> 00:18:43.830 align:start position:0%
ember glow from the batch is in, but
it's<00:18:41.760><c> still</c><00:18:42.040><c> static.</c><00:18:42.560><c> There's</c><00:18:42.720><c> no</c><00:18:42.880><c> movement.</c>

00:18:43.830 --> 00:18:43.840 align:start position:0%
it's still static. There's no movement.
 

00:18:43.840 --> 00:18:46.110 align:start position:0%
it's still static. There's no movement.
So,<00:18:44.000><c> I</c><00:18:44.080><c> tell</c><00:18:44.280><c> Claude,</c><00:18:45.040><c> "Make</c><00:18:45.280><c> the</c><00:18:45.440><c> embers</c><00:18:45.840><c> move</c>

00:18:46.110 --> 00:18:46.120 align:start position:0%
So, I tell Claude, "Make the embers move
 

00:18:46.120 --> 00:18:48.670 align:start position:0%
So, I tell Claude, "Make the embers move
like<00:18:46.360><c> fire.</c><00:18:47.240><c> Have</c><00:18:47.440><c> them</c><00:18:47.640><c> react</c><00:18:48.040><c> to</c><00:18:48.120><c> the</c><00:18:48.240><c> cursor</c>

00:18:48.670 --> 00:18:48.680 align:start position:0%
like fire. Have them react to the cursor
 

00:18:48.680 --> 00:18:50.590 align:start position:0%
like fire. Have them react to the cursor
as<00:18:48.840><c> it</c><00:18:48.960><c> moves</c><00:18:49.160><c> around</c><00:18:49.440><c> the</c><00:18:49.520><c> page."</c><00:18:50.160><c> Claude</c>

00:18:50.590 --> 00:18:50.600 align:start position:0%
as it moves around the page." Claude
 

00:18:50.600 --> 00:18:52.830 align:start position:0%
as it moves around the page." Claude
adds<00:18:50.800><c> a</c><00:18:50.880><c> parallax</c><00:18:51.640><c> effect</c><00:18:52.080><c> on</c><00:18:52.200><c> the</c><00:18:52.400><c> embers</c>

00:18:52.830 --> 00:18:52.840 align:start position:0%
adds a parallax effect on the embers
 

00:18:52.840 --> 00:18:55.350 align:start position:0%
adds a parallax effect on the embers
that<00:18:53.040><c> follows</c><00:18:53.400><c> your</c><00:18:53.560><c> cursor.</c><00:18:54.600><c> Now,</c><00:18:54.840><c> the</c><00:18:54.960><c> fire</c>

00:18:55.350 --> 00:18:55.360 align:start position:0%
that follows your cursor. Now, the fire
 

00:18:55.360 --> 00:18:58.190 align:start position:0%
that follows your cursor. Now, the fire
effect<00:18:55.760><c> feels</c><00:18:56.080><c> alive.</c><00:18:56.960><c> Then,</c><00:18:57.440><c> I</c><00:18:57.560><c> scroll</c><00:18:57.960><c> into</c>

00:18:58.190 --> 00:18:58.200 align:start position:0%
effect feels alive. Then, I scroll into
 

00:18:58.200 --> 00:19:00.950 align:start position:0%
effect feels alive. Then, I scroll into
the<00:18:58.280><c> story</c><00:18:58.720><c> section,</c><00:18:59.320><c> and</c><00:18:59.520><c> it's</c><00:18:59.840><c> still</c><00:19:00.160><c> flat.</c>

00:19:00.950 --> 00:19:00.960 align:start position:0%
the story section, and it's still flat.
 

00:19:00.960 --> 00:19:03.150 align:start position:0%
the story section, and it's still flat.
So,<00:19:01.120><c> I</c><00:19:01.200><c> tell</c><00:19:01.400><c> Claude,</c><00:19:02.200><c> "Add</c><00:19:02.480><c> some</c><00:19:02.680><c> elegant</c>

00:19:03.150 --> 00:19:03.160 align:start position:0%
So, I tell Claude, "Add some elegant
 

00:19:03.160 --> 00:19:05.470 align:start position:0%
So, I tell Claude, "Add some elegant
micro<00:19:03.600><c> movements</c><00:19:04.120><c> and</c><00:19:04.360><c> cursor</c><00:19:04.800><c> interactions</c>

00:19:05.470 --> 00:19:05.480 align:start position:0%
micro movements and cursor interactions
 

00:19:05.480 --> 00:19:07.150 align:start position:0%
micro movements and cursor interactions
here.<00:19:06.080><c> This</c><00:19:06.240><c> section</c><00:19:06.560><c> is</c><00:19:06.680><c> feeling</c><00:19:06.920><c> very</c>

00:19:07.150 --> 00:19:07.160 align:start position:0%
here. This section is feeling very
 

00:19:07.160 --> 00:19:09.830 align:start position:0%
here. This section is feeling very
static."<00:19:08.000><c> Claude</c><00:19:08.400><c> adds</c><00:19:08.560><c> a</c><00:19:08.640><c> soft</c><00:19:09.080><c> candlelit</c>

00:19:09.830 --> 00:19:09.840 align:start position:0%
static." Claude adds a soft candlelit
 

00:19:09.840 --> 00:19:11.790 align:start position:0%
static." Claude adds a soft candlelit
halo<00:19:10.240><c> that</c><00:19:10.440><c> follows</c><00:19:10.880><c> the</c><00:19:11.000><c> cursor</c><00:19:11.480><c> as</c><00:19:11.640><c> you</c>

00:19:11.790 --> 00:19:11.800 align:start position:0%
halo that follows the cursor as you
 

00:19:11.800 --> 00:19:14.230 align:start position:0%
halo that follows the cursor as you
read.<00:19:12.560><c> Its</c><00:19:12.760><c> first</c><00:19:13.040><c> attempt</c><00:19:13.440><c> though</c><00:19:13.760><c> is</c><00:19:14.040><c> too</c>

00:19:14.230 --> 00:19:14.240 align:start position:0%
read. Its first attempt though is too
 

00:19:14.240 --> 00:19:16.990 align:start position:0%
read. Its first attempt though is too
obvious,<00:19:14.880><c> so</c><00:19:15.040><c> I</c><00:19:15.120><c> push</c><00:19:15.360><c> back.</c><00:19:15.880><c> I</c><00:19:15.960><c> say,</c><00:19:16.640><c> "Make</c><00:19:16.880><c> it</c>

00:19:16.990 --> 00:19:17.000 align:start position:0%
obvious, so I push back. I say, "Make it
 

00:19:17.000 --> 00:19:19.590 align:start position:0%
obvious, so I push back. I say, "Make it
more<00:19:17.160><c> subtle,</c><00:19:17.760><c> more</c><00:19:17.960><c> refined."</c><00:19:18.960><c> Claude</c><00:19:19.320><c> adds</c>

00:19:19.590 --> 00:19:19.600 align:start position:0%
more subtle, more refined." Claude adds
 

00:19:19.600 --> 00:19:21.790 align:start position:0%
more subtle, more refined." Claude adds
trailing<00:19:20.120><c> motion</c><00:19:20.480><c> to</c><00:19:20.560><c> the</c><00:19:20.680><c> halo,</c><00:19:21.040><c> so</c><00:19:21.200><c> it</c><00:19:21.360><c> lags</c>

00:19:21.790 --> 00:19:21.800 align:start position:0%
trailing motion to the halo, so it lags
 

00:19:21.800 --> 00:19:24.030 align:start position:0%
trailing motion to the halo, so it lags
a<00:19:21.840><c> bit</c><00:19:22.080><c> behind</c><00:19:22.480><c> the</c><00:19:22.600><c> cursor.</c><00:19:23.680><c> That's</c><00:19:23.920><c> the</c>

00:19:24.030 --> 00:19:24.040 align:start position:0%
a bit behind the cursor. That's the
 

00:19:24.040 --> 00:19:26.390 align:start position:0%
a bit behind the cursor. That's the
version<00:19:24.360><c> we'll</c><00:19:24.480><c> ship.</c><00:19:25.200><c> Two</c><00:19:25.400><c> prompts,</c><00:19:26.160><c> two</c>

00:19:26.390 --> 00:19:26.400 align:start position:0%
version we'll ship. Two prompts, two
 

00:19:26.400 --> 00:19:28.670 align:start position:0%
version we'll ship. Two prompts, two
sections.<00:19:27.280><c> That's</c><00:19:27.520><c> all</c><00:19:27.720><c> this</c><00:19:28.000><c> layer</c><00:19:28.280><c> takes,</c>

00:19:28.670 --> 00:19:28.680 align:start position:0%
sections. That's all this layer takes,
 

00:19:28.680 --> 00:19:30.510 align:start position:0%
sections. That's all this layer takes,
but<00:19:29.000><c> that</c><00:19:29.280><c> layer</c><00:19:29.560><c> is</c><00:19:29.680><c> the</c><00:19:29.800><c> difference</c><00:19:30.200><c> between</c>

00:19:30.510 --> 00:19:30.520 align:start position:0%
but that layer is the difference between
 

00:19:30.520 --> 00:19:32.750 align:start position:0%
but that layer is the difference between
a<00:19:30.560><c> site</c><00:19:30.840><c> that</c><00:19:31.040><c> looks</c><00:19:31.360><c> expensive</c><00:19:32.120><c> and</c><00:19:32.280><c> one</c><00:19:32.480><c> that</c>

00:19:32.750 --> 00:19:32.760 align:start position:0%
a site that looks expensive and one that
 

00:19:32.760 --> 00:19:35.110 align:start position:0%
a site that looks expensive and one that
feels<00:19:33.400><c> expensive</c><00:19:34.000><c> as</c><00:19:34.200><c> visitors</c><00:19:34.600><c> navigate</c><00:19:35.040><c> the</c>

00:19:35.110 --> 00:19:35.120 align:start position:0%
feels expensive as visitors navigate the
 

00:19:35.120 --> 00:19:37.750 align:start position:0%
feels expensive as visitors navigate the
pages.<00:19:36.240><c> The</c><00:19:36.320><c> pattern</c><00:19:36.720><c> is</c><00:19:36.840><c> to</c><00:19:36.960><c> review</c><00:19:37.440><c> every</c>

00:19:37.750 --> 00:19:37.760 align:start position:0%
pages. The pattern is to review every
 

00:19:37.760 --> 00:19:40.550 align:start position:0%
pages. The pattern is to review every
section,<00:19:38.520><c> find</c><00:19:38.840><c> the</c><00:19:38.920><c> ones</c><00:19:39.120><c> that</c><00:19:39.280><c> feel</c><00:19:39.560><c> flat,</c>

00:19:40.550 --> 00:19:40.560 align:start position:0%
section, find the ones that feel flat,
 

00:19:40.560 --> 00:19:43.390 align:start position:0%
section, find the ones that feel flat,
ask<00:19:40.920><c> Claude</c><00:19:41.320><c> for</c><00:19:41.520><c> one</c><00:19:41.840><c> cursor</c><00:19:42.240><c> interaction</c><00:19:43.080><c> or</c>

00:19:43.390 --> 00:19:43.400 align:start position:0%
ask Claude for one cursor interaction or
 

00:19:43.400 --> 00:19:45.950 align:start position:0%
ask Claude for one cursor interaction or
piece<00:19:43.720><c> of</c><00:19:43.840><c> movement</c><00:19:44.440><c> per</c><00:19:44.760><c> section.</c><00:19:45.640><c> And</c><00:19:45.760><c> tell</c>

00:19:45.950 --> 00:19:45.960 align:start position:0%
piece of movement per section. And tell
 

00:19:45.960 --> 00:19:47.990 align:start position:0%
piece of movement per section. And tell
Claude<00:19:46.360><c> to</c><00:19:46.480><c> make</c><00:19:46.720><c> it</c><00:19:46.880><c> more</c><00:19:47.160><c> subtle</c><00:19:47.600><c> until</c><00:19:47.880><c> the</c>

00:19:47.990 --> 00:19:48.000 align:start position:0%
Claude to make it more subtle until the
 

00:19:48.000 --> 00:19:51.070 align:start position:0%
Claude to make it more subtle until the
section<00:19:48.360><c> feels</c><00:19:48.800><c> alive</c><00:19:49.800><c> without</c><00:19:50.240><c> being</c><00:19:50.600><c> noisy</c>

00:19:51.070 --> 00:19:51.080 align:start position:0%
section feels alive without being noisy
 

00:19:51.080 --> 00:19:52.790 align:start position:0%
section feels alive without being noisy
and<00:19:51.280><c> obnoxious.</c>

00:19:52.790 --> 00:19:52.800 align:start position:0%
and obnoxious.
 

00:19:52.800 --> 00:19:55.070 align:start position:0%
and obnoxious.
Speaking<00:19:53.120><c> of</c><00:19:53.240><c> polish,</c><00:19:54.080><c> copy,</c><00:19:54.680><c> the</c><00:19:54.800><c> written</c>

00:19:55.070 --> 00:19:55.080 align:start position:0%
Speaking of polish, copy, the written
 

00:19:55.080 --> 00:19:57.430 align:start position:0%
Speaking of polish, copy, the written
content<00:19:55.520><c> on</c><00:19:55.600><c> your</c><00:19:55.720><c> site,</c><00:19:56.440><c> is</c><00:19:56.600><c> another</c><00:19:57.040><c> place</c>

00:19:57.430 --> 00:19:57.440 align:start position:0%
content on your site, is another place
 

00:19:57.440 --> 00:20:00.430 align:start position:0%
content on your site, is another place
where<00:19:57.680><c> AI</c><00:19:57.960><c> tends</c><00:19:58.240><c> to</c><00:19:58.360><c> fall</c><00:19:58.600><c> short</c><00:19:59.040><c> by</c><00:19:59.200><c> default.</c>

00:20:00.430 --> 00:20:00.440 align:start position:0%
where AI tends to fall short by default.
 

00:20:00.440 --> 00:20:03.230 align:start position:0%
where AI tends to fall short by default.
AI-generated<00:20:01.040><c> copy</c><00:20:01.520><c> usually</c><00:20:02.120><c> over-explains,</c>

00:20:03.230 --> 00:20:03.240 align:start position:0%
AI-generated copy usually over-explains,
 

00:20:03.240 --> 00:20:04.990 align:start position:0%
AI-generated copy usually over-explains,
uses<00:20:03.560><c> too</c><00:20:03.680><c> many</c><00:20:03.880><c> adjectives,</c><00:20:04.480><c> and</c><00:20:04.600><c> tries</c><00:20:04.920><c> to</c>

00:20:04.990 --> 00:20:05.000 align:start position:0%
uses too many adjectives, and tries to
 

00:20:05.000 --> 00:20:06.630 align:start position:0%
uses too many adjectives, and tries to
sound<00:20:05.280><c> impressive.</c>

00:20:06.630 --> 00:20:06.640 align:start position:0%
sound impressive.
 

00:20:06.640 --> 00:20:08.870 align:start position:0%
sound impressive.
Take<00:20:06.920><c> a</c><00:20:07.000><c> look</c><00:20:07.200><c> at</c><00:20:07.280><c> this</c><00:20:07.440><c> line</c><00:20:07.640><c> from</c><00:20:07.800><c> our</c><00:20:07.920><c> site.</c>

00:20:08.870 --> 00:20:08.880 align:start position:0%
Take a look at this line from our site.
 

00:20:08.880 --> 00:20:12.150 align:start position:0%
Take a look at this line from our site.
Six<00:20:09.240><c> dishes,</c><00:20:10.080><c> one</c><00:20:10.360><c> fire.</c><00:20:11.120><c> That's</c><00:20:11.360><c> restraint,</c>

00:20:12.150 --> 00:20:12.160 align:start position:0%
Six dishes, one fire. That's restraint,
 

00:20:12.160 --> 00:20:14.470 align:start position:0%
Six dishes, one fire. That's restraint,
not<00:20:12.520><c> adjectives.</c><00:20:13.680><c> That's</c><00:20:14.000><c> what</c><00:20:14.120><c> separates</c><00:20:14.440><c> a</c>

00:20:14.470 --> 00:20:14.480 align:start position:0%
not adjectives. That's what separates a
 

00:20:14.480 --> 00:20:17.470 align:start position:0%
not adjectives. That's what separates a
$10,000<00:20:15.280><c> menu</c><00:20:15.680><c> from</c><00:20:15.840><c> a</c><00:20:15.920><c> $200</c><00:20:16.520><c> one.</c>

00:20:17.470 --> 00:20:17.480 align:start position:0%
$10,000 menu from a $200 one.
 

00:20:17.480 --> 00:20:18.910 align:start position:0%
$10,000 menu from a $200 one.
The<00:20:17.560><c> front-end</c><00:20:17.960><c> design</c><00:20:18.320><c> skill</c><00:20:18.520><c> we</c><00:20:18.640><c> installed</c>

00:20:18.910 --> 00:20:18.920 align:start position:0%
The front-end design skill we installed
 

00:20:18.920 --> 00:20:20.390 align:start position:0%
The front-end design skill we installed
at<00:20:19.000><c> the</c><00:20:19.080><c> start</c><00:20:19.360><c> of</c><00:20:19.400><c> this</c><00:20:19.520><c> video</c><00:20:19.840><c> is</c><00:20:20.000><c> what</c><00:20:20.160><c> helps</c>

00:20:20.390 --> 00:20:20.400 align:start position:0%
at the start of this video is what helps
 

00:20:20.400 --> 00:20:22.310 align:start position:0%
at the start of this video is what helps
Claude<00:20:20.720><c> to</c><00:20:20.840><c> write</c><00:20:21.040><c> copy</c><00:20:21.360><c> like</c><00:20:21.600><c> this.</c>

00:20:22.310 --> 00:20:22.320 align:start position:0%
Claude to write copy like this.
 

00:20:22.320 --> 00:20:24.910 align:start position:0%
Claude to write copy like this.
Restrained<00:20:23.280><c> sensory</c><00:20:24.000><c> writing</c><00:20:24.520><c> is</c><00:20:24.640><c> one</c><00:20:24.760><c> of</c><00:20:24.840><c> the</c>

00:20:24.910 --> 00:20:24.920 align:start position:0%
Restrained sensory writing is one of the
 

00:20:24.920 --> 00:20:27.310 align:start position:0%
Restrained sensory writing is one of the
things<00:20:25.240><c> that</c><00:20:25.400><c> skill</c><00:20:25.760><c> pushes</c><00:20:26.120><c> Claude</c><00:20:26.480><c> toward,</c>

00:20:27.310 --> 00:20:27.320 align:start position:0%
things that skill pushes Claude toward,
 

00:20:27.320 --> 00:20:28.670 align:start position:0%
things that skill pushes Claude toward,
which<00:20:27.480><c> is</c><00:20:27.560><c> another</c><00:20:27.840><c> reason</c><00:20:28.120><c> it</c><00:20:28.320><c> earns</c><00:20:28.520><c> its</c>

00:20:28.670 --> 00:20:28.680 align:start position:0%
which is another reason it earns its
 

00:20:28.680 --> 00:20:30.950 align:start position:0%
which is another reason it earns its
place<00:20:29.120><c> in</c><00:20:29.280><c> every</c><00:20:29.520><c> project.</c><00:20:30.480><c> Here's</c><00:20:30.720><c> another</c>

00:20:30.950 --> 00:20:30.960 align:start position:0%
place in every project. Here's another
 

00:20:30.960 --> 00:20:32.630 align:start position:0%
place in every project. Here's another
quick<00:20:31.200><c> win</c><00:20:31.440><c> you</c><00:20:31.560><c> can</c><00:20:31.680><c> apply</c><00:20:32.040><c> to</c><00:20:32.280><c> any</c>

00:20:32.630 --> 00:20:32.640 align:start position:0%
quick win you can apply to any
 

00:20:32.640 --> 00:20:34.470 align:start position:0%
quick win you can apply to any
AI-generated<00:20:33.440><c> site.</c>

00:20:34.470 --> 00:20:34.480 align:start position:0%
AI-generated site.
 

00:20:34.480 --> 00:20:36.790 align:start position:0%
AI-generated site.
There's<00:20:34.640><c> one</c><00:20:34.840><c> font</c><00:20:35.160><c> called</c><00:20:35.520><c> Inter</c><00:20:36.160><c> that's</c><00:20:36.520><c> so</c>

00:20:36.790 --> 00:20:36.800 align:start position:0%
There's one font called Inter that's so
 

00:20:36.800 --> 00:20:38.630 align:start position:0%
There's one font called Inter that's so
overused<00:20:37.280><c> on</c><00:20:37.520><c> AI-generated</c><00:20:38.160><c> sites</c><00:20:38.440><c> it</c>

00:20:38.630 --> 00:20:38.640 align:start position:0%
overused on AI-generated sites it
 

00:20:38.640 --> 00:20:41.350 align:start position:0%
overused on AI-generated sites it
instantly<00:20:39.120><c> screams</c><00:20:39.720><c> AI</c><00:20:40.000><c> I</c><00:20:40.080><c> made</c><00:20:40.400><c> this.</c><00:20:41.080><c> If</c><00:20:41.240><c> you</c>

00:20:41.350 --> 00:20:41.360 align:start position:0%
instantly screams AI I made this. If you
 

00:20:41.360 --> 00:20:43.830 align:start position:0%
instantly screams AI I made this. If you
see<00:20:41.680><c> Inter</c><00:20:42.080><c> in</c><00:20:42.200><c> your</c><00:20:42.360><c> output,</c><00:20:43.080><c> ask</c><00:20:43.440><c> Claude</c><00:20:43.760><c> to</c>

00:20:43.830 --> 00:20:43.840 align:start position:0%
see Inter in your output, ask Claude to
 

00:20:43.840 --> 00:20:45.190 align:start position:0%
see Inter in your output, ask Claude to
swap<00:20:44.080><c> it</c><00:20:44.200><c> out.</c>

00:20:45.190 --> 00:20:45.200 align:start position:0%
swap it out.
 

00:20:45.200 --> 00:20:47.030 align:start position:0%
swap it out.
For<00:20:45.320><c> our</c><00:20:45.480><c> build,</c><00:20:45.840><c> Claude</c><00:20:46.160><c> swaps</c><00:20:46.520><c> Inter</c><00:20:46.840><c> for</c><00:20:47.000><c> a</c>

00:20:47.030 --> 00:20:47.040 align:start position:0%
For our build, Claude swaps Inter for a
 

00:20:47.040 --> 00:20:49.470 align:start position:0%
For our build, Claude swaps Inter for a
font<00:20:47.360><c> called</c><00:20:47.840><c> Geist.</c><00:20:48.680><c> It's</c><00:20:48.800><c> a</c><00:20:48.880><c> small</c><00:20:49.160><c> change,</c>

00:20:49.470 --> 00:20:49.480 align:start position:0%
font called Geist. It's a small change,
 

00:20:49.480 --> 00:20:50.710 align:start position:0%
font called Geist. It's a small change,
but<00:20:49.600><c> it</c><00:20:49.640><c> makes</c><00:20:49.800><c> a</c><00:20:49.880><c> real</c><00:20:50.160><c> difference</c><00:20:50.480><c> to</c><00:20:50.600><c> how</c>

00:20:50.710 --> 00:20:50.720 align:start position:0%
but it makes a real difference to how
 

00:20:50.720 --> 00:20:52.670 align:start position:0%
but it makes a real difference to how
the<00:20:50.840><c> site</c><00:20:51.080><c> reads.</c><00:20:51.920><c> Item</c><00:20:52.200><c> seven</c><00:20:52.520><c> on</c><00:20:52.600><c> the</c>

00:20:52.670 --> 00:20:52.680 align:start position:0%
the site reads. Item seven on the
 

00:20:52.680 --> 00:20:54.830 align:start position:0%
the site reads. Item seven on the
checklist<00:20:53.320><c> is</c><00:20:53.560><c> mobile</c><00:20:54.040><c> that's</c><00:20:54.320><c> actually</c>

00:20:54.830 --> 00:20:54.840 align:start position:0%
checklist is mobile that's actually
 

00:20:54.840 --> 00:20:57.590 align:start position:0%
checklist is mobile that's actually
designed,<00:20:55.560><c> not</c><00:20:55.840><c> just</c><00:20:56.120><c> shrunk</c><00:20:56.520><c> down.</c>

00:20:57.590 --> 00:20:57.600 align:start position:0%
designed, not just shrunk down.
 

00:20:57.600 --> 00:20:59.070 align:start position:0%
designed, not just shrunk down.
By<00:20:57.680><c> default,</c><00:20:58.200><c> Claude</c><00:20:58.520><c> makes</c><00:20:58.720><c> your</c><00:20:58.840><c> site</c>

00:20:59.070 --> 00:20:59.080 align:start position:0%
By default, Claude makes your site
 

00:20:59.080 --> 00:21:01.230 align:start position:0%
By default, Claude makes your site
responsive,<00:20:59.800><c> meaning</c><00:21:00.040><c> it'll</c><00:21:00.240><c> fit</c><00:21:00.480><c> on</c><00:21:00.640><c> phones</c>

00:21:01.230 --> 00:21:01.240 align:start position:0%
responsive, meaning it'll fit on phones
 

00:21:01.240 --> 00:21:04.110 align:start position:0%
responsive, meaning it'll fit on phones
or<00:21:01.520><c> other</c><00:21:01.760><c> small</c><00:21:02.040><c> screens,</c><00:21:02.800><c> but</c><00:21:03.080><c> responsive</c>

00:21:04.110 --> 00:21:04.120 align:start position:0%
or other small screens, but responsive
 

00:21:04.120 --> 00:21:07.270 align:start position:0%
or other small screens, but responsive
isn't<00:21:04.520><c> the</c><00:21:04.640><c> same</c><00:21:05.000><c> as</c><00:21:05.400><c> designed</c><00:21:06.320><c> for</c><00:21:06.520><c> phones.</c>

00:21:07.270 --> 00:21:07.280 align:start position:0%
isn't the same as designed for phones.
 

00:21:07.280 --> 00:21:09.390 align:start position:0%
isn't the same as designed for phones.
Phones<00:21:07.760><c> are</c><00:21:08.000><c> going</c><00:21:08.200><c> to</c><00:21:08.320><c> see</c><00:21:08.480><c> your</c><00:21:08.640><c> site</c><00:21:09.040><c> way</c>

00:21:09.390 --> 00:21:09.400 align:start position:0%
Phones are going to see your site way
 

00:21:09.400 --> 00:21:11.550 align:start position:0%
Phones are going to see your site way
more<00:21:09.680><c> often</c><00:21:09.960><c> than</c><00:21:10.120><c> desktops</c><00:21:10.720><c> will.</c><00:21:11.320><c> And</c><00:21:11.440><c> if</c>

00:21:11.550 --> 00:21:11.560 align:start position:0%
more often than desktops will. And if
 

00:21:11.560 --> 00:21:13.470 align:start position:0%
more often than desktops will. And if
your<00:21:11.680><c> mobile</c><00:21:12.000><c> version</c><00:21:12.320><c> is</c><00:21:12.480><c> just</c><00:21:12.720><c> your</c><00:21:12.840><c> desktop</c>

00:21:13.470 --> 00:21:13.480 align:start position:0%
your mobile version is just your desktop
 

00:21:13.480 --> 00:21:15.390 align:start position:0%
your mobile version is just your desktop
version<00:21:13.800><c> squished</c><00:21:14.240><c> smaller,</c><00:21:14.840><c> your</c><00:21:15.000><c> viewers</c>

00:21:15.390 --> 00:21:15.400 align:start position:0%
version squished smaller, your viewers
 

00:21:15.400 --> 00:21:17.790 align:start position:0%
version squished smaller, your viewers
will<00:21:15.560><c> feel</c><00:21:15.920><c> it.</c><00:21:16.560><c> You</c><00:21:16.680><c> have</c><00:21:16.960><c> to</c><00:21:17.080><c> ask</c><00:21:17.320><c> Claude</c><00:21:17.640><c> for</c>

00:21:17.790 --> 00:21:17.800 align:start position:0%
will feel it. You have to ask Claude for
 

00:21:17.800 --> 00:21:19.230 align:start position:0%
will feel it. You have to ask Claude for
it<00:21:17.880><c> specifically.</c>

00:21:19.230 --> 00:21:19.240 align:start position:0%
it specifically.
 

00:21:19.240 --> 00:21:21.310 align:start position:0%
it specifically.
So,<00:21:19.520><c> tell</c><00:21:19.800><c> Claude</c><00:21:20.120><c> to</c><00:21:20.200><c> do</c><00:21:20.360><c> a</c><00:21:20.440><c> dedicated</c><00:21:20.960><c> pass</c>

00:21:21.310 --> 00:21:21.320 align:start position:0%
So, tell Claude to do a dedicated pass
 

00:21:21.320 --> 00:21:22.830 align:start position:0%
So, tell Claude to do a dedicated pass
on<00:21:21.480><c> the</c><00:21:21.560><c> mobile</c><00:21:21.840><c> version.</c>

00:21:22.830 --> 00:21:22.840 align:start position:0%
on the mobile version.
 

00:21:22.840 --> 00:21:23.910 align:start position:0%
on the mobile version.
Tell<00:21:22.960><c> it</c><00:21:23.040><c> to</c><00:21:23.120><c> think</c><00:21:23.280><c> about</c><00:21:23.520><c> what</c><00:21:23.640><c> should</c><00:21:23.760><c> be</c>

00:21:23.910 --> 00:21:23.920 align:start position:0%
Tell it to think about what should be
 

00:21:23.920 --> 00:21:26.110 align:start position:0%
Tell it to think about what should be
hidden<00:21:24.320><c> on</c><00:21:24.520><c> small</c><00:21:24.800><c> screens,</c><00:21:25.720><c> what</c><00:21:25.880><c> should</c><00:21:26.000><c> be</c>

00:21:26.110 --> 00:21:26.120 align:start position:0%
hidden on small screens, what should be
 

00:21:26.120 --> 00:21:28.750 align:start position:0%
hidden on small screens, what should be
tighter,<00:21:27.000><c> and</c><00:21:27.160><c> what</c><00:21:27.320><c> should</c><00:21:27.480><c> resize.</c>

00:21:28.750 --> 00:21:28.760 align:start position:0%
tighter, and what should resize.
 

00:21:28.760 --> 00:21:30.670 align:start position:0%
tighter, and what should resize.
For<00:21:28.920><c> our</c><00:21:29.040><c> build,</c><00:21:29.400><c> the</c><00:21:29.520><c> navigation</c><00:21:30.120><c> collapses</c>

00:21:30.670 --> 00:21:30.680 align:start position:0%
For our build, the navigation collapses
 

00:21:30.680 --> 00:21:32.990 align:start position:0%
For our build, the navigation collapses
on<00:21:30.840><c> phones.</c><00:21:31.800><c> The</c><00:21:31.920><c> wordmark</c><00:21:32.520><c> gets</c><00:21:32.720><c> tighter</c>

00:21:32.990 --> 00:21:33.000 align:start position:0%
on phones. The wordmark gets tighter
 

00:21:33.000 --> 00:21:35.390 align:start position:0%
on phones. The wordmark gets tighter
spacing,<00:21:33.880><c> and</c><00:21:34.440><c> the</c><00:21:34.560><c> buttons</c><00:21:34.920><c> get</c><00:21:35.040><c> a</c><00:21:35.080><c> smaller</c>

00:21:35.390 --> 00:21:35.400 align:start position:0%
spacing, and the buttons get a smaller
 

00:21:35.400 --> 00:21:37.510 align:start position:0%
spacing, and the buttons get a smaller
variant.<00:21:36.480><c> With</c><00:21:36.600><c> those</c><00:21:36.800><c> polished</c><00:21:37.160><c> passes</c>

00:21:37.510 --> 00:21:37.520 align:start position:0%
variant. With those polished passes
 

00:21:37.520 --> 00:21:39.550 align:start position:0%
variant. With those polished passes
done,<00:21:37.880><c> all</c><00:21:38.280><c> eight</c><00:21:38.560><c> checklist</c><00:21:39.080><c> items</c><00:21:39.400><c> are</c>

00:21:39.550 --> 00:21:39.560 align:start position:0%
done, all eight checklist items are
 

00:21:39.560 --> 00:21:42.950 align:start position:0%
done, all eight checklist items are
complete.<00:21:40.440><c> Your</c><00:21:40.600><c> site</c><00:21:40.960><c> looks</c><00:21:41.240><c> $10,000.</c>

00:21:42.950 --> 00:21:42.960 align:start position:0%
complete. Your site looks $10,000.
 

00:21:42.960 --> 00:21:45.990 align:start position:0%
complete. Your site looks $10,000.
Now,<00:21:43.280><c> we</c><00:21:43.440><c> have</c><00:21:43.640><c> to</c><00:21:43.760><c> actually</c><00:21:44.240><c> put</c><00:21:44.480><c> it</c><00:21:44.640><c> online.</c>

00:21:45.990 --> 00:21:46.000 align:start position:0%
Now, we have to actually put it online.
 

00:21:46.000 --> 00:21:47.390 align:start position:0%
Now, we have to actually put it online.
You<00:21:46.120><c> can</c><00:21:46.240><c> build</c><00:21:46.440><c> the</c><00:21:46.520><c> most</c><00:21:46.760><c> beautiful</c><00:21:47.120><c> site</c><00:21:47.320><c> in</c>

00:21:47.390 --> 00:21:47.400 align:start position:0%
You can build the most beautiful site in
 

00:21:47.400 --> 00:21:49.230 align:start position:0%
You can build the most beautiful site in
the<00:21:47.520><c> world,</c><00:21:48.040><c> but</c><00:21:48.240><c> up</c><00:21:48.400><c> to</c><00:21:48.520><c> this</c><00:21:48.720><c> point,</c><00:21:49.080><c> your</c>

00:21:49.230 --> 00:21:49.240 align:start position:0%
the world, but up to this point, your
 

00:21:49.240 --> 00:21:51.950 align:start position:0%
the world, but up to this point, your
site<00:21:49.560><c> only</c><00:21:49.840><c> exists</c><00:21:50.320><c> on</c><00:21:50.520><c> your</c><00:21:50.760><c> computer.</c>

00:21:51.950 --> 00:21:51.960 align:start position:0%
site only exists on your computer.
 

00:21:51.960 --> 00:21:53.190 align:start position:0%
site only exists on your computer.
So,<00:21:52.040><c> if</c><00:21:52.120><c> you</c><00:21:52.200><c> copy</c><00:21:52.440><c> the</c><00:21:52.560><c> URL</c><00:21:52.960><c> from</c><00:21:53.080><c> your</c>

00:21:53.190 --> 00:21:53.200 align:start position:0%
So, if you copy the URL from your
 

00:21:53.200 --> 00:21:54.750 align:start position:0%
So, if you copy the URL from your
preview<00:21:53.520><c> right</c><00:21:53.720><c> now,</c><00:21:54.160><c> the</c><00:21:54.280><c> one</c><00:21:54.400><c> that</c><00:21:54.520><c> starts</c>

00:21:54.750 --> 00:21:54.760 align:start position:0%
preview right now, the one that starts
 

00:21:54.760 --> 00:21:57.550 align:start position:0%
preview right now, the one that starts
with<00:21:55.040><c> localhost,</c><00:21:56.000><c> and</c><00:21:56.200><c> send</c><00:21:56.400><c> it</c><00:21:56.520><c> to</c><00:21:56.640><c> a</c><00:21:56.680><c> friend,</c>

00:21:57.550 --> 00:21:57.560 align:start position:0%
with localhost, and send it to a friend,
 

00:21:57.560 --> 00:21:59.790 align:start position:0%
with localhost, and send it to a friend,
they're<00:21:57.760><c> going</c><00:21:58.000><c> to</c><00:21:58.080><c> be</c><00:21:58.240><c> very</c><00:21:58.600><c> disappointed.</c>

00:21:59.790 --> 00:21:59.800 align:start position:0%
they're going to be very disappointed.
 

00:21:59.800 --> 00:22:02.670 align:start position:0%
they're going to be very disappointed.
That<00:21:59.960><c> URL</c><00:22:00.440><c> only</c><00:22:00.680><c> works</c><00:22:00.920><c> on</c><00:22:01.160><c> your</c><00:22:01.520><c> machine.</c><00:22:02.600><c> To</c>

00:22:02.670 --> 00:22:02.680 align:start position:0%
That URL only works on your machine. To
 

00:22:02.680 --> 00:22:03.950 align:start position:0%
That URL only works on your machine. To
share<00:22:02.840><c> your</c><00:22:02.960><c> site</c><00:22:03.120><c> with</c><00:22:03.200><c> the</c><00:22:03.280><c> world,</c><00:22:03.600><c> you</c><00:22:03.720><c> have</c>

00:22:03.950 --> 00:22:03.960 align:start position:0%
share your site with the world, you have
 

00:22:03.960 --> 00:22:06.390 align:start position:0%
share your site with the world, you have
to<00:22:04.040><c> put</c><00:22:04.200><c> it</c><00:22:04.360><c> on</c><00:22:04.560><c> a</c><00:22:04.680><c> real</c><00:22:05.120><c> server</c><00:22:05.760><c> at</c><00:22:05.880><c> a</c><00:22:06.000><c> real</c>

00:22:06.390 --> 00:22:06.400 align:start position:0%
to put it on a real server at a real
 

00:22:06.400 --> 00:22:09.110 align:start position:0%
to put it on a real server at a real
custom<00:22:06.840><c> URL.</c><00:22:07.680><c> Hosting</c><00:22:08.080><c> is</c><00:22:08.200><c> the</c><00:22:08.320><c> service</c><00:22:08.800><c> that</c>

00:22:09.110 --> 00:22:09.120 align:start position:0%
custom URL. Hosting is the service that
 

00:22:09.120 --> 00:22:11.790 align:start position:0%
custom URL. Hosting is the service that
runs<00:22:09.440><c> your</c><00:22:09.560><c> website</c><00:22:10.120><c> on</c><00:22:10.240><c> a</c><00:22:10.280><c> server</c><00:22:10.760><c> 24/7,</c><00:22:11.640><c> so</c>

00:22:11.790 --> 00:22:11.800 align:start position:0%
runs your website on a server 24/7, so
 

00:22:11.800 --> 00:22:13.510 align:start position:0%
runs your website on a server 24/7, so
anyone<00:22:12.080><c> in</c><00:22:12.160><c> the</c><00:22:12.240><c> world</c><00:22:12.480><c> can</c><00:22:12.640><c> reach</c><00:22:12.920><c> it.</c><00:22:13.360><c> It's</c>

00:22:13.510 --> 00:22:13.520 align:start position:0%
anyone in the world can reach it. It's
 

00:22:13.520 --> 00:22:15.430 align:start position:0%
anyone in the world can reach it. It's
the<00:22:13.640><c> boring</c><00:22:14.080><c> part</c><00:22:14.400><c> of</c><00:22:14.520><c> owning</c><00:22:14.720><c> a</c><00:22:14.760><c> website,</c><00:22:15.240><c> but</c>

00:22:15.430 --> 00:22:15.440 align:start position:0%
the boring part of owning a website, but
 

00:22:15.440 --> 00:22:17.470 align:start position:0%
the boring part of owning a website, but
every<00:22:15.680><c> real</c><00:22:15.920><c> site</c><00:22:16.160><c> needs</c><00:22:16.440><c> one.</c><00:22:17.160><c> I</c><00:22:17.240><c> use</c>

00:22:17.470 --> 00:22:17.480 align:start position:0%
every real site needs one. I use
 

00:22:17.480 --> 00:22:18.790 align:start position:0%
every real site needs one. I use
Hostinger<00:22:17.920><c> because</c><00:22:18.160><c> it's</c><00:22:18.280><c> the</c><00:22:18.360><c> cheapest</c>

00:22:18.790 --> 00:22:18.800 align:start position:0%
Hostinger because it's the cheapest
 

00:22:18.800 --> 00:22:20.430 align:start position:0%
Hostinger because it's the cheapest
professional<00:22:19.320><c> host</c><00:22:19.640><c> I</c><00:22:19.760><c> know</c><00:22:19.960><c> of</c><00:22:20.080><c> that</c><00:22:20.200><c> gives</c>

00:22:20.430 --> 00:22:20.440 align:start position:0%
professional host I know of that gives
 

00:22:20.440 --> 00:22:22.390 align:start position:0%
professional host I know of that gives
you<00:22:20.560><c> a</c><00:22:20.680><c> free</c><00:22:21.120><c> domain</c><00:22:21.560><c> for</c><00:22:21.680><c> the</c><00:22:21.760><c> first</c><00:22:22.080><c> year</c><00:22:22.280><c> on</c>

00:22:22.390 --> 00:22:22.400 align:start position:0%
you a free domain for the first year on
 

00:22:22.400 --> 00:22:23.950 align:start position:0%
you a free domain for the first year on
top<00:22:22.720><c> of</c><00:22:22.840><c> your</c><00:22:22.960><c> plan.</c>

00:22:23.950 --> 00:22:23.960 align:start position:0%
top of your plan.
 

00:22:23.960 --> 00:22:25.230 align:start position:0%
top of your plan.
And<00:22:24.040><c> here's</c><00:22:24.240><c> the</c><00:22:24.320><c> deal.</c><00:22:24.760><c> If</c><00:22:24.880><c> you</c><00:22:24.960><c> grab</c>

00:22:25.230 --> 00:22:25.240 align:start position:0%
And here's the deal. If you grab
 

00:22:25.240 --> 00:22:27.150 align:start position:0%
And here's the deal. If you grab
Hostinger<00:22:25.680><c> through</c><00:22:25.840><c> the</c><00:22:25.960><c> link</c><00:22:26.280><c> on</c><00:22:26.480><c> screen,</c><00:22:27.000><c> or</c>

00:22:27.150 --> 00:22:27.160 align:start position:0%
Hostinger through the link on screen, or
 

00:22:27.160 --> 00:22:28.950 align:start position:0%
Hostinger through the link on screen, or
the<00:22:27.280><c> first</c><00:22:27.600><c> link</c><00:22:27.880><c> in</c><00:22:28.000><c> the</c><00:22:28.080><c> description</c><00:22:28.560><c> below,</c>

00:22:28.950 --> 00:22:28.960 align:start position:0%
the first link in the description below,
 

00:22:28.960 --> 00:22:31.350 align:start position:0%
the first link in the description below,
you'll<00:22:29.120><c> get</c><00:22:29.360><c> 10%</c><00:22:30.120><c> off</c><00:22:30.440><c> whatever</c><00:22:30.800><c> Hostinger's</c>

00:22:31.350 --> 00:22:31.360 align:start position:0%
you'll get 10% off whatever Hostinger's
 

00:22:31.360 --> 00:22:33.830 align:start position:0%
you'll get 10% off whatever Hostinger's
current<00:22:31.760><c> promotional</c><00:22:32.280><c> prices.</c><00:22:33.440><c> Prices</c>

00:22:33.830 --> 00:22:33.840 align:start position:0%
current promotional prices. Prices
 

00:22:33.840 --> 00:22:35.790 align:start position:0%
current promotional prices. Prices
change<00:22:34.120><c> throughout</c><00:22:34.400><c> the</c><00:22:34.480><c> year,</c><00:22:34.760><c> but</c><00:22:35.040><c> 10%</c><00:22:35.600><c> off</c>

00:22:35.790 --> 00:22:35.800 align:start position:0%
change throughout the year, but 10% off
 

00:22:35.800 --> 00:22:37.670 align:start position:0%
change throughout the year, but 10% off
the<00:22:35.920><c> best</c><00:22:36.240><c> available</c><00:22:36.680><c> price</c><00:22:36.960><c> is</c><00:22:37.200><c> always</c><00:22:37.560><c> the</c>

00:22:37.670 --> 00:22:37.680 align:start position:0%
the best available price is always the
 

00:22:37.680 --> 00:22:39.670 align:start position:0%
the best available price is always the
cheapest<00:22:38.040><c> way</c><00:22:38.160><c> to</c><00:22:38.240><c> get</c><00:22:38.400><c> started.</c>

00:22:39.670 --> 00:22:39.680 align:start position:0%
cheapest way to get started.
 

00:22:39.680 --> 00:22:41.030 align:start position:0%
cheapest way to get started.
Now,<00:22:39.840><c> before</c><00:22:40.160><c> you</c><00:22:40.280><c> click</c><00:22:40.520><c> anything,</c><00:22:40.880><c> let's</c>

00:22:41.030 --> 00:22:41.040 align:start position:0%
Now, before you click anything, let's
 

00:22:41.040 --> 00:22:43.070 align:start position:0%
Now, before you click anything, let's
talk<00:22:41.200><c> about</c><00:22:41.400><c> which</c><00:22:41.560><c> plan</c><00:22:41.760><c> you</c><00:22:41.880><c> actually</c><00:22:42.200><c> want.</c>

00:22:43.070 --> 00:22:43.080 align:start position:0%
talk about which plan you actually want.
 

00:22:43.080 --> 00:22:44.630 align:start position:0%
talk about which plan you actually want.
For<00:22:43.160><c> the</c><00:22:43.240><c> kind</c><00:22:43.480><c> of</c><00:22:43.640><c> site</c><00:22:43.920><c> we</c><00:22:44.040><c> built</c><00:22:44.320><c> in</c><00:22:44.440><c> this</c>

00:22:44.630 --> 00:22:44.640 align:start position:0%
For the kind of site we built in this
 

00:22:44.640 --> 00:22:46.590 align:start position:0%
For the kind of site we built in this
video,<00:22:45.200><c> a</c><00:22:45.400><c> simple</c><00:22:45.840><c> static</c><00:22:46.160><c> site</c><00:22:46.280><c> with</c><00:22:46.400><c> no</c>

00:22:46.590 --> 00:22:46.600 align:start position:0%
video, a simple static site with no
 

00:22:46.600 --> 00:22:48.190 align:start position:0%
video, a simple static site with no
login,<00:22:47.160><c> no</c><00:22:47.320><c> checkout,</c><00:22:47.800><c> and</c><00:22:47.920><c> no</c><00:22:48.040><c> real</c>

00:22:48.190 --> 00:22:48.200 align:start position:0%
login, no checkout, and no real
 

00:22:48.200 --> 00:22:50.430 align:start position:0%
login, no checkout, and no real
database,<00:22:49.040><c> Hostinger's</c><00:22:49.560><c> premium</c><00:22:50.080><c> plan</c>

00:22:50.430 --> 00:22:50.440 align:start position:0%
database, Hostinger's premium plan
 

00:22:50.440 --> 00:22:52.070 align:start position:0%
database, Hostinger's premium plan
covers<00:22:50.880><c> everything.</c><00:22:51.520><c> That's</c><00:22:51.680><c> the</c><00:22:51.800><c> one</c><00:22:51.960><c> we're</c>

00:22:52.070 --> 00:22:52.080 align:start position:0%
covers everything. That's the one we're
 

00:22:52.080 --> 00:22:53.950 align:start position:0%
covers everything. That's the one we're
picking<00:22:52.360><c> today.</c><00:22:53.120><c> But,</c><00:22:53.320><c> if</c><00:22:53.400><c> your</c><00:22:53.520><c> project</c><00:22:53.840><c> is</c>

00:22:53.950 --> 00:22:53.960 align:start position:0%
picking today. But, if your project is
 

00:22:53.960 --> 00:22:55.950 align:start position:0%
picking today. But, if your project is
more<00:22:54.120><c> complex</c><00:22:54.800><c> than</c><00:22:54.920><c> what</c><00:22:55.040><c> we</c><00:22:55.120><c> did</c><00:22:55.280><c> here,</c><00:22:55.720><c> like</c>

00:22:55.950 --> 00:22:55.960 align:start position:0%
more complex than what we did here, like
 

00:22:55.960 --> 00:22:57.670 align:start position:0%
more complex than what we did here, like
a<00:22:56.000><c> site</c><00:22:56.280><c> with</c><00:22:56.440><c> user</c><00:22:56.720><c> accounts,</c><00:22:57.240><c> a</c><00:22:57.280><c> payment</c>

00:22:57.670 --> 00:22:57.680 align:start position:0%
a site with user accounts, a payment
 

00:22:57.680 --> 00:22:59.870 align:start position:0%
a site with user accounts, a payment
flow,<00:22:58.000><c> or</c><00:22:58.200><c> a</c><00:22:58.240><c> database</c><00:22:58.680><c> in</c><00:22:58.760><c> the</c><00:22:58.840><c> background,</c>

00:22:59.870 --> 00:22:59.880 align:start position:0%
flow, or a database in the background,
 

00:22:59.880 --> 00:23:01.550 align:start position:0%
flow, or a database in the background,
premium<00:23:00.200><c> won't</c><00:23:00.360><c> cut</c><00:23:00.560><c> it.</c><00:23:00.960><c> For</c><00:23:01.080><c> projects</c><00:23:01.440><c> like</c>

00:23:01.550 --> 00:23:01.560 align:start position:0%
premium won't cut it. For projects like
 

00:23:01.560 --> 00:23:03.430 align:start position:0%
premium won't cut it. For projects like
that,<00:23:01.840><c> you</c><00:23:01.960><c> want</c><00:23:02.160><c> Hostinger's</c><00:23:02.760><c> business</c><00:23:03.200><c> plan</c>

00:23:03.430 --> 00:23:03.440 align:start position:0%
that, you want Hostinger's business plan
 

00:23:03.440 --> 00:23:06.670 align:start position:0%
that, you want Hostinger's business plan
instead.<00:23:04.280><c> It</c><00:23:04.400><c> supports</c><00:23:04.880><c> node.js</c><00:23:06.080><c> and</c><00:23:06.440><c> more</c>

00:23:06.670 --> 00:23:06.680 align:start position:0%
instead. It supports node.js and more
 

00:23:06.680 --> 00:23:08.790 align:start position:0%
instead. It supports node.js and more
advanced<00:23:07.200><c> setups</c><00:23:07.560><c> Claude</c><00:23:08.000><c> tends</c><00:23:08.280><c> to</c><00:23:08.440><c> use</c><00:23:08.680><c> for</c>

00:23:08.790 --> 00:23:08.800 align:start position:0%
advanced setups Claude tends to use for
 

00:23:08.800 --> 00:23:12.150 align:start position:0%
advanced setups Claude tends to use for
complex<00:23:09.320><c> sites.</c><00:23:10.160><c> Same</c><00:23:10.440><c> link,</c><00:23:10.960><c> same</c><00:23:11.240><c> 10%</c><00:23:11.720><c> off,</c>

00:23:12.150 --> 00:23:12.160 align:start position:0%
complex sites. Same link, same 10% off,
 

00:23:12.160 --> 00:23:14.110 align:start position:0%
complex sites. Same link, same 10% off,
just<00:23:12.440><c> one</c><00:23:12.680><c> tier</c><00:23:13.000><c> up.</c>

00:23:14.110 --> 00:23:14.120 align:start position:0%
just one tier up.
 

00:23:14.120 --> 00:23:15.990 align:start position:0%
just one tier up.
Remember<00:23:14.440><c> when</c><00:23:14.560><c> Claude</c><00:23:14.880><c> said</c><00:23:15.160><c> no</c><00:23:15.440><c> to</c><00:23:15.640><c> react</c>

00:23:15.990 --> 00:23:16.000 align:start position:0%
Remember when Claude said no to react
 

00:23:16.000 --> 00:23:17.790 align:start position:0%
Remember when Claude said no to react
back<00:23:16.240><c> in</c><00:23:16.320><c> chapter</c><00:23:16.640><c> six?</c><00:23:17.200><c> That's</c><00:23:17.440><c> the</c><00:23:17.520><c> kind</c><00:23:17.720><c> of</c>

00:23:17.790 --> 00:23:17.800 align:start position:0%
back in chapter six? That's the kind of
 

00:23:17.800 --> 00:23:18.950 align:start position:0%
back in chapter six? That's the kind of
moment<00:23:18.040><c> that</c><00:23:18.160><c> tells</c><00:23:18.400><c> you</c><00:23:18.480><c> which</c><00:23:18.640><c> plan</c><00:23:18.880><c> you</c>

00:23:18.950 --> 00:23:18.960 align:start position:0%
moment that tells you which plan you
 

00:23:18.960 --> 00:23:20.990 align:start position:0%
moment that tells you which plan you
need.<00:23:19.560><c> If</c><00:23:19.720><c> Claude</c><00:23:19.960><c> kept</c><00:23:20.200><c> your</c><00:23:20.320><c> site</c><00:23:20.520><c> simple,</c>

00:23:20.990 --> 00:23:21.000 align:start position:0%
need. If Claude kept your site simple,
 

00:23:21.000 --> 00:23:22.910 align:start position:0%
need. If Claude kept your site simple,
premium<00:23:21.360><c> is</c><00:23:21.520><c> fine.</c><00:23:22.240><c> If</c><00:23:22.360><c> Claude</c><00:23:22.640><c> built</c><00:23:22.840><c> you</c>

00:23:22.910 --> 00:23:22.920 align:start position:0%
premium is fine. If Claude built you
 

00:23:22.920 --> 00:23:24.910 align:start position:0%
premium is fine. If Claude built you
something<00:23:23.200><c> with</c><00:23:23.320><c> a</c><00:23:23.360><c> real</c><00:23:23.640><c> back</c><00:23:23.960><c> end,</c><00:23:24.440><c> you</c><00:23:24.600><c> want</c>

00:23:24.910 --> 00:23:24.920 align:start position:0%
something with a real back end, you want
 

00:23:24.920 --> 00:23:27.190 align:start position:0%
something with a real back end, you want
business.<00:23:25.880><c> For</c><00:23:26.040><c> our</c><00:23:26.120><c> steakhouse,</c><00:23:26.680><c> premium</c><00:23:27.120><c> is</c>

00:23:27.190 --> 00:23:27.200 align:start position:0%
business. For our steakhouse, premium is
 

00:23:27.200 --> 00:23:29.110 align:start position:0%
business. For our steakhouse, premium is
the<00:23:27.280><c> right</c><00:23:27.520><c> pick.</c><00:23:28.360><c> Open</c><00:23:28.600><c> the</c><00:23:28.680><c> link</c><00:23:28.920><c> from</c><00:23:29.040><c> the</c>

00:23:29.110 --> 00:23:29.120 align:start position:0%
the right pick. Open the link from the
 

00:23:29.120 --> 00:23:31.470 align:start position:0%
the right pick. Open the link from the
description,<00:23:30.000><c> then</c><00:23:30.320><c> on</c><00:23:30.440><c> this</c><00:23:30.600><c> page</c><00:23:30.920><c> here,</c>

00:23:31.470 --> 00:23:31.480 align:start position:0%
description, then on this page here,
 

00:23:31.480 --> 00:23:33.550 align:start position:0%
description, then on this page here,
click<00:23:31.760><c> start</c><00:23:32.120><c> now,</c><00:23:32.840><c> and</c><00:23:32.920><c> that'll</c><00:23:33.160><c> scroll</c><00:23:33.400><c> you</c>

00:23:33.550 --> 00:23:33.560 align:start position:0%
click start now, and that'll scroll you
 

00:23:33.560 --> 00:23:36.110 align:start position:0%
click start now, and that'll scroll you
down<00:23:34.240><c> to</c><00:23:34.360><c> the</c><00:23:34.440><c> pricing</c><00:23:34.840><c> panels.</c><00:23:35.680><c> Select</c><00:23:36.040><c> the</c>

00:23:36.110 --> 00:23:36.120 align:start position:0%
down to the pricing panels. Select the
 

00:23:36.120 --> 00:23:38.470 align:start position:0%
down to the pricing panels. Select the
plan<00:23:36.400><c> you</c><00:23:36.480><c> want,</c><00:23:37.520><c> set</c><00:23:37.680><c> the</c><00:23:37.800><c> term</c><00:23:38.000><c> to</c><00:23:38.080><c> 12</c>

00:23:38.470 --> 00:23:38.480 align:start position:0%
plan you want, set the term to 12
 

00:23:38.480 --> 00:23:40.390 align:start position:0%
plan you want, set the term to 12
months.<00:23:39.040><c> 12</c><00:23:39.280><c> months</c><00:23:39.440><c> is</c><00:23:39.560><c> the</c><00:23:39.680><c> minimum</c><00:23:40.040><c> term</c>

00:23:40.390 --> 00:23:40.400 align:start position:0%
months. 12 months is the minimum term
 

00:23:40.400 --> 00:23:41.950 align:start position:0%
months. 12 months is the minimum term
that<00:23:40.600><c> gets</c><00:23:40.840><c> you</c><00:23:40.960><c> a</c><00:23:41.080><c> free</c><00:23:41.360><c> domain</c><00:23:41.760><c> for</c><00:23:41.880><c> the</c>

00:23:41.950 --> 00:23:41.960 align:start position:0%
that gets you a free domain for the
 

00:23:41.960 --> 00:23:44.070 align:start position:0%
that gets you a free domain for the
first<00:23:42.280><c> year.</c><00:23:43.000><c> Now</c><00:23:43.320><c> search</c><00:23:43.560><c> for</c><00:23:43.640><c> the</c><00:23:43.720><c> domain</c>

00:23:44.070 --> 00:23:44.080 align:start position:0%
first year. Now search for the domain
 

00:23:44.080 --> 00:23:46.830 align:start position:0%
first year. Now search for the domain
you<00:23:44.200><c> want.</c><00:23:45.000><c> If</c><00:23:45.120><c> it's</c><00:23:45.240><c> available,</c><00:23:46.000><c> claim</c><00:23:46.360><c> it.</c>

00:23:46.830 --> 00:23:46.840 align:start position:0%
you want. If it's available, claim it.
 

00:23:46.840 --> 00:23:48.390 align:start position:0%
you want. If it's available, claim it.
Your<00:23:47.000><c> cart</c><00:23:47.280><c> total</c><00:23:47.560><c> is</c><00:23:47.640><c> going</c><00:23:47.840><c> to</c><00:23:47.920><c> depend</c><00:23:48.240><c> on</c>

00:23:48.390 --> 00:23:48.400 align:start position:0%
Your cart total is going to depend on
 

00:23:48.400 --> 00:23:50.350 align:start position:0%
Your cart total is going to depend on
whatever<00:23:48.720><c> promotion</c><00:23:49.240><c> Hostinger</c><00:23:49.800><c> has</c><00:23:50.120><c> running</c>

00:23:50.350 --> 00:23:50.360 align:start position:0%
whatever promotion Hostinger has running
 

00:23:50.360 --> 00:23:52.350 align:start position:0%
whatever promotion Hostinger has running
when<00:23:50.480><c> you</c><00:23:50.600><c> sign</c><00:23:50.920><c> up.</c><00:23:51.480><c> For</c><00:23:51.640><c> me,</c><00:23:51.840><c> it</c><00:23:51.960><c> comes</c><00:23:52.200><c> out</c>

00:23:52.350 --> 00:23:52.360 align:start position:0%
when you sign up. For me, it comes out
 

00:23:52.360 --> 00:23:54.590 align:start position:0%
when you sign up. For me, it comes out
to<00:23:52.440><c> about</c><00:23:52.680><c> $43</c><00:23:53.600><c> for</c><00:23:53.720><c> the</c><00:23:53.840><c> year.</c><00:23:54.320><c> That's</c>

00:23:54.590 --> 00:23:54.600 align:start position:0%
to about $43 for the year. That's
 

00:23:54.600 --> 00:23:57.230 align:start position:0%
to about $43 for the year. That's
hosting<00:23:55.160><c> plus</c><00:23:55.520><c> a</c><00:23:55.560><c> domain</c><00:23:56.120><c> plus</c><00:23:56.520><c> a</c><00:23:56.600><c> free</c><00:23:56.920><c> email</c>

00:23:57.230 --> 00:23:57.240 align:start position:0%
hosting plus a domain plus a free email
 

00:23:57.240 --> 00:23:59.910 align:start position:0%
hosting plus a domain plus a free email
account<00:23:57.800><c> all</c><00:23:58.120><c> in.</c><00:23:59.040><c> The</c><00:23:59.120><c> exact</c><00:23:59.440><c> number</c><00:23:59.640><c> you</c><00:23:59.760><c> see</c>

00:23:59.910 --> 00:23:59.920 align:start position:0%
account all in. The exact number you see
 

00:23:59.920 --> 00:24:01.310 align:start position:0%
account all in. The exact number you see
might<00:24:00.160><c> be</c><00:24:00.320><c> a</c><00:24:00.400><c> few</c><00:24:00.600><c> dollars</c><00:24:00.880><c> different,</c><00:24:01.200><c> but</c>

00:24:01.310 --> 00:24:01.320 align:start position:0%
might be a few dollars different, but
 

00:24:01.320 --> 00:24:02.990 align:start position:0%
might be a few dollars different, but
using<00:24:01.560><c> the</c><00:24:01.640><c> link</c><00:24:01.880><c> below</c><00:24:02.240><c> is</c><00:24:02.440><c> always</c><00:24:02.760><c> going</c><00:24:02.920><c> to</c>

00:24:02.990 --> 00:24:03.000 align:start position:0%
using the link below is always going to
 

00:24:03.000 --> 00:24:04.870 align:start position:0%
using the link below is always going to
get<00:24:03.160><c> you</c><00:24:03.240><c> the</c><00:24:03.320><c> best</c><00:24:03.520><c> available</c><00:24:03.920><c> price.</c><00:24:04.600><c> If</c><00:24:04.760><c> you</c>

00:24:04.870 --> 00:24:04.880 align:start position:0%
get you the best available price. If you
 

00:24:04.880 --> 00:24:06.550 align:start position:0%
get you the best available price. If you
add<00:24:05.080><c> a</c><00:24:05.160><c> month</c><00:24:05.400><c> of</c><00:24:05.480><c> Claude</c><00:24:05.840><c> Pro</c><00:24:06.160><c> on</c><00:24:06.280><c> top</c><00:24:06.480><c> of</c>

00:24:06.550 --> 00:24:06.560 align:start position:0%
add a month of Claude Pro on top of
 

00:24:06.560 --> 00:24:07.990 align:start position:0%
add a month of Claude Pro on top of
that,<00:24:06.720><c> which</c><00:24:06.880><c> is</c><00:24:06.960><c> about</c><00:24:07.200><c> 20</c><00:24:07.400><c> bucks,</c><00:24:07.760><c> you've</c>

00:24:07.990 --> 00:24:08.000 align:start position:0%
that, which is about 20 bucks, you've
 

00:24:08.000 --> 00:24:11.590 align:start position:0%
that, which is about 20 bucks, you've
built<00:24:08.280><c> a</c><00:24:08.400><c> $10,000</c><00:24:09.400><c> website</c><00:24:09.880><c> for</c><00:24:10.120><c> roughly</c><00:24:10.760><c> $60</c>

00:24:11.590 --> 00:24:11.600 align:start position:0%
built a $10,000 website for roughly $60
 

00:24:11.600 --> 00:24:12.710 align:start position:0%
built a $10,000 website for roughly $60
total.

00:24:12.710 --> 00:24:12.720 align:start position:0%
total.
 

00:24:12.720 --> 00:24:14.310 align:start position:0%
total.
Click<00:24:12.880><c> continue,</c>

00:24:14.310 --> 00:24:14.320 align:start position:0%
Click continue,
 

00:24:14.320 --> 00:24:16.630 align:start position:0%
Click continue,
then<00:24:15.040><c> add</c><00:24:15.240><c> your</c><00:24:15.440><c> email</c><00:24:15.880><c> and</c><00:24:16.000><c> a</c><00:24:16.040><c> password</c><00:24:16.520><c> to</c>

00:24:16.630 --> 00:24:16.640 align:start position:0%
then add your email and a password to
 

00:24:16.640 --> 00:24:19.230 align:start position:0%
then add your email and a password to
register<00:24:16.960><c> an</c><00:24:17.040><c> account.</c><00:24:17.880><c> On</c><00:24:18.000><c> the</c><00:24:18.080><c> next</c><00:24:18.320><c> page,</c>

00:24:19.230 --> 00:24:19.240 align:start position:0%
register an account. On the next page,
 

00:24:19.240 --> 00:24:20.710 align:start position:0%
register an account. On the next page,
enter<00:24:19.520><c> your</c><00:24:19.720><c> billing</c><00:24:20.000><c> information</c><00:24:20.600><c> to</c>

00:24:20.710 --> 00:24:20.720 align:start position:0%
enter your billing information to
 

00:24:20.720 --> 00:24:22.790 align:start position:0%
enter your billing information to
complete<00:24:21.040><c> the</c><00:24:21.080><c> transaction.</c>

00:24:22.790 --> 00:24:22.800 align:start position:0%
complete the transaction.
 

00:24:22.800 --> 00:24:24.150 align:start position:0%
complete the transaction.
After<00:24:23.080><c> checkout</c><00:24:23.400><c> is</c><00:24:23.480><c> complete,</c><00:24:24.000><c> the</c>

00:24:24.150 --> 00:24:24.160 align:start position:0%
After checkout is complete, the
 

00:24:24.160 --> 00:24:26.310 align:start position:0%
After checkout is complete, the
onboarding<00:24:24.560><c> flow</c><00:24:24.880><c> asks</c><00:24:25.360><c> what</c><00:24:25.680><c> kind</c><00:24:25.920><c> of</c><00:24:26.040><c> site</c>

00:24:26.310 --> 00:24:26.320 align:start position:0%
onboarding flow asks what kind of site
 

00:24:26.320 --> 00:24:28.470 align:start position:0%
onboarding flow asks what kind of site
you<00:24:26.480><c> have.</c><00:24:27.240><c> Since</c><00:24:27.480><c> we're</c><00:24:27.600><c> uploading</c><00:24:28.000><c> our</c><00:24:28.240><c> own</c>

00:24:28.470 --> 00:24:28.480 align:start position:0%
you have. Since we're uploading our own
 

00:24:28.480 --> 00:24:32.110 align:start position:0%
you have. Since we're uploading our own
files,<00:24:29.040><c> pick</c><00:24:29.680><c> migrate</c><00:24:30.200><c> existing</c><00:24:30.680><c> site,</c>

00:24:32.110 --> 00:24:32.120 align:start position:0%
files, pick migrate existing site,
 

00:24:32.120 --> 00:24:35.270 align:start position:0%
files, pick migrate existing site,
then<00:24:32.760><c> upload</c><00:24:33.200><c> backup</c><00:24:33.600><c> files.</c>

00:24:35.270 --> 00:24:35.280 align:start position:0%
then upload backup files.
 

00:24:35.280 --> 00:24:37.750 align:start position:0%
then upload backup files.
Then<00:24:35.600><c> select</c><00:24:36.000><c> the</c><00:24:36.080><c> domain</c><00:24:36.440><c> you</c><00:24:36.560><c> just</c><00:24:36.800><c> bought.</c>

00:24:37.750 --> 00:24:37.760 align:start position:0%
Then select the domain you just bought.
 

00:24:37.760 --> 00:24:39.510 align:start position:0%
Then select the domain you just bought.
Now<00:24:38.040><c> return</c><00:24:38.440><c> to</c><00:24:38.560><c> your</c><00:24:38.720><c> project</c><00:24:39.160><c> folder</c><00:24:39.400><c> on</c>

00:24:39.510 --> 00:24:39.520 align:start position:0%
Now return to your project folder on
 

00:24:39.520 --> 00:24:41.350 align:start position:0%
Now return to your project folder on
your<00:24:39.640><c> computer</c><00:24:40.160><c> so</c><00:24:40.320><c> you</c><00:24:40.400><c> can</c><00:24:40.600><c> see</c><00:24:40.840><c> the</c><00:24:40.960><c> files</c>

00:24:41.350 --> 00:24:41.360 align:start position:0%
your computer so you can see the files
 

00:24:41.360 --> 00:24:43.190 align:start position:0%
your computer so you can see the files
that<00:24:41.480><c> Claude</c><00:24:41.880><c> built.</c>

00:24:43.190 --> 00:24:43.200 align:start position:0%
that Claude built.
 

00:24:43.200 --> 00:24:45.270 align:start position:0%
that Claude built.
Your<00:24:43.520><c> index.html</c>

00:24:45.270 --> 00:24:45.280 align:start position:0%
Your index.html
 

00:24:45.280 --> 00:24:48.030 align:start position:0%
Your index.html
plus<00:24:45.840><c> any</c><00:24:46.120><c> images,</c><00:24:46.640><c> videos,</c><00:24:47.120><c> or</c><00:24:47.280><c> sub</c><00:24:47.600><c> folders</c>

00:24:48.030 --> 00:24:48.040 align:start position:0%
plus any images, videos, or sub folders
 

00:24:48.040 --> 00:24:49.510 align:start position:0%
plus any images, videos, or sub folders
sitting<00:24:48.360><c> inside.</c>

00:24:49.510 --> 00:24:49.520 align:start position:0%
sitting inside.
 

00:24:49.520 --> 00:24:51.270 align:start position:0%
sitting inside.
Here's<00:24:49.760><c> the</c><00:24:49.840><c> part</c><00:24:50.040><c> that</c><00:24:50.200><c> matters.</c>

00:24:51.270 --> 00:24:51.280 align:start position:0%
Here's the part that matters.
 

00:24:51.280 --> 00:24:53.350 align:start position:0%
Here's the part that matters.
You<00:24:51.360><c> don't</c><00:24:51.680><c> want</c><00:24:51.880><c> to</c><00:24:52.040><c> zip</c><00:24:52.440><c> the</c><00:24:52.560><c> project</c><00:24:53.040><c> folder</c>

00:24:53.350 --> 00:24:53.360 align:start position:0%
You don't want to zip the project folder
 

00:24:53.360 --> 00:24:56.470 align:start position:0%
You don't want to zip the project folder
itself.<00:24:53.960><c> You</c><00:24:54.120><c> want</c><00:24:54.400><c> to</c><00:24:54.560><c> zip</c><00:24:55.080><c> the</c><00:24:55.200><c> files</c><00:24:55.760><c> inside</c>

00:24:56.470 --> 00:24:56.480 align:start position:0%
itself. You want to zip the files inside
 

00:24:56.480 --> 00:24:57.630 align:start position:0%
itself. You want to zip the files inside
the<00:24:56.600><c> folder.</c>

00:24:57.630 --> 00:24:57.640 align:start position:0%
the folder.
 

00:24:57.640 --> 00:24:59.950 align:start position:0%
the folder.
If<00:24:57.840><c> you</c><00:24:57.960><c> zip</c><00:24:58.240><c> the</c><00:24:58.360><c> whole</c><00:24:58.720><c> folder,</c><00:24:59.440><c> Hostinger</c>

00:24:59.950 --> 00:24:59.960 align:start position:0%
If you zip the whole folder, Hostinger
 

00:24:59.960 --> 00:25:01.590 align:start position:0%
If you zip the whole folder, Hostinger
unzips<00:25:00.400><c> it</c><00:25:00.480><c> on</c><00:25:00.560><c> their</c><00:25:00.680><c> server</c><00:25:01.040><c> and</c><00:25:01.160><c> your</c><00:25:01.280><c> site</c>

00:25:01.590 --> 00:25:01.600 align:start position:0%
unzips it on their server and your site
 

00:25:01.600 --> 00:25:03.550 align:start position:0%
unzips it on their server and your site
ends<00:25:01.800><c> up</c><00:25:02.040><c> one</c><00:25:02.440><c> directory</c><00:25:03.000><c> deeper</c><00:25:03.280><c> than</c><00:25:03.480><c> it</c>

00:25:03.550 --> 00:25:03.560 align:start position:0%
ends up one directory deeper than it
 

00:25:03.560 --> 00:25:06.430 align:start position:0%
ends up one directory deeper than it
should.<00:25:04.240><c> Your</c><00:25:04.360><c> domain</c><00:25:04.840><c> loads</c><00:25:05.080><c> a</c><00:25:05.120><c> blank</c><00:25:05.440><c> page.</c>

00:25:06.430 --> 00:25:06.440 align:start position:0%
should. Your domain loads a blank page.
 

00:25:06.440 --> 00:25:08.830 align:start position:0%
should. Your domain loads a blank page.
So,<00:25:07.120><c> select</c><00:25:07.600><c> everything</c><00:25:08.080><c> inside</c><00:25:08.720><c> your</c>

00:25:08.830 --> 00:25:08.840 align:start position:0%
So, select everything inside your
 

00:25:08.840 --> 00:25:11.390 align:start position:0%
So, select everything inside your
project<00:25:09.320><c> folder.</c><00:25:10.120><c> That's</c><00:25:10.360><c> command</c><00:25:10.760><c> A</c><00:25:10.880><c> on</c><00:25:11.040><c> Mac</c>

00:25:11.390 --> 00:25:11.400 align:start position:0%
project folder. That's command A on Mac
 

00:25:11.400 --> 00:25:13.910 align:start position:0%
project folder. That's command A on Mac
or<00:25:11.640><c> control</c><00:25:12.040><c> A</c><00:25:12.120><c> on</c><00:25:12.240><c> Windows.</c><00:25:13.200><c> Then</c><00:25:13.600><c> right</c>

00:25:13.910 --> 00:25:13.920 align:start position:0%
or control A on Windows. Then right
 

00:25:13.920 --> 00:25:17.070 align:start position:0%
or control A on Windows. Then right
click<00:25:14.320><c> on</c><00:25:14.480><c> your</c><00:25:14.640><c> selection.</c><00:25:15.800><c> On</c><00:25:16.000><c> Mac,</c><00:25:16.480><c> hit</c>

00:25:17.070 --> 00:25:17.080 align:start position:0%
click on your selection. On Mac, hit
 

00:25:17.080 --> 00:25:18.470 align:start position:0%
click on your selection. On Mac, hit
compress.

00:25:18.470 --> 00:25:18.480 align:start position:0%
compress.
 

00:25:18.480 --> 00:25:22.470 align:start position:0%
compress.
On<00:25:18.720><c> Windows,</c><00:25:19.600><c> pick</c><00:25:20.040><c> send</c><00:25:20.480><c> to</c><00:25:21.320><c> then</c><00:25:21.920><c> compressed</c>

00:25:22.470 --> 00:25:22.480 align:start position:0%
On Windows, pick send to then compressed
 

00:25:22.480 --> 00:25:23.630 align:start position:0%
On Windows, pick send to then compressed
folder.

00:25:23.630 --> 00:25:23.640 align:start position:0%
folder.
 

00:25:23.640 --> 00:25:25.310 align:start position:0%
folder.
You<00:25:23.800><c> get</c><00:25:24.080><c> one</c><00:25:24.320><c> zip</c><00:25:24.560><c> file</c><00:25:25.000><c> with</c><00:25:25.120><c> your</c>

00:25:25.310 --> 00:25:25.320 align:start position:0%
You get one zip file with your
 

00:25:25.320 --> 00:25:27.830 align:start position:0%
You get one zip file with your
index.html<00:25:26.760><c> sitting</c><00:25:27.200><c> right</c><00:25:27.400><c> at</c><00:25:27.480><c> the</c><00:25:27.560><c> top</c>

00:25:27.830 --> 00:25:27.840 align:start position:0%
index.html sitting right at the top
 

00:25:27.840 --> 00:25:29.710 align:start position:0%
index.html sitting right at the top
level.<00:25:28.560><c> That's</c><00:25:28.760><c> exactly</c><00:25:29.160><c> what</c><00:25:29.280><c> Hostinger</c>

00:25:29.710 --> 00:25:29.720 align:start position:0%
level. That's exactly what Hostinger
 

00:25:29.720 --> 00:25:32.070 align:start position:0%
level. That's exactly what Hostinger
wants.<00:25:30.480><c> You</c><00:25:30.600><c> can</c><00:25:30.680><c> drag</c><00:25:30.920><c> the</c><00:25:31.000><c> zip</c><00:25:31.240><c> file</c><00:25:31.840><c> back</c>

00:25:32.070 --> 00:25:32.080 align:start position:0%
wants. You can drag the zip file back
 

00:25:32.080 --> 00:25:33.870 align:start position:0%
wants. You can drag the zip file back
out<00:25:32.320><c> to</c><00:25:32.400><c> the</c><00:25:32.520><c> same</c><00:25:32.760><c> level</c><00:25:33.120><c> as</c><00:25:33.280><c> your</c><00:25:33.400><c> parent</c>

00:25:33.870 --> 00:25:33.880 align:start position:0%
out to the same level as your parent
 

00:25:33.880 --> 00:25:35.750 align:start position:0%
out to the same level as your parent
folder.<00:25:34.840><c> And</c><00:25:35.000><c> then</c><00:25:35.160><c> give</c><00:25:35.320><c> it</c><00:25:35.400><c> a</c><00:25:35.440><c> relevant</c>

00:25:35.750 --> 00:25:35.760 align:start position:0%
folder. And then give it a relevant
 

00:25:35.760 --> 00:25:36.670 align:start position:0%
folder. And then give it a relevant
name.

00:25:36.670 --> 00:25:36.680 align:start position:0%
name.
 

00:25:36.680 --> 00:25:39.150 align:start position:0%
name.
Drag<00:25:37.000><c> that</c><00:25:37.240><c> zip</c><00:25:37.600><c> into</c><00:25:37.840><c> Hostinger</c><00:25:38.880><c> and</c><00:25:39.000><c> once</c>

00:25:39.150 --> 00:25:39.160 align:start position:0%
Drag that zip into Hostinger and once
 

00:25:39.160 --> 00:25:41.950 align:start position:0%
Drag that zip into Hostinger and once
the<00:25:39.280><c> files</c><00:25:39.600><c> finish</c><00:25:39.920><c> uploading,</c><00:25:40.600><c> click</c><00:25:40.880><c> next.</c>

00:25:41.950 --> 00:25:41.960 align:start position:0%
the files finish uploading, click next.
 

00:25:41.960 --> 00:25:44.190 align:start position:0%
the files finish uploading, click next.
Then<00:25:42.240><c> click</c><00:25:42.600><c> submit</c><00:25:43.040><c> request.</c><00:25:43.880><c> Once</c><00:25:44.080><c> it</c>

00:25:44.190 --> 00:25:44.200 align:start position:0%
Then click submit request. Once it
 

00:25:44.200 --> 00:25:46.910 align:start position:0%
Then click submit request. Once it
loads,<00:25:45.160><c> click</c><00:25:45.400><c> on</c><00:25:45.480><c> your</c><00:25:45.600><c> domain</c>

00:25:46.910 --> 00:25:46.920 align:start position:0%
loads, click on your domain
 

00:25:46.920 --> 00:25:49.590 align:start position:0%
loads, click on your domain
and<00:25:47.160><c> there</c><00:25:47.400><c> it</c><00:25:47.520><c> is.</c><00:25:48.280><c> That's</c><00:25:48.600><c> your</c><00:25:48.760><c> $10,000</c>

00:25:49.590 --> 00:25:49.600 align:start position:0%
and there it is. That's your $10,000
 

00:25:49.600 --> 00:25:52.430 align:start position:0%
and there it is. That's your $10,000
website<00:25:50.200><c> live</c><00:25:50.680><c> at</c><00:25:50.840><c> your</c><00:25:51.080><c> own</c><00:25:51.440><c> custom</c><00:25:51.840><c> domain</c>

00:25:52.430 --> 00:25:52.440 align:start position:0%
website live at your own custom domain
 

00:25:52.440 --> 00:25:55.070 align:start position:0%
website live at your own custom domain
built<00:25:52.800><c> with</c><00:25:52.960><c> just</c><00:25:53.160><c> a</c><00:25:53.240><c> handful</c><00:25:53.720><c> of</c><00:25:53.840><c> prompts.</c><00:25:54.920><c> If</c>

00:25:55.070 --> 00:25:55.080 align:start position:0%
built with just a handful of prompts. If
 

00:25:55.080 --> 00:25:56.830 align:start position:0%
built with just a handful of prompts. If
you<00:25:55.160><c> want</c><00:25:55.360><c> yours</c><00:25:55.600><c> online</c><00:25:56.080><c> too,</c><00:25:56.520><c> grab</c>

00:25:56.830 --> 00:25:56.840 align:start position:0%
you want yours online too, grab
 

00:25:56.840 --> 00:25:58.230 align:start position:0%
you want yours online too, grab
Hostinger<00:25:57.280><c> using</c><00:25:57.520><c> the</c><00:25:57.600><c> first</c><00:25:57.920><c> link</c><00:25:58.080><c> in</c><00:25:58.160><c> the</c>

00:25:58.230 --> 00:25:58.240 align:start position:0%
Hostinger using the first link in the
 

00:25:58.240 --> 00:25:59.910 align:start position:0%
Hostinger using the first link in the
description<00:25:58.640><c> below.</c><00:25:59.280><c> That's</c><00:25:59.480><c> how</c><00:25:59.560><c> you</c><00:25:59.680><c> lock</c>

00:25:59.910 --> 00:25:59.920 align:start position:0%
description below. That's how you lock
 

00:25:59.920 --> 00:26:01.750 align:start position:0%
description below. That's how you lock
in<00:26:00.000><c> your</c><00:26:00.120><c> 10%</c><00:26:00.600><c> discount</c><00:26:01.000><c> on</c><00:26:01.120><c> top</c><00:26:01.400><c> of</c><00:26:01.480><c> whatever</c>

00:26:01.750 --> 00:26:01.760 align:start position:0%
in your 10% discount on top of whatever
 

00:26:01.760 --> 00:26:03.510 align:start position:0%
in your 10% discount on top of whatever
promotion<00:26:02.320><c> they</c><00:26:02.440><c> already</c><00:26:02.680><c> have</c><00:26:02.880><c> running.</c>

00:26:03.510 --> 00:26:03.520 align:start position:0%
promotion they already have running.
 

00:26:03.520 --> 00:26:05.030 align:start position:0%
promotion they already have running.
It's<00:26:03.680><c> the</c><00:26:03.760><c> cheapest</c><00:26:04.120><c> way</c><00:26:04.320><c> I</c><00:26:04.440><c> know</c><00:26:04.600><c> of</c><00:26:04.760><c> to</c><00:26:04.840><c> put</c><00:26:05.000><c> a</c>

00:26:05.030 --> 00:26:05.040 align:start position:0%
It's the cheapest way I know of to put a
 

00:26:05.040 --> 00:26:06.390 align:start position:0%
It's the cheapest way I know of to put a
real<00:26:05.320><c> professional</c><00:26:05.800><c> website</c><00:26:06.160><c> on</c><00:26:06.280><c> the</c>

00:26:06.390 --> 00:26:06.400 align:start position:0%
real professional website on the
 

00:26:06.400 --> 00:26:10.320 align:start position:0%
real professional website on the
internet.<00:26:07.440><c> Thanks</c><00:26:07.680><c> for</c><00:26:07.840><c> watching.</c>