| 1 | 0:00 | 0:02 | In this video, I'm going to show you how |
| 2 | 0:02 | 0:04 | to build a $10,000 website using Claude |
| 3 | 0:04 | 0:07 | code. These sites you're seeing were all |
| 4 | 0:07 | 0:08 | built with Claude code, and by the end |
| 5 | 0:08 | 0:10 | of this video, yours is going to be one |
| 6 | 0:10 | 0:12 | of them. We'll install Claude code, |
| 7 | 0:12 | 0:14 | level it up with two design skills, |
| 8 | 0:14 | 0:17 | write one prompt, polish the result, and |
| 9 | 0:17 | 0:19 | put it on a real domain. The site is |
| 10 | 0:19 | 0:20 | going to look like the work of a |
| 11 | 0:20 | 0:23 | freelance developer charging $10,000, |
| 12 | 0:23 | 0:25 | and nobody who visits it is going to |
| 13 | 0:25 | 0:27 | know an AI made it. Stick around for |
| 14 | 0:27 | 0:28 | chapter seven especially. That's where |
| 15 | 0:28 | 0:30 | the cursor effects and motion design |
| 16 | 0:30 | 0:32 | take the build from professional to |
| 17 | 0:32 | 0:34 | expensive. And by the very end, I'll |
| 18 | 0:34 | 0:36 | show you the cheapest way to put it live |
| 19 | 0:36 | 0:39 | on the internet at a custom domain. But |
| 20 | 0:39 | 0:42 | first, what exactly is Claude code? |
| 21 | 0:42 | 0:44 | Claude code is an AI coding assistant. |
| 22 | 0:44 | 0:46 | You describe a website to it in natural |
| 23 | 0:46 | 0:47 | language, and it writes the code for you |
| 24 | 0:47 | 0:49 | while you watch. |
| 25 | 0:49 | 0:51 | We're using the Claude code desktop app |
| 26 | 0:51 | 0:52 | today because it gives you everything |
| 27 | 0:52 | 0:54 | you need in one window with no extra |
| 28 | 0:54 | 0:56 | developer setup. Before we build |
| 29 | 0:56 | 0:58 | anything, I want to define what a |
| 30 | 0:58 | 1:02 | $10,000 website actually looks like. So, |
| 31 | 1:02 | 1:04 | I asked Claude. There are eight things |
| 32 | 1:04 | 1:06 | that separate a $10,000 website from a |
| 33 | 1:06 | 1:08 | $200 one. |
| 34 | 1:08 | 1:10 | Point of view, |
| 35 | 1:10 | 1:11 | typography, |
| 36 | 1:11 | 1:13 | color, |
| 37 | 1:13 | 1:14 | hierarchy, |
| 38 | 1:14 | 1:16 | imagery, |
| 39 | 1:16 | 1:17 | motion, |
| 40 | 1:17 | 1:18 | mobile, |
| 41 | 1:18 | 1:20 | and the invisible stuff that makes a |
| 42 | 1:20 | 1:23 | site feel fast and finished. |
| 43 | 1:23 | 1:25 | Those eight items fall into three |
| 44 | 1:25 | 1:28 | groups: taste, substance, and felt |
| 45 | 1:28 | 1:31 | quality. We're hitting all eight today. |
| 46 | 1:31 | 1:33 | Here's why Claude code can hit a $10,000 |
| 47 | 1:33 | 1:35 | bar and why most no-code website |
| 48 | 1:35 | 1:38 | builders can't. When you use a tool like |
| 49 | 1:38 | 1:40 | Wix or Squarespace, you start with a |
| 50 | 1:40 | 1:42 | template, and whatever you build ends up |
| 51 | 1:42 | 1:44 | looking like every other site that |
| 52 | 1:44 | 1:46 | started from that template. Claude code |
| 53 | 1:46 | 1:48 | doesn't work that way. It writes the |
| 54 | 1:48 | 1:50 | code for your site from scratch based on |
| 55 | 1:50 | 1:52 | what you describe. So, you can get a |
| 56 | 1:52 | 1:54 | completely custom result without ever |
| 57 | 1:54 | 1:57 | having to learn to code yourself. On top |
| 58 | 1:57 | 1:59 | of that, Claude can install design |
| 59 | 1:59 | 2:00 | skills that level up everything it |
| 60 | 2:00 | 2:02 | makes. You can drop in pre-made |
| 61 | 2:03 | 2:04 | components from libraries online, the |
| 62 | 2:04 | 2:06 | kind of things that used to require a |
| 63 | 2:06 | 2:08 | real developer, and you can keep |
| 64 | 2:08 | 2:10 | iterating with Claude on every detail |
| 65 | 2:10 | 2:13 | until the site actually feels expensive. |
| 66 | 2:13 | 2:15 | We're going to do all of that today. The |
| 67 | 2:15 | 2:17 | first step is getting Claude code set up |
| 68 | 2:17 | 2:19 | on your computer. |
| 69 | 2:19 | 2:21 | Go to claude.com using the link in the |
| 70 | 2:21 | 2:24 | description below and pick the pro plan. |
| 71 | 2:24 | 2:26 | Right now, as I'm recording this, it's |
| 72 | 2:26 | 2:28 | only $20 per month, and that's going to |
| 73 | 2:28 | 2:31 | cover everything we need for this video. |
| 74 | 2:31 | 2:32 | Get yourself signed up and I'll skip |
| 75 | 2:33 | 2:35 | past the boring stuff. |
| 76 | 2:35 | 2:36 | Once you're logged in, in the bottom |
| 77 | 2:36 | 2:38 | left corner of the page, click the |
| 78 | 2:38 | 2:40 | download icon. |
| 79 | 2:40 | 2:43 | Navigate to the Claude code section. |
| 80 | 2:43 | 2:46 | Download the desktop app version, then |
| 81 | 2:46 | 2:49 | open the file to run the installer. |
| 82 | 2:49 | 2:50 | Once you get it installed, open the |
| 83 | 2:50 | 2:53 | desktop app, then sign in. At this |
| 84 | 2:53 | 2:55 | point, I need to mention, depending on |
| 85 | 2:55 | 2:57 | when you watch this video, the actual |
| 86 | 2:57 | 2:59 | software interface might look different |
| 87 | 2:59 | 3:01 | for you than it does for me here. Claude |
| 88 | 3:01 | 3:03 | gets updated regularly, so if things |
| 89 | 3:03 | 3:05 | don't look the exact same, don't panic. |
| 90 | 3:05 | 3:07 | Just try to understand the general |
| 91 | 3:07 | 3:08 | concepts I'm explaining and apply them |
| 92 | 3:08 | 3:10 | to how the software looks when you're |
| 93 | 3:10 | 3:12 | using it. When you get signed in, switch |
| 94 | 3:12 | 3:14 | from chat mode to code mode. |
| 95 | 3:14 | 3:17 | In my app, that tab is available in the |
| 96 | 3:17 | 3:19 | upper left. Alternatively, you can also |
| 97 | 3:19 | 3:21 | press command three on your keyboard on |
| 98 | 3:21 | 3:25 | a Mac or control three on Windows to |
| 99 | 3:25 | 3:26 | switch to code mode. Claude code works |
| 100 | 3:27 | 3:29 | best when it has its own folder to live |
| 101 | 3:29 | 3:30 | in. |
| 102 | 3:30 | 3:32 | Create one anywhere on your computer, |
| 103 | 3:32 | 3:33 | then click the folder select button near |
| 104 | 3:34 | 3:35 | the chat box, |
| 105 | 3:35 | 3:37 | and select your new folder to open it |
| 106 | 3:37 | 3:39 | inside the app. |
| 107 | 3:39 | 3:40 | That folder is going to be your |
| 108 | 3:40 | 3:42 | workspace for this project from now on. |
| 109 | 3:43 | 3:44 | All right, that's the setup done. Now |
| 110 | 3:44 | 3:46 | we're going to level Claude up by |
| 111 | 3:46 | 3:49 | installing two skills. |
| 112 | 3:49 | 3:50 | Out of the box, Claude is a |
| 113 | 3:50 | 3:54 | general-purpose AI. It knows a lot about |
| 114 | 3:54 | 3:56 | a lot of things, but its default design |
| 115 | 3:56 | 3:58 | output is just okay. |
| 116 | 3:59 | 4:00 | It tends to reach for the same fonts, |
| 117 | 4:00 | 4:02 | the same colors, and the same |
| 118 | 4:02 | 4:04 | predictable layouts you've seen on every |
| 119 | 4:04 | 4:06 | other AI-generated website. |
| 120 | 4:06 | 4:08 | This is why a lot of AI websites end up |
| 121 | 4:08 | 4:11 | looking generic. Skills fix that. A |
| 122 | 4:11 | 4:13 | skill is like an instruction manual for |
| 123 | 4:13 | 4:15 | Claude, a text file that levels up |
| 124 | 4:15 | 4:18 | Claude's knowledge in one specific area. |
| 125 | 4:18 | 4:20 | You install it once, and Claude uses it |
| 126 | 4:20 | 4:22 | forever. We're installing two skills |
| 127 | 4:23 | 4:25 | today, and both of them are free. The |
| 128 | 4:25 | 4:26 | first skill we're installing is called |
| 129 | 4:26 | 4:28 | front-end design. It's built by |
| 130 | 4:28 | 4:31 | Anthropic, the company behind Claude. It |
| 131 | 4:31 | 4:33 | runs in the background, and it quietly |
| 132 | 4:33 | 4:35 | makes Claude smarter at design. |
| 133 | 4:35 | 4:38 | What it actually does is ban the most |
| 134 | 4:38 | 4:40 | overused fonts on the internet and push |
| 135 | 4:40 | 4:42 | Claude toward bold design direction |
| 136 | 4:42 | 4:45 | instead of generic AI output. To install |
| 137 | 4:45 | 4:47 | it, grab the front-end design link from |
| 138 | 4:47 | 4:49 | the description below and paste it into |
| 139 | 4:49 | 4:52 | Claude code with the message install |
| 140 | 4:52 | 4:54 | this skill. |
| 141 | 4:54 | 4:56 | Then, send the message and let it run. |
| 142 | 4:56 | 4:59 | Allow the edits when it asks, |
| 143 | 4:59 | 5:00 | and install it globally. |
| 144 | 5:00 | 5:03 | The second skill is community-built. |
| 145 | 5:03 | 5:07 | It's called UI UX Pro Max. |
| 146 | 5:07 | 5:09 | As you can see on screen, it ships with |
| 147 | 5:09 | 5:13 | 57 UI styles, 95 color palettes, and 56 |
| 148 | 5:13 | 5:15 | font pairings. |
| 149 | 5:15 | 5:17 | Unlike the first skill, this one we call |
| 150 | 5:17 | 5:19 | directly when we want a big design |
| 151 | 5:19 | 5:21 | intervention. And that's exactly how |
| 152 | 5:21 | 5:23 | we're going to build our site today. To |
| 153 | 5:23 | 5:26 | install it, grab the UI UX Pro Max link |
| 154 | 5:26 | 5:28 | from the description below and paste it |
| 155 | 5:28 | 5:31 | into Claude code with the message |
| 156 | 5:31 | 5:34 | install this plugin using npm. |
| 157 | 5:34 | 5:36 | That exact phrasing matters because it's |
| 158 | 5:36 | 5:38 | what gets it to install cleanly using |
| 159 | 5:38 | 5:39 | the terminal. |
| 160 | 5:43 | 5:45 | Now, there's one last setup move before |
| 161 | 5:45 | 5:46 | we start building. |
| 162 | 5:46 | 5:48 | Click the mode selector in the bottom |
| 163 | 5:48 | 5:50 | left under your chat |
| 164 | 5:50 | 5:52 | and switch it to auto mode. This lets |
| 165 | 5:53 | 5:55 | Claude work without stopping to ask for |
| 166 | 5:55 | 5:57 | permission at every step. With auto mode |
| 167 | 5:57 | 5:59 | on and both skills installed, we're |
| 168 | 5:59 | 6:01 | ready to write the prompt that builds |
| 169 | 6:01 | 6:03 | the site. But, there's one more thing |
| 170 | 6:03 | 6:06 | worth talking about first. |
| 171 | 6:07 | 6:08 | The other big thing that separates a |
| 172 | 6:08 | 6:10 | great result from a mediocre one is the |
| 173 | 6:10 | 6:13 | brief you give Claude. The more specific |
| 174 | 6:13 | 6:15 | you are, the better the result. If you |
| 175 | 6:15 | 6:17 | already know exactly what you want, just |
| 176 | 6:17 | 6:19 | describe it. And that's what I did for |
| 177 | 6:19 | 6:22 | this build. But, describing visual taste |
| 178 | 6:22 | 6:25 | in words is hard, especially if you're |
| 179 | 6:25 | 6:27 | newer to design. You don't speak the |
| 180 | 6:27 | 6:29 | design language yet, and that makes it |
| 181 | 6:29 | 6:32 | tough to tell Claude what you want. |
| 182 | 6:32 | 6:34 | If you're in that spot, references are |
| 183 | 6:34 | 6:36 | your shortcut. References are just |
| 184 | 6:36 | 6:38 | screenshots of sites you like that you |
| 185 | 6:39 | 6:40 | give to Claude so it can match the |
| 186 | 6:40 | 6:43 | visual style. It's a lot easier to show |
| 187 | 6:43 | 6:45 | Claude what you want than to describe |
| 188 | 6:45 | 6:47 | it. References are also useful for |
| 189 | 6:47 | 6:49 | refining your own direction before you |
| 190 | 6:49 | 6:51 | commit. You scroll, you find things you |
| 191 | 6:51 | 6:52 | like, and you start to understand what |
| 192 | 6:53 | 6:55 | your taste actually is. I'll share a few |
| 193 | 6:55 | 6:57 | of my favorite websites with you that |
| 194 | 6:57 | 6:59 | you can draw ideas from. This is |
| 195 | 6:59 | 7:01 | Dribbble. It's where designers post |
| 196 | 7:02 | 7:03 | their work, and it's full of inspiration |
| 197 | 7:03 | 7:06 | for almost any style of website. |
| 198 | 7:06 | 7:08 | This is Awwwards. These are sites that |
| 199 | 7:08 | 7:10 | have won industry design awards, so it's |
| 200 | 7:10 | 7:12 | a great place to browse high-quality |
| 201 | 7:12 | 7:15 | designs. And you can always just search |
| 202 | 7:15 | 7:17 | Pinterest for the kind of site you want |
| 203 | 7:17 | 7:19 | to build. It pulls examples from |
| 204 | 7:19 | 7:21 | everywhere. Here, [snorts] I searched |
| 205 | 7:21 | 7:24 | for modern website design restaurant. |
| 206 | 7:24 | 7:25 | I've included links to all of these in |
| 207 | 7:25 | 7:27 | the description below. Find three to |
| 208 | 7:27 | 7:30 | five sites you like and save screenshots |
| 209 | 7:30 | 7:32 | of them. You're not copying these sites. |
| 210 | 7:32 | 7:34 | Instead, you're showing Claude what you |
| 211 | 7:34 | 7:36 | like and how you want your own design to |
| 212 | 7:36 | 7:38 | end up. For my build, I'm creating a |
| 213 | 7:38 | 7:41 | website for a restaurant in Seattle. |
| 214 | 7:41 | 7:43 | Here's the prompt I used. This is the |
| 215 | 7:43 | 7:46 | whole video in a single sentence. |
| 216 | 7:46 | 7:51 | {forward slash} UI-UX-Pro-Max |
| 217 | 7:51 | 7:53 | is how we call the design skill we just |
| 218 | 7:53 | 7:56 | installed. Then we type out the brief |
| 219 | 7:56 | 7:58 | for the AI. The trick to making this |
| 220 | 7:58 | 8:00 | work is this last line. Ask me |
| 221 | 8:00 | 8:02 | clarifying questions. That's the line |
| 222 | 8:03 | 8:04 | that makes Claude stop and to think |
| 223 | 8:05 | 8:06 | before it starts building. |
| 224 | 8:07 | 8:08 | Here Claude comes back with seven |
| 225 | 8:08 | 8:10 | questions. They cover the restaurant |
| 226 | 8:10 | 8:13 | name, the style direction, which |
| 227 | 8:13 | 8:14 | sections we want, who's writing the |
| 228 | 8:14 | 8:17 | content, the tech stack, the animation |
| 229 | 8:17 | 8:18 | level, and anything else we want to |
| 230 | 8:18 | 8:20 | specify. |
| 231 | 8:20 | 8:22 | And here's the part that really matters. |
| 232 | 8:22 | 8:24 | Claude offers three style directions to |
| 233 | 8:24 | 8:27 | choose from. A Manhattan steakhouse with |
| 234 | 8:27 | 8:30 | dark moody energy, a Pacific Northwest |
| 235 | 8:30 | 8:32 | modern look, or a classic old-school |
| 236 | 8:32 | 8:34 | chop house. It's giving you the menu of |
| 237 | 8:34 | 8:37 | style options. I picked dark moody |
| 238 | 8:37 | 8:40 | luxury, but with Pacific Northwest |
| 239 | 8:40 | 8:41 | grounding, so it doesn't look like a |
| 240 | 8:41 | 8:43 | Manhattan steakhouse. |
| 241 | 8:43 | 8:45 | Five sections total. No gallery, no |
| 242 | 8:45 | 8:47 | booking system, just a single page that |
| 243 | 8:47 | 8:50 | scrolls all the way through. |
| 244 | 8:50 | 8:51 | This is the most important moment in the |
| 245 | 8:51 | 8:54 | entire build. The answers you give here |
| 246 | 8:54 | 8:57 | become the entire site. The more |
| 247 | 8:57 | 8:59 | specific you are at this stage, the less |
| 248 | 8:59 | 9:01 | you'll have to fight Claude later to |
| 249 | 9:01 | 9:02 | make revisions. |
| 250 | 9:02 | 9:04 | Really take your time to answer the |
| 251 | 9:04 | 9:06 | questions thoughtfully. |
| 252 | 9:06 | 9:09 | Then send to watch the magic begin. |
| 253 | 9:09 | 9:11 | Now Claude reads the brief, and it takes |
| 254 | 9:12 | 9:13 | about 3 minutes before it writes a |
| 255 | 9:13 | 9:16 | single line of code. Then it spends |
| 256 | 9:16 | 9:17 | another four or five minutes or so |
| 257 | 9:17 | 9:20 | actually building. So I'll skip ahead to |
| 258 | 9:20 | 9:23 | the fun part, the reveal. |
| 259 | 9:23 | 9:25 | And there it is. |
| 260 | 9:25 | 9:27 | This is already better than most AI |
| 261 | 9:27 | 9:29 | website demos I've seen, and we haven't |
| 262 | 9:29 | 9:31 | even started polishing yet. |
| 263 | 9:31 | 9:33 | So [gasps and snorts] how does it stack |
| 264 | 9:33 | 9:35 | up against our $10,000 website |
| 265 | 9:35 | 9:36 | checklist? |
| 266 | 9:36 | 9:38 | Let's start with point of view. Look at |
| 267 | 9:38 | 9:40 | the brief we gave Claude. We had a real |
| 268 | 9:40 | 9:42 | direction in mind when we answered its |
| 269 | 9:42 | 9:44 | questions, not just a mood board. Then |
| 270 | 9:44 | 9:46 | there's typography. Claude picked |
| 271 | 9:46 | 9:49 | Francis for the headlines and Inter for |
| 272 | 9:49 | 9:51 | the body. Now, we'll swap out Inter |
| 273 | 9:51 | 9:52 | later because it's one of the most |
| 274 | 9:52 | 9:54 | overused AI fonts on the internet right |
| 275 | 9:54 | 9:57 | now. For color, Claude landed on five |
| 276 | 9:57 | 10:00 | hex values: near black, warm cream, |
| 277 | 10:00 | 10:03 | oxblood, brass, and slate. There are no |
| 278 | 10:03 | 10:06 | rainbow palettes here. Restraint with |
| 279 | 10:06 | 10:08 | color is what signals quality. Then |
| 280 | 10:08 | 10:10 | there's hierarchy. Look at how this |
| 281 | 10:10 | 10:12 | section is laid out. The city name is |
| 282 | 10:12 | 10:14 | huge, the address is medium-sized, and |
| 283 | 10:14 | 10:16 | the room description is small. That's |
| 284 | 10:16 | 10:19 | not random sizing. It's telling your eye |
| 285 | 10:19 | 10:22 | what to read first, second, and third. |
| 286 | 10:22 | 10:24 | Without that, a site feels flat and hard |
| 287 | 10:24 | 10:26 | to scan. |
| 288 | 10:26 | 10:29 | Take a look at the copy, too. Dry-aged |
| 289 | 10:29 | 10:33 | ribeye, 16 oz, 60-day, |
| 290 | 10:33 | 10:35 | hearth-fired. That's not generic AI |
| 291 | 10:35 | 10:37 | text. That's a restaurant copy that |
| 292 | 10:37 | 10:39 | reads like a real chef wrote it. We're |
| 293 | 10:39 | 10:40 | going to come back to this in chapter |
| 294 | 10:40 | 10:43 | seven. All right, that's four boxes |
| 295 | 10:43 | 10:44 | checked. We've still got four to go, and |
| 296 | 10:44 | 10:46 | the next ones are going to need a bit |
| 297 | 10:46 | 10:48 | more work. Number five on the checklist |
| 298 | 10:49 | 10:51 | is imagery. This is one pillar Claude |
| 299 | 10:51 | 10:53 | can't fully solve on its own. You're |
| 300 | 10:53 | 10:54 | going to have to bring some assets |
| 301 | 10:54 | 10:55 | yourself. |
| 302 | 10:55 | 10:57 | The best thing you can have on a premium |
| 303 | 10:57 | 11:00 | website is custom photography or custom |
| 304 | 11:00 | 11:02 | graphics. Work that's been shot or |
| 305 | 11:02 | 11:05 | designed specifically for your brand. If |
| 306 | 11:05 | 11:07 | you've got that, great. Drop it into |
| 307 | 11:07 | 11:09 | your project folder, and you're set. |
| 308 | 11:09 | 11:11 | Just tell Claude what and where it is, |
| 309 | 11:11 | 11:13 | and what to do with it. |
| 310 | 11:13 | 11:14 | But many people don't have a |
| 311 | 11:15 | 11:17 | professional photo shoot budget. So, the |
| 312 | 11:17 | 11:20 | next best thing is AI image and video |
| 313 | 11:20 | 11:22 | generation. The tools are good enough |
| 314 | 11:22 | 11:25 | now that used right, nobody can tell the |
| 315 | 11:25 | 11:28 | difference. For a single image, ChatGPT |
| 316 | 11:28 | 11:29 | is the fastest path if you've got a |
| 317 | 11:29 | 11:32 | subscription already. It's latest image |
| 318 | 11:32 | 11:35 | model is excellent for photoreal work, |
| 319 | 11:35 | 11:38 | but there's a catch. Chat GPT can't make |
| 320 | 11:38 | 11:40 | video. So, if your site needs any kind |
| 321 | 11:40 | 11:42 | of animation like the hero scroll effect |
| 322 | 11:42 | 11:45 | I'm about to build, Chat GPT alone won't |
| 323 | 11:45 | 11:47 | get you there. That's where aggregator |
| 324 | 11:47 | 11:49 | tools come in. These tools give you |
| 325 | 11:49 | 11:52 | access to every major image and video |
| 326 | 11:52 | 11:55 | generation model from one tab. The one I |
| 327 | 11:55 | 11:57 | use is 11 Labs. 11 Labs is a paid |
| 328 | 11:57 | 12:00 | service, but their plans are reasonable. |
| 329 | 12:00 | 12:01 | And if you use the 11 Labs link in the |
| 330 | 12:01 | 12:04 | description below, you'll get 50% off |
| 331 | 12:04 | 12:06 | your first month of the creator plan, |
| 332 | 12:06 | 12:07 | which gets you access to everything I'm |
| 333 | 12:07 | 12:10 | about to demonstrate. Inside 11 Labs |
| 334 | 12:10 | 12:12 | here, I generate an image with Chat |
| 335 | 12:12 | 12:15 | GPT's image model. |
| 336 | 12:15 | 12:17 | Once that renders, I'll pick one of the |
| 337 | 12:17 | 12:19 | four options, and then drop that exact |
| 338 | 12:19 | 12:22 | image in as the starting frame for |
| 339 | 12:22 | 12:24 | Google's VO3.1 |
| 340 | 12:24 | 12:26 | to turn it into a video. Then, once I |
| 341 | 12:27 | 12:28 | get the output for that, I'll select one |
| 342 | 12:28 | 12:31 | of the options, then upscale the result |
| 343 | 12:31 | 12:35 | with Topaz, all without leaving the tab. |
| 344 | 12:35 | 12:36 | That's the workflow we're using to |
| 345 | 12:36 | 12:38 | create the hero asset for our steakhouse |
| 346 | 12:38 | 12:40 | here. Here's the trick that makes this |
| 347 | 12:40 | 12:42 | fast. You don't have to write the image |
| 348 | 12:42 | 12:44 | prompt yourself. Claude already knows |
| 349 | 12:44 | 12:46 | your project, so you can ask Claude to |
| 350 | 12:46 | 12:48 | write the image generation prompt for |
| 351 | 12:48 | 12:50 | you. You paste that prompt into your |
| 352 | 12:50 | 12:52 | image generator, and you get something |
| 353 | 12:52 | 12:54 | that matches your brand and your |
| 354 | 12:54 | 12:56 | existing design aesthetic on the first |
| 355 | 12:56 | 12:58 | try. Once you have your asset, drop it |
| 356 | 12:59 | 13:00 | into your project folder, and Claude has |
| 357 | 13:00 | 13:02 | everything it needs. Okay, that covers |
| 358 | 13:02 | 13:04 | imagery. But, what about when you want |
| 359 | 13:04 | 13:06 | to level up visuals on your site that |
| 360 | 13:06 | 13:08 | aren't photos or videos? |
| 361 | 13:08 | 13:11 | That's where 21st.dev comes in. |
| 362 | 13:11 | 13:14 | 21st.dev is a library of pre-made web |
| 363 | 13:14 | 13:17 | components, animations, scroll effects, |
| 364 | 13:17 | 13:20 | buttons, and more. All built by real |
| 365 | 13:20 | 13:23 | developers, and all free to grab. |
| 366 | 13:23 | 13:26 | You can use 21st.dev two ways. You can |
| 367 | 13:26 | 13:28 | browse around for visual inspiration if |
| 368 | 13:28 | 13:30 | you're not sure what you want to add to |
| 369 | 13:30 | 13:32 | your site. Or, if you find a specific |
| 370 | 13:32 | 13:34 | design or element you like, you can copy |
| 371 | 13:34 | 13:37 | a prompt that tells Claude exactly how |
| 372 | 13:37 | 13:40 | to recreate it in your project. For our |
| 373 | 13:40 | 13:41 | build, I want to build something |
| 374 | 13:41 | 13:44 | visually striking for the hero section. |
| 375 | 13:44 | 13:46 | A really cool image effect that makes |
| 376 | 13:46 | 13:48 | the site feel premium right when someone |
| 377 | 13:48 | 13:51 | lands on it. Scrolling through 21st.dev |
| 378 | 13:51 | 13:53 | here, I find a smooth scroll image |
| 379 | 13:53 | 13:55 | component I like. So, I'll click the |
| 380 | 13:55 | 13:58 | copy prompt button on it and back in |
| 381 | 13:58 | 14:01 | Claude code, I'll paste that prompt in, |
| 382 | 14:01 | 14:03 | add the stake video we just generated, |
| 383 | 14:03 | 14:05 | and tell Claude to use the component to |
| 384 | 14:05 | 14:08 | build out the hero. |
| 385 | 14:08 | 14:10 | Now, watch what Claude does next. |
| 386 | 14:10 | 14:11 | It pushes back. |
| 387 | 14:11 | 14:14 | The 21st.dev component I picked is for a |
| 388 | 14:14 | 14:17 | system called React. React is a more |
| 389 | 14:17 | 14:18 | complex setup than what we're using |
| 390 | 14:18 | 14:21 | here. Our project is a simple static |
| 391 | 14:21 | 14:23 | site, so Claude says no to dropping in |
| 392 | 14:23 | 14:25 | the React component as is because it |
| 393 | 14:26 | 14:27 | would change how our whole project |
| 394 | 14:27 | 14:29 | works. For your project, you might |
| 395 | 14:29 | 14:31 | actually want something more complex |
| 396 | 14:31 | 14:32 | than what we're doing here, like a |
| 397 | 14:32 | 14:34 | dashboard, a checkout flow, or a site |
| 398 | 14:34 | 14:36 | with a login. In that case, Claude would |
| 399 | 14:36 | 14:38 | say yes to React because it fits your |
| 400 | 14:38 | 14:40 | project. The point is that Claude |
| 401 | 14:40 | 14:42 | protects the architecture you set up. It |
| 402 | 14:42 | 14:43 | doesn't break things just because you |
| 403 | 14:44 | 14:45 | asked. |
| 404 | 14:45 | 14:47 | For our static site, single file HTML is |
| 405 | 14:47 | 14:49 | the right choice and you'll see why when |
| 406 | 14:49 | 14:51 | we deploy in chapter eight. |
| 407 | 14:51 | 14:53 | So, Claude rebuilds the hero without |
| 408 | 14:53 | 14:55 | React and the first attempt doesn't |
| 409 | 14:55 | 14:57 | work. The video shows up on the page, |
| 410 | 14:57 | 14:59 | but it isn't scrolling. So, I tell |
| 411 | 14:59 | 15:02 | Claude what's happening. It finds two |
| 412 | 15:02 | 15:04 | bugs and fixes them. The page is still |
| 413 | 15:04 | 15:06 | broken though, so I ask Claude to dig |
| 414 | 15:07 | 15:08 | deeper. |
| 415 | 15:08 | 15:10 | It actually opens the page itself in my |
| 416 | 15:10 | 15:12 | browser, inspects what's happening live, |
| 417 | 15:12 | 15:15 | and finds the real problem. |
| 418 | 15:15 | 15:17 | Three layers in, it works. The lesson |
| 419 | 15:17 | 15:19 | here is to keep pushing when something |
| 420 | 15:19 | 15:21 | breaks. Just explain what went wrong and |
| 421 | 15:21 | 15:24 | what you were expecting instead. Claude |
| 422 | 15:24 | 15:25 | can usually solve it if you give it the |
| 423 | 15:25 | 15:27 | chance to look closer. |
| 424 | 15:27 | 15:30 | And there it is, a cinematic hero |
| 425 | 15:30 | 15:32 | scroll-driven, exactly like we asked |
| 426 | 15:32 | 15:34 | for. |
| 427 | 15:34 | 15:36 | Next, we do one more pass on the hero, |
| 428 | 15:36 | 15:38 | making the text readable against the |
| 429 | 15:38 | 15:40 | bright background image. |
| 430 | 15:40 | 15:42 | And making the hero reveal its content |
| 431 | 15:42 | 15:44 | as the user scrolls. |
| 432 | 15:44 | 15:46 | The key thing to know is that you can |
| 433 | 15:46 | 15:48 | keep iterating like this until your hero |
| 434 | 15:48 | 15:51 | feels right. Once your hero section is |
| 435 | 15:51 | 15:53 | locked in, it's time to step back and |
| 436 | 15:53 | 15:55 | check yourself against the bigger |
| 437 | 15:55 | 15:56 | picture. |
| 438 | 15:56 | 15:58 | Once you've got the bones of your site |
| 439 | 15:58 | 16:00 | in place, you should grade yourself |
| 440 | 16:00 | 16:01 | against the original checklist before |
| 441 | 16:02 | 16:04 | you keep polishing. This is the move |
| 442 | 16:04 | 16:05 | that separates a polished result from a |
| 443 | 16:06 | 16:07 | generic one. |
| 444 | 16:07 | 16:09 | You can grab a PDF download of that 10K |
| 445 | 16:09 | 16:11 | website checklist using the link in the |
| 446 | 16:11 | 16:13 | description below. |
| 447 | 16:13 | 16:15 | You set the bar high at the start, and |
| 448 | 16:15 | 16:17 | now you check yourself against it. To do |
| 449 | 16:17 | 16:20 | this, paste that checklist into Claude |
| 450 | 16:20 | 16:22 | and ask, "Where does this site land |
| 451 | 16:22 | 16:24 | against each of these criteria?" Be |
| 452 | 16:24 | 16:26 | honest. In my case, Claude goes through |
| 453 | 16:26 | 16:28 | each one, calling out what's strong, |
| 454 | 16:28 | 16:30 | what's mixed, and what's missing. For |
| 455 | 16:30 | 16:32 | our build, Claude comes back with point |
| 456 | 16:32 | 16:35 | of view strong, color strong, hierarchy |
| 457 | 16:35 | 16:38 | strong, and typography mixed. Imagery, |
| 458 | 16:38 | 16:41 | motion, mobile, and the invisible stuff |
| 459 | 16:41 | 16:43 | are all mixed. You'll probably get a |
| 460 | 16:43 | 16:45 | similar split on your project, and |
| 461 | 16:45 | 16:46 | that's fine. The point is to know |
| 462 | 16:46 | 16:48 | exactly what's left to do. For the items |
| 463 | 16:48 | 16:50 | that need work, don't ask Claude to fix |
| 464 | 16:50 | 16:52 | them one at a time. Ask Claude to |
| 465 | 16:52 | 16:54 | propose a batch of fixes instead. And |
| 466 | 16:54 | 16:57 | lead your ask with intent, not |
| 467 | 16:57 | 16:59 | specifics. Here's the exact prompt I use |
| 468 | 16:59 | 17:02 | for our build. I tell Claude, |
| 469 | 17:02 | 17:03 | "We need more handcrafted |
| 470 | 17:03 | 17:05 | micro-interactions. |
| 471 | 17:05 | 17:08 | The lower sections feel a bit generic. |
| 472 | 17:08 | 17:10 | We don't need to make them busier, just |
| 473 | 17:10 | 17:12 | more expensive." Notice what I'm doing |
| 474 | 17:12 | 17:15 | there. I'm not telling Claude what to |
| 475 | 17:15 | 17:17 | add, I'm telling Claude how I want it to |
| 476 | 17:17 | 17:18 | feel. |
| 477 | 17:18 | 17:21 | Claude is better at translating intent |
| 478 | 17:21 | 17:23 | into specifics than most people are at |
| 479 | 17:23 | 17:25 | writing specifications. Claude comes |
| 480 | 17:25 | 17:28 | back with a batch, film grain across the |
| 481 | 17:28 | 17:31 | whole site, animated brass hairlines |
| 482 | 17:31 | 17:33 | between sections, a glowing ember effect |
| 483 | 17:33 | 17:35 | in the reserve a table section, |
| 484 | 17:35 | 17:37 | word-by-word reveals to the headlines, |
| 485 | 17:37 | 17:40 | and a few other small details on top. |
| 486 | 17:40 | 17:43 | Five small changes in one prompt. |
| 487 | 17:43 | 17:45 | I approve them, and Claude ships them |
| 488 | 17:45 | 17:47 | all at once. There's less back and forth |
| 489 | 17:47 | 17:49 | that way. You spend fewer tokens, and |
| 490 | 17:49 | 17:52 | the result feels more cohesive than if |
| 491 | 17:52 | 17:54 | you drip feed Claude one tweak at a |
| 492 | 17:54 | 17:56 | time. Now, here's the move most people |
| 493 | 17:56 | 17:57 | skip, and it's the move that does the |
| 494 | 17:57 | 17:59 | most work on whether your site feels |
| 495 | 17:59 | 18:01 | expensive. |
| 496 | 18:01 | 18:04 | Once that batch of edits lands, scroll |
| 497 | 18:04 | 18:06 | through your site section by section, |
| 498 | 18:06 | 18:09 | and find the ones that still feel flat, |
| 499 | 18:09 | 18:11 | a little boring. There's always going to |
| 500 | 18:11 | 18:13 | be a couple. Claude won't catch them |
| 501 | 18:13 | 18:15 | because Claude can't feel your site the |
| 502 | 18:15 | 18:18 | way you can. This pass, you have to |
| 503 | 18:18 | 18:19 | drive yourself. |
| 504 | 18:19 | 18:22 | For each flat section, you give Claude |
| 505 | 18:22 | 18:25 | one specific motion or cursor |
| 506 | 18:25 | 18:28 | interaction to add. One per section, all |
| 507 | 18:28 | 18:31 | of them restrained and subtle. You can |
| 508 | 18:31 | 18:33 | ask for something specific, grab |
| 509 | 18:33 | 18:35 | something you like from 21st.dev, or |
| 510 | 18:35 | 18:37 | just ask Claude what makes sense to add. |
| 511 | 18:37 | 18:39 | In our reserve a table section, the |
| 512 | 18:39 | 18:41 | ember glow from the batch is in, but |
| 513 | 18:41 | 18:43 | it's still static. There's no movement. |
| 514 | 18:43 | 18:46 | So, I tell Claude, "Make the embers move |
| 515 | 18:46 | 18:48 | like fire. Have them react to the cursor |
| 516 | 18:48 | 18:50 | as it moves around the page." Claude |
| 517 | 18:50 | 18:52 | adds a parallax effect on the embers |
| 518 | 18:52 | 18:55 | that follows your cursor. Now, the fire |
| 519 | 18:55 | 18:58 | effect feels alive. Then, I scroll into |
| 520 | 18:58 | 19:00 | the story section, and it's still flat. |
| 521 | 19:00 | 19:03 | So, I tell Claude, "Add some elegant |
| 522 | 19:03 | 19:05 | micro movements and cursor interactions |
| 523 | 19:05 | 19:07 | here. This section is feeling very |
| 524 | 19:07 | 19:09 | static." Claude adds a soft candlelit |
| 525 | 19:09 | 19:11 | halo that follows the cursor as you |
| 526 | 19:11 | 19:14 | read. Its first attempt though is too |
| 527 | 19:14 | 19:16 | obvious, so I push back. I say, "Make it |
| 528 | 19:17 | 19:19 | more subtle, more refined." Claude adds |
| 529 | 19:19 | 19:21 | trailing motion to the halo, so it lags |
| 530 | 19:21 | 19:24 | a bit behind the cursor. That's the |
| 531 | 19:24 | 19:26 | version we'll ship. Two prompts, two |
| 532 | 19:26 | 19:28 | sections. That's all this layer takes, |
| 533 | 19:28 | 19:30 | but that layer is the difference between |
| 534 | 19:30 | 19:32 | a site that looks expensive and one that |
| 535 | 19:32 | 19:35 | feels expensive as visitors navigate the |
| 536 | 19:35 | 19:37 | pages. The pattern is to review every |
| 537 | 19:37 | 19:40 | section, find the ones that feel flat, |
| 538 | 19:40 | 19:43 | ask Claude for one cursor interaction or |
| 539 | 19:43 | 19:45 | piece of movement per section. And tell |
| 540 | 19:45 | 19:47 | Claude to make it more subtle until the |
| 541 | 19:48 | 19:51 | section feels alive without being noisy |
| 542 | 19:51 | 19:52 | and obnoxious. |
| 543 | 19:52 | 19:55 | Speaking of polish, copy, the written |
| 544 | 19:55 | 19:57 | content on your site, is another place |
| 545 | 19:57 | 20:00 | where AI tends to fall short by default. |
| 546 | 20:00 | 20:03 | AI-generated copy usually over-explains, |
| 547 | 20:03 | 20:04 | uses too many adjectives, and tries to |
| 548 | 20:05 | 20:06 | sound impressive. |
| 549 | 20:06 | 20:08 | Take a look at this line from our site. |
| 550 | 20:08 | 20:12 | Six dishes, one fire. That's restraint, |
| 551 | 20:12 | 20:14 | not adjectives. That's what separates a |
| 552 | 20:14 | 20:17 | $10,000 menu from a $200 one. |
| 553 | 20:17 | 20:18 | The front-end design skill we installed |
| 554 | 20:18 | 20:20 | at the start of this video is what helps |
| 555 | 20:20 | 20:22 | Claude to write copy like this. |
| 556 | 20:22 | 20:24 | Restrained sensory writing is one of the |
| 557 | 20:24 | 20:27 | things that skill pushes Claude toward, |
| 558 | 20:27 | 20:28 | which is another reason it earns its |
| 559 | 20:28 | 20:30 | place in every project. Here's another |
| 560 | 20:30 | 20:32 | quick win you can apply to any |
| 561 | 20:32 | 20:34 | AI-generated site. |
| 562 | 20:34 | 20:36 | There's one font called Inter that's so |
| 563 | 20:36 | 20:38 | overused on AI-generated sites it |
| 564 | 20:38 | 20:41 | instantly screams AI I made this. If you |
| 565 | 20:41 | 20:43 | see Inter in your output, ask Claude to |
| 566 | 20:43 | 20:45 | swap it out. |
| 567 | 20:45 | 20:47 | For our build, Claude swaps Inter for a |
| 568 | 20:47 | 20:49 | font called Geist. It's a small change, |
| 569 | 20:49 | 20:50 | but it makes a real difference to how |
| 570 | 20:50 | 20:52 | the site reads. Item seven on the |
| 571 | 20:52 | 20:54 | checklist is mobile that's actually |
| 572 | 20:54 | 20:57 | designed, not just shrunk down. |
| 573 | 20:57 | 20:59 | By default, Claude makes your site |
| 574 | 20:59 | 21:01 | responsive, meaning it'll fit on phones |
| 575 | 21:01 | 21:04 | or other small screens, but responsive |
| 576 | 21:04 | 21:07 | isn't the same as designed for phones. |
| 577 | 21:07 | 21:09 | Phones are going to see your site way |
| 578 | 21:09 | 21:11 | more often than desktops will. And if |
| 579 | 21:11 | 21:13 | your mobile version is just your desktop |
| 580 | 21:13 | 21:15 | version squished smaller, your viewers |
| 581 | 21:15 | 21:17 | will feel it. You have to ask Claude for |
| 582 | 21:17 | 21:19 | it specifically. |
| 583 | 21:19 | 21:21 | So, tell Claude to do a dedicated pass |
| 584 | 21:21 | 21:22 | on the mobile version. |
| 585 | 21:22 | 21:23 | Tell it to think about what should be |
| 586 | 21:23 | 21:26 | hidden on small screens, what should be |
| 587 | 21:26 | 21:28 | tighter, and what should resize. |
| 588 | 21:28 | 21:30 | For our build, the navigation collapses |
| 589 | 21:30 | 21:32 | on phones. The wordmark gets tighter |
| 590 | 21:33 | 21:35 | spacing, and the buttons get a smaller |
| 591 | 21:35 | 21:37 | variant. With those polished passes |
| 592 | 21:37 | 21:39 | done, all eight checklist items are |
| 593 | 21:39 | 21:42 | complete. Your site looks $10,000. |
| 594 | 21:42 | 21:45 | Now, we have to actually put it online. |
| 595 | 21:46 | 21:47 | You can build the most beautiful site in |
| 596 | 21:47 | 21:49 | the world, but up to this point, your |
| 597 | 21:49 | 21:51 | site only exists on your computer. |
| 598 | 21:51 | 21:53 | So, if you copy the URL from your |
| 599 | 21:53 | 21:54 | preview right now, the one that starts |
| 600 | 21:54 | 21:57 | with localhost, and send it to a friend, |
| 601 | 21:57 | 21:59 | they're going to be very disappointed. |
| 602 | 21:59 | 22:02 | That URL only works on your machine. To |
| 603 | 22:02 | 22:03 | share your site with the world, you have |
| 604 | 22:03 | 22:06 | to put it on a real server at a real |
| 605 | 22:06 | 22:09 | custom URL. Hosting is the service that |
| 606 | 22:09 | 22:11 | runs your website on a server 24/7, so |
| 607 | 22:11 | 22:13 | anyone in the world can reach it. It's |
| 608 | 22:13 | 22:15 | the boring part of owning a website, but |
| 609 | 22:15 | 22:17 | every real site needs one. I use |
| 610 | 22:17 | 22:18 | Hostinger because it's the cheapest |
| 611 | 22:18 | 22:20 | professional host I know of that gives |
| 612 | 22:20 | 22:22 | you a free domain for the first year on |
| 613 | 22:22 | 22:23 | top of your plan. |
| 614 | 22:23 | 22:25 | And here's the deal. If you grab |
| 615 | 22:25 | 22:27 | Hostinger through the link on screen, or |
| 616 | 22:27 | 22:28 | the first link in the description below, |
| 617 | 22:28 | 22:31 | you'll get 10% off whatever Hostinger's |
| 618 | 22:31 | 22:33 | current promotional prices. Prices |
| 619 | 22:33 | 22:35 | change throughout the year, but 10% off |
| 620 | 22:35 | 22:37 | the best available price is always the |
| 621 | 22:37 | 22:39 | cheapest way to get started. |
| 622 | 22:39 | 22:41 | Now, before you click anything, let's |
| 623 | 22:41 | 22:43 | talk about which plan you actually want. |
| 624 | 22:43 | 22:44 | For the kind of site we built in this |
| 625 | 22:44 | 22:46 | video, a simple static site with no |
| 626 | 22:46 | 22:48 | login, no checkout, and no real |
| 627 | 22:48 | 22:50 | database, Hostinger's premium plan |
| 628 | 22:50 | 22:52 | covers everything. That's the one we're |
| 629 | 22:52 | 22:53 | picking today. But, if your project is |
| 630 | 22:53 | 22:55 | more complex than what we did here, like |
| 631 | 22:55 | 22:57 | a site with user accounts, a payment |
| 632 | 22:57 | 22:59 | flow, or a database in the background, |
| 633 | 22:59 | 23:01 | premium won't cut it. For projects like |
| 634 | 23:01 | 23:03 | that, you want Hostinger's business plan |
| 635 | 23:03 | 23:06 | instead. It supports node.js and more |
| 636 | 23:06 | 23:08 | advanced setups Claude tends to use for |
| 637 | 23:08 | 23:12 | complex sites. Same link, same 10% off, |
| 638 | 23:12 | 23:14 | just one tier up. |
| 639 | 23:14 | 23:15 | Remember when Claude said no to react |
| 640 | 23:16 | 23:17 | back in chapter six? That's the kind of |
| 641 | 23:17 | 23:18 | moment that tells you which plan you |
| 642 | 23:18 | 23:20 | need. If Claude kept your site simple, |
| 643 | 23:21 | 23:22 | premium is fine. If Claude built you |
| 644 | 23:22 | 23:24 | something with a real back end, you want |
| 645 | 23:24 | 23:27 | business. For our steakhouse, premium is |
| 646 | 23:27 | 23:29 | the right pick. Open the link from the |
| 647 | 23:29 | 23:31 | description, then on this page here, |
| 648 | 23:31 | 23:33 | click start now, and that'll scroll you |
| 649 | 23:33 | 23:36 | down to the pricing panels. Select the |
| 650 | 23:36 | 23:38 | plan you want, set the term to 12 |
| 651 | 23:38 | 23:40 | months. 12 months is the minimum term |
| 652 | 23:40 | 23:41 | that gets you a free domain for the |
| 653 | 23:41 | 23:44 | first year. Now search for the domain |
| 654 | 23:44 | 23:46 | you want. If it's available, claim it. |
| 655 | 23:46 | 23:48 | Your cart total is going to depend on |
| 656 | 23:48 | 23:50 | whatever promotion Hostinger has running |
| 657 | 23:50 | 23:52 | when you sign up. For me, it comes out |
| 658 | 23:52 | 23:54 | to about $43 for the year. That's |
| 659 | 23:54 | 23:57 | hosting plus a domain plus a free email |
| 660 | 23:57 | 23:59 | account all in. The exact number you see |
| 661 | 23:59 | 24:01 | might be a few dollars different, but |
| 662 | 24:01 | 24:02 | using the link below is always going to |
| 663 | 24:03 | 24:04 | get you the best available price. If you |
| 664 | 24:04 | 24:06 | add a month of Claude Pro on top of |
| 665 | 24:06 | 24:07 | that, which is about 20 bucks, you've |
| 666 | 24:08 | 24:11 | built a $10,000 website for roughly $60 |
| 667 | 24:11 | 24:12 | total. |
| 668 | 24:12 | 24:14 | Click continue, |
| 669 | 24:14 | 24:16 | then add your email and a password to |
| 670 | 24:16 | 24:19 | register an account. On the next page, |
| 671 | 24:19 | 24:20 | enter your billing information to |
| 672 | 24:20 | 24:22 | complete the transaction. |
| 673 | 24:22 | 24:24 | After checkout is complete, the |
| 674 | 24:24 | 24:26 | onboarding flow asks what kind of site |
| 675 | 24:26 | 24:28 | you have. Since we're uploading our own |
| 676 | 24:28 | 24:32 | files, pick migrate existing site, |
| 677 | 24:32 | 24:35 | then upload backup files. |
| 678 | 24:35 | 24:37 | Then select the domain you just bought. |
| 679 | 24:37 | 24:39 | Now return to your project folder on |
| 680 | 24:39 | 24:41 | your computer so you can see the files |
| 681 | 24:41 | 24:43 | that Claude built. |
| 682 | 24:43 | 24:45 | Your index.html |
| 683 | 24:45 | 24:48 | plus any images, videos, or sub folders |
| 684 | 24:48 | 24:49 | sitting inside. |
| 685 | 24:49 | 24:51 | Here's the part that matters. |
| 686 | 24:51 | 24:53 | You don't want to zip the project folder |
| 687 | 24:53 | 24:56 | itself. You want to zip the files inside |
| 688 | 24:56 | 24:57 | the folder. |
| 689 | 24:57 | 24:59 | If you zip the whole folder, Hostinger |
| 690 | 24:59 | 25:01 | unzips it on their server and your site |
| 691 | 25:01 | 25:03 | ends up one directory deeper than it |
| 692 | 25:03 | 25:06 | should. Your domain loads a blank page. |
| 693 | 25:06 | 25:08 | So, select everything inside your |
| 694 | 25:08 | 25:11 | project folder. That's command A on Mac |
| 695 | 25:11 | 25:13 | or control A on Windows. Then right |
| 696 | 25:13 | 25:17 | click on your selection. On Mac, hit |
| 697 | 25:17 | 25:18 | compress. |
| 698 | 25:18 | 25:22 | On Windows, pick send to then compressed |
| 699 | 25:22 | 25:23 | folder. |
| 700 | 25:23 | 25:25 | You get one zip file with your |
| 701 | 25:25 | 25:27 | index.html sitting right at the top |
| 702 | 25:27 | 25:29 | level. That's exactly what Hostinger |
| 703 | 25:29 | 25:32 | wants. You can drag the zip file back |
| 704 | 25:32 | 25:33 | out to the same level as your parent |
| 705 | 25:33 | 25:35 | folder. And then give it a relevant |
| 706 | 25:35 | 25:36 | name. |
| 707 | 25:36 | 25:39 | Drag that zip into Hostinger and once |
| 708 | 25:39 | 25:41 | the files finish uploading, click next. |
| 709 | 25:41 | 25:44 | Then click submit request. Once it |
| 710 | 25:44 | 25:46 | loads, click on your domain |
| 711 | 25:46 | 25:49 | and there it is. That's your $10,000 |
| 712 | 25:49 | 25:52 | website live at your own custom domain |
| 713 | 25:52 | 25:55 | built with just a handful of prompts. If |
| 714 | 25:55 | 25:56 | you want yours online too, grab |
| 715 | 25:56 | 25:58 | Hostinger using the first link in the |
| 716 | 25:58 | 25:59 | description below. That's how you lock |
| 717 | 25:59 | 26:01 | in your 10% discount on top of whatever |
| 718 | 26:01 | 26:03 | promotion they already have running. |
| 719 | 26:03 | 26:05 | It's the cheapest way I know of to put a |
| 720 | 26:05 | 26:06 | real professional website on the |
| 721 | 26:06 | 26:10 | internet. Thanks for watching. |