Ho Creato un Sito da 10.000€ GRATIS con l'AI (Claude Code) — Transcript

Full transcript

1. 0:01Today, you can build beautiful websites
2. 0:03with 3D animations, scrolling, and
3. 0:04incredible design in just a few minutes
4. 0:06and for practically nothing thanks to
5. 0:08the new capabilities of Cloud Code
6. 0:09paired with an image generator like
7. 0:11Nano Banana 2. And you can do it even
8. 0:13if you've never written a line of code
9. 0:15in your life. In just one single
10. 0:17afternoon, I built three different
11. 0:19premium websites using artificial
12. 0:20intelligence. In this video, I will
13. 0:22show you exactly, step by step, how I
14. 0:24accomplished this, how you can
15. 0:25customize these sites, and how you can
16. 0:27even transform this little passion of
17. 0:28yours into a professional business. By
18. 0:30the end of this video, I'll know how to
19. 0:32build your own premium website for
20. 0:34practically nothing. Let's get started.
21. 0:35Okay, let's start with the interesting
22. 0:37part. I'll show you the websites I've
23. 0:39created. So, the first one is a website
24. 0:41with a really cool animation. Now I'll
25. 0:43explain how to make them. Apple style.
26. 0:45With this raw cotton thread that forms
27. 0:48as you scroll and bam, it becomes a
28. 0:50T-shirt and obviously follows the
29. 0:52movement of the mouse or trackpad. The
30. 0:55second one is a fashion website where I
31. 0:57am the model, and obviously, I am not
32. 0:59the one who took any of the photos that
33. 1:01appear on that same website. They were
34. 1:04all generated by AI with the prompts
35. 1:06that I'll show you in the video after
36. 1:07having them train on my face. The third
37. 1:09website is an agency. Let's imagine
38. 1:11Brown Media becoming an agency with
39. 1:13five looping videos. Obviously all of
40. 1:16these are generated by AI that never
41. 1:18tire. Three websites in a day and zero
42. 1:20lines of code written by hand. And now
43. 1:22let's see together how to create
44. 1:23websites like this, starting completely
45. 1:25from scratch and with absolutely no
46. 1:26knowledge of programming. First of all,
47. 1:28why can a website like this cost up to
48. 1:30€ 10,000? Because until recently, to
49. 1:33create a website like this, an agency
50. 1:35had to hire at least three different
51. 1:37people, a designer, a developer and a
52. 1:39motion designer, for several weeks. And
53. 1:42from that combined plus the agency's
54. 1:43cap, estimates of € 8,10 and even €
55. 1:4515,000 come out. And be careful,
56. 1:47there's no scam in all this. Until
57. 1:49recently, the price charged for sites
58. 1:51of this type was absolutely fair,
59. 1:52because, to this day, the path in the
60. 1:54world of IT and web design has always
61. 1:55been to either learn to program, which
62. 1:57takes years of your time, or pay
63. 1:58someone who knows how to do it
64. 1:59professionally, which inevitably means
65. 2:01that you end up paying a very high
66. 2:02price for the service you have
67. 2:03requested. Today, thanks to new AI
68. 2:06tools, in this video I'm using Cloud
69. 2:08Code, but it can also be done easily
70. 2:10with CH GPT. With all the models that
71. 2:12have some coding involved, literally
72. 2:14anyone can do it. The generation of
73. 2:16images, which until a short time ago
74. 2:17was considered an absurd thing, in this
75. 2:19video will be performed by making use
76. 2:20of Xfield. However, it's a question of
77. 2:22convenience, and I'll explain why later
78. 2:24, but that too has become practically
79. 2:26free and in one place. By speaking
80. 2:28naturally, in the same way that you and
81. 2:29I are communicating right now, we are
82. 2:30able to create some crazy things, just
83. 2:32like this. Okay, let's start with the
84. 2:34first site, which is the one with the
85. 2:35reassembling t-shirt, and first I'll
86. 2:37explain the trick to these animations.
87. 2:39Animations like this one, or like this
88. 2:41other one showing a girl on a jewelry
89. 2:43website; another project I created
90. 2:44quite rapidly in an afternoon, based on
91. 2:46a prompt that I discovered online, or
92. 2:48perhaps this one, this incredibly cool
93. 2:50example featuring flowers that are seen
94. 2:51sprouting directly out of the stone.
95. 2:54All these sites that seem so responsive
96. 2:56to us and that look like 3D animations,
97. 2:57crazy three-dimensional models, are
98. 2:59actually made from a video. It's a
99. 3:02short optimized video that scrolls as
100. 3:04you scroll down the page. This is the
101. 3:07trick of these parts of the site called
102. 3:09Hero Sections, and until recently,
103. 3:11creating this thing would have taken a
104. 3:13crazy amount of work, like Apple's
105. 3:15sites, crazy motion design stuff. Today
106. 3:17, however, it is a very simple process
107. 3:19and the first element that we go on to
108. 3:20create when we are building the website
109. 3:21for the T-shirt. And to get to this
110. 3:23result, we start with two images. The
111. 3:26initial image, which in this case after
112. 3:28several tests, is this premium-feeling
113. 3:30T-shirt on a black background, and the
114. 3:31final image, which is the thread. I
115. 3:34said it backwards, but I'll explain why
116. 3:35in a moment. At this point, let's take
117. 3:37these two images that I created with
118. 3:39the prompt that you can find in the
119. 3:40description by downloading it. As I was
120. 3:42saying, I created them on Xfield for
121. 3:43convenience, and then you take both
122. 3:45images, insert them into the video
123. 3:46generator, and request that the system
124. 3:48proceeds to animate them for you. In
125. 3:50this way, the generator knows which is
126. 3:52the starting frame and which is the
127. 3:54ending frame of the video that we want
128. 3:55to have on our site, on our Eurosection
129. 3:57. The settings are 5 seconds, 1080p,
130. 4:00audio off. Once you have finished
131. 4:01creating the video for your Eurosection
132. 4:03, we will proceed to create the website
133. 4:04. A pure HTML page, really light, no
134. 4:07pieces that break, no animations, no
135. 4:09strange things. There are four
136. 4:11overlapping titles, this too is no
137. 4:13problem, no risk of it breaking and the
138. 4:15form that goes to the bottom. And at
139. 4:18this point we provide the
140. 4:19ultra-detailed prompt, which you can
141. 4:21also find in the description, and Cloud
142. 4:22Code generates the site and drops in,
143. 4:24bam, our entire T-shirt. From this
144. 4:26point on, it's all finishing touches.
145. 4:28We can tell him I want to modify this,
146. 4:30I want to move that, I want to change
147. 4:31the font. In short, it's like having a
148. 4:34designer in front of us, a super
149. 4:35programmer who can just say do this, do
150. 4:38that, and in a second, for free, he'll
151. 4:40generate the result we want. And if
152. 4:43you've already understood how
153. 4:44Heroctions work or what a hero section
154. 4:45of a website is and it's turned on
155. 4:47something in your head, remember to
156. 4:48subscribe to the channel because I show
157. 4:50practical things like this every week.
158. 4:53Okay, we've got the website, we've made
159. 4:54it. Cloud shows me a live preview on
160. 4:56the right-hand side, so that I am able
161. 4:57to make all of the modifications that I
162. 4:58desire to implement. The next thing was
163. 5:00to put it online because I can have the
164. 5:01most beautiful thing in the world, but
165. 5:03as long as it stays on my computer, I
166. 5:04don't do anything with it. And to put
167. 5:06these experiments online, this time I
168. 5:08chose Hostinger, which helped make this
169. 5:10video possible, and I also chose it
170. 5:12because it's really easy to use since
171. 5:14it's integrated with Cloud Code. If you
172. 5:16use the desktop app, all you need to do
173. 5:18is connect the connector, so classic
174. 5:20plus add new features, search for
175. 5:22Hostinger's MCP, and log in with your
176. 5:24credentials. At that point, Hostinger
177. 5:27is available and can be controlled from
178. 5:28Cloud, both on chat, COD, and Cowork.
179. 5:31It's really easy, otherwise if you like
180. 5:33using Cloud from the terminal, it's
181. 5:34really easy to install. Just use the
182. 5:37command slash plugin install Hostinger,
183. 5:39log in from the browser, and from that
184. 5:41moment on, Cloud can do whatever it
185. 5:42wants within Hostinger. No tokens, no
186. 5:45configuration. To launch these sites
187. 5:47online, I simply told it to put the
188. 5:49domain online, and less than a minute
189. 5:51later the site was public, with a
190. 5:52certified domain, SSL, all those things
191. 5:54that I remember when I created the
192. 5:56first website for my law firm all by
193. 5:57myself years ago, they were crazy. In
194. 6:00addition, the business plan, the one I
195. 6:02used in this video, starts at less than
196. 6:03€ 4 per month at a fixed price, there
197. 6:05is no usage fee, everything is included
198. 6:07and above all the bill does not
199. 6:08increase if the site gets 10 million
200. 6:09views. The price is always the same.
201. 6:11And on this plan you can have up to
202. 6:13five projects, 10 if you switch to the
203. 6:14cloud, domain, and email included for
204. 6:15the first year. If a site fails to load
205. 6:17, and it happens to me too, a
206. 6:19troubleshooter is JLOG and tells you
207. 6:21exactly what to fix and above all the
208. 6:23code, domain and site are yours. You
209. 6:26can move them wherever you want forever
210. 6:27and this is no small detail. The plugin
211. 6:30is absolutely free, it works with any
212. 6:31plan you already have, but if you want
213. 6:33to try it and you are not yet
214. 6:34subscribed, you will find the link in
215. 6:35the description and with the code
216. 6:36Giuseppe Cloud, all attached, you have
217. 6:38a 10%discount on everything. And now
218. 6:40let's raise the bar a bit because we
219. 6:41are not satisfied with that site there.
220. 6:44Site number two, same brand Castanea,
221. 6:46but we want more because I want a
222. 6:48fashion lookbook, that is, I want a
223. 6:50site that looks fashionable for my
224. 6:52t-shirts. And to have a fashion
225. 6:55lookbook, we need something that the
226. 6:56first site didn't have, which is photos
227. 6:58of the model, and the model is me. The
228. 7:01layout I wanted to give the site is an
229. 7:03EOS section with a text above that
230. 7:05changes automatically and a series of
231. 7:06photos that scroll below the Eurosction
232. 7:08, but it wasn't enough for me to have
233. 7:10photos, I also wanted them to be
234. 7:12slightly animated to create a minimum
235. 7:14of wow effect. And the first thing I
236. 7:17did, I generated the photos I wanted,
237. 7:18the five photos and the five scenes.
238. 7:20Once I had created the five scenes, I
239. 7:22created a prompt, obviously with Clod,
240. 7:25then launched it on Xfield, that only
241. 7:27describes the movement. Okay? And the
242. 7:30absurd thing is that you have to tell
243. 7:32it everything that shouldn't move and
244. 7:33you have to tell it the other way
245. 7:34around because these video generation
246. 7:36systems tend to animate everything. So
247. 7:38you have to tell it exactly what is
248. 7:39supposed to stay still. Once created,
249. 7:41this is the result. Here are my five
250. 7:43photos. Objectively, it made me look a
251. 7:45little older, so I'll complain and redo
252. 7:46the prompts, but I didn't feel like
253. 7:48redoing all the photos from scratch.
254. 7:50And in the end, I also made a video of
255. 7:51me in the field. There are several
256. 7:53versions of that video. The last one is
257. 7:55the one I like the most. I think that I
258. 7:56have truly aged, even aged a bit poorly
259. 7:58; I must be careful about wrinkles, and
260. 7:59I need to start applying some
261. 8:00protective sunscreen. But I really like
262. 8:02the result. I made two versions, I made
263. 8:04the version with the video below, with
264. 8:06the video next to it, with a photo of
265. 8:08me in the middle, but the result is not
266. 8:10bad at all for me. But above all, what
267. 8:12I wish to emphasize is a specific
268. 8:13result that I managed to achieve in
269. 8:14just one afternoon of work. Once you
270. 8:16take a couple of days to refine, modify
271. 8:18, and fix it, just imagine the
272. 8:19incredibly cool things that you will be
273. 8:21able to accomplish by working with this
274. 8:22stuff. And now let's move on to the
275. 8:24third site. This one was also made in
276. 8:26the same afternoon. It's a slightly
277. 8:28different thing. I wanted a slightly
278. 8:30more static website, without too much
279. 8:32wow factor. And an agency's website, a
280. 8:34potential agency of mine, which is
281. 8:35another project that I will tell you
282. 8:37about at a later time. And even in this
283. 8:39case, I didn't say: "make me a nice
284. 8:40website." I first created a prompt, I
285. 8:42described the website I wanted and gave
286. 8:44him a ready-made prompt that you don't
287. 8:46have to create, you can find it for
288. 8:47free in the description; and with that
289. 8:49prompt he already created the structure
290. 8:50and framework of the website I wanted.
291. 8:54The thing is that the page comes out
292. 8:56completely blank, because in reality 90
293. 8:58%of what makes a website cool are the
294. 9:00animations, the videos, not the design.
295. 9:03Design is something quite standard,
296. 9:04much like myself; it can be done in
297. 9:06100,000 different ways. However, what
298. 9:07is truly cool are the animations, and
299. 9:09so I wanted these lively videos that
300. 9:11would never become boring and that
301. 9:13would compose themselves within the
302. 9:15page. And here too, the same reasoning
303. 9:17as before, you always start with a
304. 9:18static photo. I made several tests, I
305. 9:20saw the one I liked the most and then I
306. 9:22went on to animate the static photo and
307. 9:24that's the best way to get a consistent
308. 9:26result. We know that the photos are all
309. 9:28similar, even the result that we will
310. 9:30have in the videos will be all similar,
311. 9:32all in the same style, because
312. 9:33unfortunately today, at least
313. 9:34replicating the identical result with
314. 9:36prompts alone is practically impossible
315. 9:38. In this instance as well, the videos
316. 9:41were made, uploaded live, and moved to
317. 9:43Cloud with a few instructions; it is a
318. 9:45final code that, at the very least, I
319. 9:48like a great deal. And I know what you
320. 9:50might be thinking right now, like: "
321. 9:52Okay, Giuseppe, it all seems really
322. 9:53easy, but I've never used Cloud Code
323. 9:54before and I have no idea where to
324. 9:55start". Don't worry, I'll explain
325. 9:57everything to you completely from
326. 9:59scratch in 10 minutes in this video on
327. 10:00the right. Thank you for watching and
328. 10:02always unleash your potential. Tchau.