“Claude is better at translating intent into specifics than most people are at writing specifications.”— สั่งด้วยเจตนา ไม่ใช่สเปก (18:26)
“By default, Claude makes your site responsive... but responsive isn't the same as designed for phones.”— มือถือต้องออกแบบ ไม่ใช่แค่ย่อจอ (20:45)
“Six dishes, one fire. That's restraint, not adjectives. That's what separates a $10,000 menu from a $200 one.”— copy แพง = ความยับยั้ง (20:05)
“The point is that Claude protects the architecture you set up. It doesn't break things just because you asked.”— Claude ปกป้อง architecture (14:36)
“You set the bar high at the start, and now you check yourself against it. This is the move that separates a polished result from a generic one.”— เกรดตัวเองคือจุดตัด pro/generic (16:50)
0:00 In this video, I'm going to show you how
0:02 to build a $10,000 website using Claude
0:04 code. These sites you're seeing were all
0:07 built with Claude code, and by the end
0:08 of this video, yours is going to be one
0:10 of them. We'll install Claude code,
0:12 level it up with two design skills,
0:14 write one prompt, polish the result, and
0:17 put it on a real domain. The site is
0:19 going to look like the work of a
0:20 freelance developer charging $10,000,
0:23 and nobody who visits it is going to
0:25 know an AI made it. Stick around for
0:27 chapter seven especially. That's where
0:28 the cursor effects and motion design
0:30 take the build from professional to
0:32 expensive. And by the very end, I'll
0:34 show you the cheapest way to put it live
0:36 on the internet at a custom domain. But
0:39 first, what exactly is Claude code?
0:42 Claude code is an AI coding assistant.
0:44 You describe a website to it in natural
0:46 language, and it writes the code for you
0:47 while you watch.
0:49 We're using the Claude code desktop app
0:51 today because it gives you everything
0:52 you need in one window with no extra
0:54 developer setup. Before we build
0:56 anything, I want to define what a
0:58 $10,000 website actually looks like. So,
1:02 I asked Claude. There are eight things
1:04 that separate a $10,000 website from a
1:06 $200 one.
1:08 Point of view,
1:10 typography,
1:11 color,
1:13 hierarchy,
1:14 imagery,
1:16 motion,
1:17 mobile,
1:18 and the invisible stuff that makes a
1:20 site feel fast and finished.
1:23 Those eight items fall into three
1:25 groups: taste, substance, and felt
1:28 quality. We're hitting all eight today.
1:31 Here's why Claude code can hit a $10,000
1:33 bar and why most no-code website
1:35 builders can't. When you use a tool like
1:38 Wix or Squarespace, you start with a
1:40 template, and whatever you build ends up
1:42 looking like every other site that
1:44 started from that template. Claude code
1:46 doesn't work that way. It writes the
1:48 code for your site from scratch based on
1:50 what you describe. So, you can get a
1:52 completely custom result without ever
1:54 having to learn to code yourself. On top
1:57 of that, Claude can install design
1:59 skills that level up everything it
2:00 makes. You can drop in pre-made
2:03 components from libraries online, the
2:04 kind of things that used to require a
2:06 real developer, and you can keep
2:08 iterating with Claude on every detail
2:10 until the site actually feels expensive.
2:13 We're going to do all of that today. The
2:15 first step is getting Claude code set up
2:17 on your computer.
2:19 Go to claude.com using the link in the
2:21 description below and pick the pro plan.
2:24 Right now, as I'm recording this, it's
2:26 only $20 per month, and that's going to
2:28 cover everything we need for this video.
2:31 Get yourself signed up and I'll skip
2:33 past the boring stuff.
2:35 Once you're logged in, in the bottom
2:36 left corner of the page, click the
2:38 download icon.
2:40 Navigate to the Claude code section.
2:43 Download the desktop app version, then
2:46 open the file to run the installer.
2:49 Once you get it installed, open the
2:50 desktop app, then sign in. At this
2:53 point, I need to mention, depending on
2:55 when you watch this video, the actual
2:57 software interface might look different
2:59 for you than it does for me here. Claude
3:01 gets updated regularly, so if things
3:03 don't look the exact same, don't panic.
3:05 Just try to understand the general
3:07 concepts I'm explaining and apply them
3:08 to how the software looks when you're
3:10 using it. When you get signed in, switch
3:12 from chat mode to code mode.
3:14 In my app, that tab is available in the
3:17 upper left. Alternatively, you can also
3:19 press command three on your keyboard on
3:21 a Mac or control three on Windows to
3:25 switch to code mode. Claude code works
3:27 best when it has its own folder to live
3:29 in.
3:30 Create one anywhere on your computer,
3:32 then click the folder select button near
3:34 the chat box,
3:35 and select your new folder to open it
3:37 inside the app.
3:39 That folder is going to be your
3:40 workspace for this project from now on.
3:43 All right, that's the setup done. Now
3:44 we're going to level Claude up by
3:46 installing two skills.
3:49 Out of the box, Claude is a
3:50 general-purpose AI. It knows a lot about
3:54 a lot of things, but its default design
3:56 output is just okay.
3:59 It tends to reach for the same fonts,
4:00 the same colors, and the same
4:02 predictable layouts you've seen on every
4:04 other AI-generated website.
4:06 This is why a lot of AI websites end up
4:08 looking generic. Skills fix that. A
4:11 skill is like an instruction manual for
4:13 Claude, a text file that levels up
4:15 Claude's knowledge in one specific area.
4:18 You install it once, and Claude uses it
4:20 forever. We're installing two skills
4:23 today, and both of them are free. The
4:25 first skill we're installing is called
4:26 front-end design. It's built by
4:28 Anthropic, the company behind Claude. It
4:31 runs in the background, and it quietly
4:33 makes Claude smarter at design.
4:35 What it actually does is ban the most
4:38 overused fonts on the internet and push
4:40 Claude toward bold design direction
4:42 instead of generic AI output. To install
4:45 it, grab the front-end design link from
4:47 the description below and paste it into
4:49 Claude code with the message install
4:52 this skill.
4:54 Then, send the message and let it run.
4:56 Allow the edits when it asks,
4:59 and install it globally.
5:00 The second skill is community-built.
5:03 It's called UI UX Pro Max.
5:07 As you can see on screen, it ships with
5:09 57 UI styles, 95 color palettes, and 56
5:13 font pairings.
5:15 Unlike the first skill, this one we call
5:17 directly when we want a big design
5:19 intervention. And that's exactly how
5:21 we're going to build our site today. To
5:23 install it, grab the UI UX Pro Max link
5:26 from the description below and paste it
5:28 into Claude code with the message
5:31 install this plugin using npm.
5:34 That exact phrasing matters because it's
5:36 what gets it to install cleanly using
5:38 the terminal.
5:43 Now, there's one last setup move before
5:45 we start building.
5:46 Click the mode selector in the bottom
5:48 left under your chat
5:50 and switch it to auto mode. This lets
5:53 Claude work without stopping to ask for
5:55 permission at every step. With auto mode
5:57 on and both skills installed, we're
5:59 ready to write the prompt that builds
6:01 the site. But, there's one more thing
6:03 worth talking about first.
6:07 The other big thing that separates a
6:08 great result from a mediocre one is the
6:10 brief you give Claude. The more specific
6:13 you are, the better the result. If you
6:15 already know exactly what you want, just
6:17 describe it. And that's what I did for
6:19 this build. But, describing visual taste
6:22 in words is hard, especially if you're
6:25 newer to design. You don't speak the
6:27 design language yet, and that makes it
6:29 tough to tell Claude what you want.
6:32 If you're in that spot, references are
6:34 your shortcut. References are just
6:36 screenshots of sites you like that you
6:39 give to Claude so it can match the
6:40 visual style. It's a lot easier to show
6:43 Claude what you want than to describe
6:45 it. References are also useful for
6:47 refining your own direction before you
6:49 commit. You scroll, you find things you
6:51 like, and you start to understand what
6:53 your taste actually is. I'll share a few
6:55 of my favorite websites with you that
6:57 you can draw ideas from. This is
6:59 Dribbble. It's where designers post
7:02 their work, and it's full of inspiration
7:03 for almost any style of website.
7:06 This is Awwwards. These are sites that
7:08 have won industry design awards, so it's
7:10 a great place to browse high-quality
7:12 designs. And you can always just search
7:15 Pinterest for the kind of site you want
7:17 to build. It pulls examples from
7:19 everywhere. Here, [snorts] I searched
7:21 for modern website design restaurant.
7:24 I've included links to all of these in
7:25 the description below. Find three to
7:27 five sites you like and save screenshots
7:30 of them. You're not copying these sites.
7:32 Instead, you're showing Claude what you
7:34 like and how you want your own design to
7:36 end up. For my build, I'm creating a
7:38 website for a restaurant in Seattle.
7:41 Here's the prompt I used. This is the
7:43 whole video in a single sentence.
7:46 {forward slash} UI-UX-Pro-Max
7:51 is how we call the design skill we just
7:53 installed. Then we type out the brief
7:56 for the AI. The trick to making this
7:58 work is this last line. Ask me
8:00 clarifying questions. That's the line
8:03 that makes Claude stop and to think
8:05 before it starts building.
8:07 Here Claude comes back with seven
8:08 questions. They cover the restaurant
8:10 name, the style direction, which
8:13 sections we want, who's writing the
8:14 content, the tech stack, the animation
8:17 level, and anything else we want to
8:18 specify.
8:20 And here's the part that really matters.
8:22 Claude offers three style directions to
8:24 choose from. A Manhattan steakhouse with
8:27 dark moody energy, a Pacific Northwest
8:30 modern look, or a classic old-school
8:32 chop house. It's giving you the menu of
8:34 style options. I picked dark moody
8:37 luxury, but with Pacific Northwest
8:40 grounding, so it doesn't look like a
8:41 Manhattan steakhouse.
8:43 Five sections total. No gallery, no
8:45 booking system, just a single page that
8:47 scrolls all the way through.
8:50 This is the most important moment in the
8:51 entire build. The answers you give here
8:54 become the entire site. The more
8:57 specific you are at this stage, the less
8:59 you'll have to fight Claude later to
9:01 make revisions.
9:02 Really take your time to answer the
9:04 questions thoughtfully.
9:06 Then send to watch the magic begin.
9:09 Now Claude reads the brief, and it takes
9:12 about 3 minutes before it writes a
9:13 single line of code. Then it spends
9:16 another four or five minutes or so
9:17 actually building. So I'll skip ahead to
9:20 the fun part, the reveal.
9:23 And there it is.
9:25 This is already better than most AI
9:27 website demos I've seen, and we haven't
9:29 even started polishing yet.
9:31 So [gasps and snorts] how does it stack
9:33 up against our $10,000 website
9:35 checklist?
9:36 Let's start with point of view. Look at
9:38 the brief we gave Claude. We had a real
9:40 direction in mind when we answered its
9:42 questions, not just a mood board. Then
9:44 there's typography. Claude picked
9:46 Francis for the headlines and Inter for
9:49 the body. Now, we'll swap out Inter
9:51 later because it's one of the most
9:52 overused AI fonts on the internet right
9:54 now. For color, Claude landed on five
9:57 hex values: near black, warm cream,
10:00 oxblood, brass, and slate. There are no
10:03 rainbow palettes here. Restraint with
10:06 color is what signals quality. Then
10:08 there's hierarchy. Look at how this
10:10 section is laid out. The city name is
10:12 huge, the address is medium-sized, and
10:14 the room description is small. That's
10:16 not random sizing. It's telling your eye
10:19 what to read first, second, and third.
10:22 Without that, a site feels flat and hard
10:24 to scan.
10:26 Take a look at the copy, too. Dry-aged
10:29 ribeye, 16 oz, 60-day,
10:33 hearth-fired. That's not generic AI
10:35 text. That's a restaurant copy that
10:37 reads like a real chef wrote it. We're
10:39 going to come back to this in chapter
10:40 seven. All right, that's four boxes
10:43 checked. We've still got four to go, and
10:44 the next ones are going to need a bit
10:46 more work. Number five on the checklist
10:49 is imagery. This is one pillar Claude
10:51 can't fully solve on its own. You're
10:53 going to have to bring some assets
10:54 yourself.
10:55 The best thing you can have on a premium
10:57 website is custom photography or custom
11:00 graphics. Work that's been shot or
11:02 designed specifically for your brand. If
11:05 you've got that, great. Drop it into
11:07 your project folder, and you're set.
11:09 Just tell Claude what and where it is,
11:11 and what to do with it.
11:13 But many people don't have a
11:15 professional photo shoot budget. So, the
11:17 next best thing is AI image and video
11:20 generation. The tools are good enough
11:22 now that used right, nobody can tell the
11:25 difference. For a single image, ChatGPT
11:28 is the fastest path if you've got a
11:29 subscription already. It's latest image
11:32 model is excellent for photoreal work,
11:35 but there's a catch. Chat GPT can't make
11:38 video. So, if your site needs any kind
11:40 of animation like the hero scroll effect
11:42 I'm about to build, Chat GPT alone won't
11:45 get you there. That's where aggregator
11:47 tools come in. These tools give you
11:49 access to every major image and video
11:52 generation model from one tab. The one I
11:55 use is 11 Labs. 11 Labs is a paid
11:57 service, but their plans are reasonable.
12:00 And if you use the 11 Labs link in the
12:01 description below, you'll get 50% off
12:04 your first month of the creator plan,
12:06 which gets you access to everything I'm
12:07 about to demonstrate. Inside 11 Labs
12:10 here, I generate an image with Chat
12:12 GPT's image model.
12:15 Once that renders, I'll pick one of the
12:17 four options, and then drop that exact
12:19 image in as the starting frame for
12:22 Google's VO3.1
12:24 to turn it into a video. Then, once I
12:27 get the output for that, I'll select one
12:28 of the options, then upscale the result
12:31 with Topaz, all without leaving the tab.
12:35 That's the workflow we're using to
12:36 create the hero asset for our steakhouse
12:38 here. Here's the trick that makes this
12:40 fast. You don't have to write the image
12:42 prompt yourself. Claude already knows
12:44 your project, so you can ask Claude to
12:46 write the image generation prompt for
12:48 you. You paste that prompt into your
12:50 image generator, and you get something
12:52 that matches your brand and your
12:54 existing design aesthetic on the first
12:56 try. Once you have your asset, drop it
12:59 into your project folder, and Claude has
13:00 everything it needs. Okay, that covers
13:02 imagery. But, what about when you want
13:04 to level up visuals on your site that
13:06 aren't photos or videos?
13:08 That's where 21st.dev comes in.
13:11 21st.dev is a library of pre-made web
13:14 components, animations, scroll effects,
13:17 buttons, and more. All built by real
13:20 developers, and all free to grab.
13:23 You can use 21st.dev two ways. You can
13:26 browse around for visual inspiration if
13:28 you're not sure what you want to add to
13:30 your site. Or, if you find a specific
13:32 design or element you like, you can copy
13:34 a prompt that tells Claude exactly how
13:37 to recreate it in your project. For our
13:40 build, I want to build something
13:41 visually striking for the hero section.
13:44 A really cool image effect that makes
13:46 the site feel premium right when someone
13:48 lands on it. Scrolling through 21st.dev
13:51 here, I find a smooth scroll image
13:53 component I like. So, I'll click the
13:55 copy prompt button on it and back in
13:58 Claude code, I'll paste that prompt in,
14:01 add the stake video we just generated,
14:03 and tell Claude to use the component to
14:05 build out the hero.
14:08 Now, watch what Claude does next.
14:10 It pushes back.
14:11 The 21st.dev component I picked is for a
14:14 system called React. React is a more
14:17 complex setup than what we're using
14:18 here. Our project is a simple static
14:21 site, so Claude says no to dropping in
14:23 the React component as is because it
14:26 would change how our whole project
14:27 works. For your project, you might
14:29 actually want something more complex
14:31 than what we're doing here, like a
14:32 dashboard, a checkout flow, or a site
14:34 with a login. In that case, Claude would
14:36 say yes to React because it fits your
14:38 project. The point is that Claude
14:40 protects the architecture you set up. It
14:42 doesn't break things just because you
14:44 asked.
14:45 For our static site, single file HTML is
14:47 the right choice and you'll see why when
14:49 we deploy in chapter eight.
14:51 So, Claude rebuilds the hero without
14:53 React and the first attempt doesn't
14:55 work. The video shows up on the page,
14:57 but it isn't scrolling. So, I tell
14:59 Claude what's happening. It finds two
15:02 bugs and fixes them. The page is still
15:04 broken though, so I ask Claude to dig
15:07 deeper.
15:08 It actually opens the page itself in my
15:10 browser, inspects what's happening live,
15:12 and finds the real problem.
15:15 Three layers in, it works. The lesson
15:17 here is to keep pushing when something
15:19 breaks. Just explain what went wrong and
15:21 what you were expecting instead. Claude
15:24 can usually solve it if you give it the
15:25 chance to look closer.
15:27 And there it is, a cinematic hero
15:30 scroll-driven, exactly like we asked
15:32 for.
15:34 Next, we do one more pass on the hero,
15:36 making the text readable against the
15:38 bright background image.
15:40 And making the hero reveal its content
15:42 as the user scrolls.
15:44 The key thing to know is that you can
15:46 keep iterating like this until your hero
15:48 feels right. Once your hero section is
15:51 locked in, it's time to step back and
15:53 check yourself against the bigger
15:55 picture.
15:56 Once you've got the bones of your site
15:58 in place, you should grade yourself
16:00 against the original checklist before
16:02 you keep polishing. This is the move
16:04 that separates a polished result from a
16:06 generic one.
16:07 You can grab a PDF download of that 10K
16:09 website checklist using the link in the
16:11 description below.
16:13 You set the bar high at the start, and
16:15 now you check yourself against it. To do
16:17 this, paste that checklist into Claude
16:20 and ask, "Where does this site land
16:22 against each of these criteria?" Be
16:24 honest. In my case, Claude goes through
16:26 each one, calling out what's strong,
16:28 what's mixed, and what's missing. For
16:30 our build, Claude comes back with point
16:32 of view strong, color strong, hierarchy
16:35 strong, and typography mixed. Imagery,
16:38 motion, mobile, and the invisible stuff
16:41 are all mixed. You'll probably get a
16:43 similar split on your project, and
16:45 that's fine. The point is to know
16:46 exactly what's left to do. For the items
16:48 that need work, don't ask Claude to fix
16:50 them one at a time. Ask Claude to
16:52 propose a batch of fixes instead. And
16:54 lead your ask with intent, not
16:57 specifics. Here's the exact prompt I use
16:59 for our build. I tell Claude,
17:02 "We need more handcrafted
17:03 micro-interactions.
17:05 The lower sections feel a bit generic.
17:08 We don't need to make them busier, just
17:10 more expensive." Notice what I'm doing
17:12 there. I'm not telling Claude what to
17:15 add, I'm telling Claude how I want it to
17:17 feel.
17:18 Claude is better at translating intent
17:21 into specifics than most people are at
17:23 writing specifications. Claude comes
17:25 back with a batch, film grain across the
17:28 whole site, animated brass hairlines
17:31 between sections, a glowing ember effect
17:33 in the reserve a table section,
17:35 word-by-word reveals to the headlines,
17:37 and a few other small details on top.
17:40 Five small changes in one prompt.
17:43 I approve them, and Claude ships them
17:45 all at once. There's less back and forth
17:47 that way. You spend fewer tokens, and
17:49 the result feels more cohesive than if
17:52 you drip feed Claude one tweak at a
17:54 time. Now, here's the move most people
17:56 skip, and it's the move that does the
17:57 most work on whether your site feels
17:59 expensive.
18:01 Once that batch of edits lands, scroll
18:04 through your site section by section,
18:06 and find the ones that still feel flat,
18:09 a little boring. There's always going to
18:11 be a couple. Claude won't catch them
18:13 because Claude can't feel your site the
18:15 way you can. This pass, you have to
18:18 drive yourself.
18:19 For each flat section, you give Claude
18:22 one specific motion or cursor
18:25 interaction to add. One per section, all
18:28 of them restrained and subtle. You can
18:31 ask for something specific, grab
18:33 something you like from 21st.dev, or
18:35 just ask Claude what makes sense to add.
18:37 In our reserve a table section, the
18:39 ember glow from the batch is in, but
18:41 it's still static. There's no movement.
18:43 So, I tell Claude, "Make the embers move
18:46 like fire. Have them react to the cursor
18:48 as it moves around the page." Claude
18:50 adds a parallax effect on the embers
18:52 that follows your cursor. Now, the fire
18:55 effect feels alive. Then, I scroll into
18:58 the story section, and it's still flat.
19:00 So, I tell Claude, "Add some elegant
19:03 micro movements and cursor interactions
19:05 here. This section is feeling very
19:07 static." Claude adds a soft candlelit
19:09 halo that follows the cursor as you
19:11 read. Its first attempt though is too
19:14 obvious, so I push back. I say, "Make it
19:17 more subtle, more refined." Claude adds
19:19 trailing motion to the halo, so it lags
19:21 a bit behind the cursor. That's the
19:24 version we'll ship. Two prompts, two
19:26 sections. That's all this layer takes,
19:28 but that layer is the difference between
19:30 a site that looks expensive and one that
19:32 feels expensive as visitors navigate the
19:35 pages. The pattern is to review every
19:37 section, find the ones that feel flat,
19:40 ask Claude for one cursor interaction or
19:43 piece of movement per section. And tell
19:45 Claude to make it more subtle until the
19:48 section feels alive without being noisy
19:51 and obnoxious.
19:52 Speaking of polish, copy, the written
19:55 content on your site, is another place
19:57 where AI tends to fall short by default.
20:00 AI-generated copy usually over-explains,
20:03 uses too many adjectives, and tries to
20:05 sound impressive.
20:06 Take a look at this line from our site.
20:08 Six dishes, one fire. That's restraint,
20:12 not adjectives. That's what separates a
20:14 $10,000 menu from a $200 one.
20:17 The front-end design skill we installed
20:18 at the start of this video is what helps
20:20 Claude to write copy like this.
20:22 Restrained sensory writing is one of the
20:24 things that skill pushes Claude toward,
20:27 which is another reason it earns its
20:28 place in every project. Here's another
20:30 quick win you can apply to any
20:32 AI-generated site.
20:34 There's one font called Inter that's so
20:36 overused on AI-generated sites it
20:38 instantly screams AI I made this. If you
20:41 see Inter in your output, ask Claude to
20:43 swap it out.
20:45 For our build, Claude swaps Inter for a
20:47 font called Geist. It's a small change,
20:49 but it makes a real difference to how
20:50 the site reads. Item seven on the
20:52 checklist is mobile that's actually
20:54 designed, not just shrunk down.
20:57 By default, Claude makes your site
20:59 responsive, meaning it'll fit on phones
21:01 or other small screens, but responsive
21:04 isn't the same as designed for phones.
21:07 Phones are going to see your site way
21:09 more often than desktops will. And if
21:11 your mobile version is just your desktop
21:13 version squished smaller, your viewers
21:15 will feel it. You have to ask Claude for
21:17 it specifically.
21:19 So, tell Claude to do a dedicated pass
21:21 on the mobile version.
21:22 Tell it to think about what should be
21:23 hidden on small screens, what should be
21:26 tighter, and what should resize.
21:28 For our build, the navigation collapses
21:30 on phones. The wordmark gets tighter
21:33 spacing, and the buttons get a smaller
21:35 variant. With those polished passes
21:37 done, all eight checklist items are
21:39 complete. Your site looks $10,000.
21:42 Now, we have to actually put it online.
21:46 You can build the most beautiful site in
21:47 the world, but up to this point, your
21:49 site only exists on your computer.
21:51 So, if you copy the URL from your
21:53 preview right now, the one that starts
21:54 with localhost, and send it to a friend,
21:57 they're going to be very disappointed.
21:59 That URL only works on your machine. To
22:02 share your site with the world, you have
22:03 to put it on a real server at a real
22:06 custom URL. Hosting is the service that
22:09 runs your website on a server 24/7, so
22:11 anyone in the world can reach it. It's
22:13 the boring part of owning a website, but
22:15 every real site needs one. I use
22:17 Hostinger because it's the cheapest
22:18 professional host I know of that gives
22:20 you a free domain for the first year on
22:22 top of your plan.
22:23 And here's the deal. If you grab
22:25 Hostinger through the link on screen, or
22:27 the first link in the description below,
22:28 you'll get 10% off whatever Hostinger's
22:31 current promotional prices. Prices
22:33 change throughout the year, but 10% off
22:35 the best available price is always the
22:37 cheapest way to get started.
22:39 Now, before you click anything, let's
22:41 talk about which plan you actually want.
22:43 For the kind of site we built in this
22:44 video, a simple static site with no
22:46 login, no checkout, and no real
22:48 database, Hostinger's premium plan
22:50 covers everything. That's the one we're
22:52 picking today. But, if your project is
22:53 more complex than what we did here, like
22:55 a site with user accounts, a payment
22:57 flow, or a database in the background,
22:59 premium won't cut it. For projects like
23:01 that, you want Hostinger's business plan
23:03 instead. It supports node.js and more
23:06 advanced setups Claude tends to use for
23:08 complex sites. Same link, same 10% off,
23:12 just one tier up.
23:14 Remember when Claude said no to react
23:16 back in chapter six? That's the kind of
23:17 moment that tells you which plan you
23:18 need. If Claude kept your site simple,
23:21 premium is fine. If Claude built you
23:22 something with a real back end, you want
23:24 business. For our steakhouse, premium is
23:27 the right pick. Open the link from the
23:29 description, then on this page here,
23:31 click start now, and that'll scroll you
23:33 down to the pricing panels. Select the
23:36 plan you want, set the term to 12
23:38 months. 12 months is the minimum term
23:40 that gets you a free domain for the
23:41 first year. Now search for the domain
23:44 you want. If it's available, claim it.
23:46 Your cart total is going to depend on
23:48 whatever promotion Hostinger has running
23:50 when you sign up. For me, it comes out
23:52 to about $43 for the year. That's
23:54 hosting plus a domain plus a free email
23:57 account all in. The exact number you see
23:59 might be a few dollars different, but
24:01 using the link below is always going to
24:03 get you the best available price. If you
24:04 add a month of Claude Pro on top of
24:06 that, which is about 20 bucks, you've
24:08 built a $10,000 website for roughly $60
24:11 total.
24:12 Click continue,
24:14 then add your email and a password to
24:16 register an account. On the next page,
24:19 enter your billing information to
24:20 complete the transaction.
24:22 After checkout is complete, the
24:24 onboarding flow asks what kind of site
24:26 you have. Since we're uploading our own
24:28 files, pick migrate existing site,
24:32 then upload backup files.
24:35 Then select the domain you just bought.
24:37 Now return to your project folder on
24:39 your computer so you can see the files
24:41 that Claude built.
24:43 Your index.html
24:45 plus any images, videos, or sub folders
24:48 sitting inside.
24:49 Here's the part that matters.
24:51 You don't want to zip the project folder
24:53 itself. You want to zip the files inside
24:56 the folder.
24:57 If you zip the whole folder, Hostinger
24:59 unzips it on their server and your site
25:01 ends up one directory deeper than it
25:03 should. Your domain loads a blank page.
25:06 So, select everything inside your
25:08 project folder. That's command A on Mac
25:11 or control A on Windows. Then right
25:13 click on your selection. On Mac, hit
25:17 compress.
25:18 On Windows, pick send to then compressed
25:22 folder.
25:23 You get one zip file with your
25:25 index.html sitting right at the top
25:27 level. That's exactly what Hostinger
25:29 wants. You can drag the zip file back
25:32 out to the same level as your parent
25:33 folder. And then give it a relevant
25:35 name.
25:36 Drag that zip into Hostinger and once
25:39 the files finish uploading, click next.
25:41 Then click submit request. Once it
25:44 loads, click on your domain
25:46 and there it is. That's your $10,000
25:49 website live at your own custom domain
25:52 built with just a handful of prompts. If
25:55 you want yours online too, grab
25:56 Hostinger using the first link in the
25:58 description below. That's how you lock
25:59 in your 10% discount on top of whatever
26:01 promotion they already have running.
26:03 It's the cheapest way I know of to put a
26:05 real professional website on the
26:06 internet. Thanks for watching.