Как делать сайты на $10 000 с помощью Claude Code — Transcript

Full transcript

1. 0:00Привет и добро пожаловать на самый
2. 0:01интенсивный курс по созданию сайтов на
3. 0:03CloudД в 2026 году. К концу этого видео
4. 0:05ты сделаешь свой первый сайт, и он будет
5. 0:07не только красивый и крутой, но и будет
6. 0:09функциональный, который умеет принимать
7. 0:11реальные заявки. Ты можешь сделать этот
8. 0:13сайт для себя либо начать продавать это
9. 0:15как услугу. И всё это без кода, без
10. 0:17дизайнера и без сложных терминов для
11. 0:19обычных людей, как мы с вами, простым
12. 0:21языком с полного нуля. Мы начнём прямо с
13. 0:23самых основ. Сначала разберём то, как
14. 0:25вообще установить-код на компьютер.
15. 0:27Потом создадим с вами первый сайт,
16. 0:28первый дизайн, [музыка] сделаем
17. 0:30улучшение этого дизайна с помощью таких
18. 0:32вещей, как skills. Сделаем несколько
19. 0:34вариантов разных сайтов. [музыка] Покажу
20. 0:36разные фишки. А дальше мы сделаем так,
21. 0:38чтобы этот сайт был доступен другим
22. 0:40людям. Достаточно один раз досконально
23. 0:42посмотреть урок. И даже если ты сейчас
24. 0:44полный новичок, полный ноль, ты
25. 0:46научишься делать крутые сайты. Ну что,
26. 0:48если вы готовы, let's go. Что такое
27. 0:50клодкод? Клодко - это инструмент,
28. 0:52которому ты говоришь, что ты хочешь, а
29. 0:54он берёт это и делает. Он сам составляет
30. 0:56план, пишет код, исправляет ошибки и
31. 0:58вносит какие-то изменения. В нашем
32. 1:00случае сайты он создаёт точно так же. То
33. 1:02есть мы даём ему доступ к папке, он сам
34. 1:04создаёт файлы, исправляет ошибки,
35. 1:05смотрит, как это всё выглядит, даже
36. 1:07делает сам скриншоты, чтобы проверить
37. 1:08себя. В общем, это очень крутой
38. 1:10инструмент, который должен быть в вашем
39. 1:12арсенале. Важно, что клодко-код работает
40. 1:14только на платной версии. Начните с
41. 1:16версии за 20 долларов. Потом, если вам
42. 1:17будет не хватать, перейдёте на версию за
43. 1:19100 долларов.
44. 1:21Ну что, друзья, давайте начнём с
45. 1:22установки клода. Для этого мы переходим
46. 1:24на сайт clod.ai. Тут мы нажимаем слева в
47. 1:28нижнем углу на свою иконку. И вот здесь
48. 1:30у нас есть get apps and extensions.
49. 1:32Нажимаем на неё. Здесь есть разные
50. 1:34расширения. Вот я предлагаю, например,
51. 1:35вам скачать Chrome расширение, да, чтобы
52. 1:38оно вот вот как здесь вот у вас стояло,
53. 1:40а чтобы код мог получить доступ,
54. 1:42например, а к вашему браузеру. И дальше
55. 1:45даже можно будет здесь, в этом браузере,
56. 1:47с ним общаться и давать какие-то ему
57. 1:49задачи. Тоже очень прикольно. Но нас
58. 1:51сейчас интересует не это. Нас сейчас
59. 1:53интересует десктоп. Desktop app. В моём
60. 1:55случае я скачиваю его на MacOS. У меня
61. 1:58он установлен. После загрузки у вас
62. 2:00откроется вот такое вот окно. Тут вот,
63. 2:03когда мы нажимаем кнопочку Home, у нас
64. 2:04есть чат и ког. Об этом я уже делал
65. 2:07видео, разбирал. Это найдёте на моём
66. 2:09канале, если будет интересно. Нас сейчас
67. 2:11интересуеткод. Переходим вот на этот
68. 2:13раздел клодкода. Дальше нажимаем New
69. 2:15Session, новая сессия. И здесь у вас
70. 2:18будет пусто. Вам нужно выбрать здесь
71. 2:20папку, в которой будет создаваться сайт.
72. 2:23Итак, я нажимаю здесь Open Folder.
73. 2:27Выбираю Desktop, то есть рабочий стол,
74. 2:29New Folder создать, да, и, например,
75. 2:31назову его там webсайт.
76. 2:34Всё, у нас открывается. Нажимаем Open. И
77. 2:36здесь у нас будет вот этот Trust
78. 2:38Workspace. Нажимаем на него. Всё,
79. 2:40видите, у нас здесь написано webсайт
80. 2:41теestст. Значит, мы в этой папке. И
81. 2:43сейчас код получил доступ к этой папке и
82. 2:46может там создавать какие-то различные
83. 2:47файлы, редактировать и так далее.
84. 2:49Смотрите, наша задача сейчас создать
85. 2:51какой-либо сайт. Допустим, я продаю
86. 2:53услуги искусственный интеллекта и хочу
87. 2:55сделать такой сайт. Что я буду делать?
88. 2:56Итак, у нас есть, например, Pinterest
89. 2:58или Behends - это сайты, где можно
90. 3:00получить какие-то референсы. Например,
91. 3:02здесь я пишу, а, там, вебсайт AI,
92. 3:05например, и здесь я тоже могу написать
93. 3:07то же самое. И мы можем просто
94. 3:09посмотреть какие-то красивые референсы,
95. 3:10то, что нам нравится. О, предположим,
96. 3:13вот такой вот сайт. Очень такой
97. 3:14прикольный, тёмный, интересный веб-сайт.
98. 3:17Вот он полностью тут представлен. Мне
99. 3:19очень нравится. И я просто сделаю
100. 3:21несколько скриншотов этого сайта
101. 3:24таким вот образом и прямо в чат Клода
102. 3:27вот таким образом переношу вот какие-то
103. 3:29моменты, которые мне очень понравились.
104. 3:31Сейчас ещё пару граф сделаем. Ну вот это
105. 3:34вот красиво.
106. 3:39И, например, что-то типа, ну, пускай
107. 3:41будут цены, да, пока просто для того,
108. 3:43чтобы сохранить время, сделаем три
109. 3:45экрана всего
110. 3:47и всё. Я обычным языком потом говорю: "У
111. 3:49меня, смотрите, есть приложение,
112. 3:51называется Aquavoice." Вот оно позволяет
113. 3:53не писать промты, а именно говорить эти
114. 3:55промты. Ссылку оставлю внизу. Опять же,
115. 3:57это не реклама, но можете пользоваться,
116. 3:59я пользуюсь именно ей. Вот диктовка.
117. 4:01Меня спрашивали в прошлых видео, почему
118. 4:02не пользуешься диктовкой. Потому что она
119. 4:04на Маке, а в клоде везде работает очень
120. 4:06ужасно. Вот
121. 4:07сторонние программы работают лучше.
122. 4:09Друзья, самый популярный вопрос
123. 4:10предыдущих моих видео про Клод. Где
124. 4:12вообще брать подписки на КЛД и другие
125. 4:14нейросети, чтобы было удобно и выгодно?
126. 4:16И также отвечу на один важный вопрос:
127. 4:18какие вообще нейросети нужно покупать?
128. 4:21Давайте начнём. Итак, друзья, я на сайте
129. 4:23GSC, а тут у нас вот раздел
130. 4:25искусственного интеллекта. И здесь есть
131. 4:26очень много разных подписок на самые
132. 4:29крутые нейросети. Ну, во-первых, как
133. 4:30минимум мы видим Clло Pro на оди месяц.
134. 4:33Стоит 2.000 руб. 1.000 плюс продаж, то
135. 4:35есть этот проверенный продавец GSL. Я
136. 4:37пользовался, когда ещё был школьником и
137. 4:39покупал всякие ключи на игры в стиме и
138. 4:41так далее, а сейчас можно покупать
139. 4:44подписки на нейросети. Итак, вот,
140. 4:46например, заходим в ClЛД. Видим, что
141. 4:482.000 руб. стоит про версия. Также можно
142. 4:50купить ClotД Max и Clot Max, который
143. 4:51стоит 200 долларов, вот здесь 127.000
144. 4:54продаж, поэтому этому продавцу можно
145. 4:56верить. И таким образом вы можете
146. 4:57покупать разные подписки. Вот, например,
147. 5:00что я вам точно советую? Покупайте клод,
148. 5:02если у вас есть какой-то бюджет. Если
149. 5:03вам хочется взять какой-то более-менее
150. 5:05универсальный инструмент, тогда давайте
151. 5:06найдём чат GPT. Вот chatт GPT тоже есть
152. 5:09множество подписок на chт GPT + там на
153. 5:11один месяц, на что-то ещё там на пятое
154. 5:14продление автоматическом. Очень, очень
155. 5:16много продавцов. Самый прикол именно в
156. 5:18чата GPT в чём? Что там есть кодекс, то
157. 5:20есть это альтернатива клодкода. Помимо
158. 5:22него, chт JPT просто офигенно делает
159. 5:25изображение, что нам нужно иногда, да,
160. 5:27во время работы там с сайтами, с
161. 5:29какими-то ещё карточками товаров и
162. 5:31фотосессиями и так далее. То есть тоже
163. 5:32круто. Ну и третья чат PT неплохо
164. 5:34отвечает на вопрос. И они очень круто
165. 5:36прокачали именно с точки зрения текста.
166. 5:37Ещё хочу поделиться тут лайфхаком. Это я
167. 5:39уже советую своим клиентам, которые у
168. 5:41меня там услуги покупают, консультации
169. 5:43покупают, но для вас тоже дам один
170. 5:45лайфхак. Вот вводите здесь Gmail, и вы
171. 5:47можете купить Gmail США. Видите, США 5
172. 5:50лет, ещё что-то. Я вам этого не говорил,
173. 5:52но если взять VPN США и взять Gmail США
174. 5:55и зарегистрироваться в каких-то
175. 5:56нейросетях, там вы получаете какие-то
176. 5:58секретные фишки, первые релизы какие-то
177. 6:00и так далее. То есть они всё время
178. 6:01делают на аудиторию США. И если вы
179. 6:03регистрируетесь под Gmail США, то вы
180. 6:05первыми будете получать самые передовые
181. 6:08нейросети и самые передовые обновления.
182. 6:10Ещё раз, друзья, я вам этого не говорил.
183. 6:13А если вам нужны подписки на другие
184. 6:14сервисы или лицензионные программы, на
185. 6:16GGL это тоже есть. Воспользовавшись
186. 6:18поисковой строкой, можно найти любые
187. 6:20товары, например, Apple-карты, подписки
188. 6:22на нейросети или даже Microsoft Office.
189. 6:24Тут каждый найдёт подписку или программу
190. 6:26под себя. Но здесь важно не забывать,
191. 6:28что важно читать описание товаров и
192. 6:30отзывы о продавцах, чтобы приобрести
193. 6:32именно тот товар, который вам нужен. А
194. 6:34если возникает какой-то вопрос, то на
195. 6:35сайте присутствует техподдержка, которая
196. 6:37поможет 24x7. Друзья, ссылки оставлю в
197. 6:39закреплённом комментарии и также в
198. 6:40описании. Покупайте подписки на несети
199. 6:43только на сайте GCL.
200. 6:46Клод, мне нужно сделать классный сайт по
201. 6:48услугам искусственного интеллекта, а
202. 6:50именно потому, что я создаю цифровых
203. 6:52двойников, которые позволяют, а,
204. 6:54записывать классные релсы, аватары без
205. 6:57участия самого человека. Вот
206. 6:58сформулировать какой-то надо офер, а,
207. 7:01красивое предложение, сделать какую-то
208. 7:03там ценовую сегментацию, например, там
209. 7:05самое дешёвое 300 долларов, подороже
210. 7:071.000 долларов и самый премиум,
211. 7:09например, 2.500 долларов. Что туда
212. 7:11входит? Да, туда входит там
213. 7:12контент-план, создание цифрового
214. 7:14аватара, тамхen, ну, какие-то вот оплаты
215. 7:17подписок и так далее. Вот придумай текст
216. 7:18сам. Но самое важное, мне нравится вот
217. 7:20этот вот дизайн, такой тёмный дизайн с
218. 7:23классными шрифтами и так далее. Сделай
219. 7:24на русском языке вот, а, подобно этому
220. 7:27сайту, который я тебе скинул, как
221. 7:29референс.
222. 7:31Всё. И таким образом, видите, я бы вот
223. 7:33это, ну, долго попечатал, а тут я просто
224. 7:35ему рассказал, что я думаю. И здесь мы
225. 7:38выбираем план мод. Пока наша задача,
226. 7:40чтобы он просто спланировал, разбил по
227. 7:42шагам, и мы потом приняли его план или
228. 7:44отвергли. Так, нажимаем Enter. Пока это
229. 7:46всё делается, расскажу. Вот смотрите, у
230. 7:48меня стоит опуus 4,8, есть сейчас модель
231. 7:50Fable 5, сильная модель, но нам пока
232. 7:53хватит опуса 4,8. И в самом начале,
233. 7:56когда мы что-либо делаем, именно
234. 7:57начинаем проект, мы ставим обязательно
235. 8:00хай или даже можно экстраra поставить и
236. 8:01так далее именно на опусе. Потом, когда
237. 8:04мы уже начинаем редактировать, можем
238. 8:05поставить Sonet, например, и сделать
239. 8:07тоже хай. То есть чем отличается OPUS и
240. 8:10Sonet? Тем, что OPUS жрёт очень много
241. 8:12кредитов, а Sonet жрёт меньше. Но так
242. 8:15как мы именно ставим, Но когда мы именно
243. 8:17начинаем проект, наша задача, чтобы в
244. 8:20фундаменте было мало ошибок. Поэтому
245. 8:21ставьте опус, а для мелких каких-то
246. 8:23задач можете использовать цены. Так как
247. 8:25у меня подписка Макс, я особо этим не
248. 8:28заморачиваюсь, но когда у меня была
249. 8:29обычная подписка, я прямо смотрел за
250. 8:31токенами, потому что они часто сгорают.
251. 8:34Он начинает задавать вопросы: "Как
252. 8:36назвать бренд?" Ну, пускай будет кай. А
253. 8:38какой акцент? Давайте оранжевый. Как
254. 8:41показывать в heroблоке ваше видео
255. 8:43аватара, абстракция, placeйholder.
256. 8:46А я сейчас тебе позже в папку засуну
257. 8:50картинку, которая должна быть именно в
258. 8:52первом экране, в главном экране, куда
259. 8:54должны вести. А пускай будет форма на
260. 8:57странице. И всё. Пока всё это
261. 8:59происходит, давайте сделаем какую-нибудь
262. 9:01красивую картинку вот типа этой, просто
263. 9:03в чате GPT достаточно бесплатной версии.
264. 9:06А мне нужно вот что-то в таком роде
265. 9:07получить.
266. 9:11Так,
267. 9:13слушай, вот это вот робот referренс мне
268. 9:15очень нравится, но надо его немного
269. 9:17переделать. А, знаешь, может, добавить
270. 9:20какую-то маску, но чтобы был вот,
271. 9:22знаешь, такой тёмный цвет. То есть у
272. 9:23меня сайт будет чёрным. Вот это мой
273. 9:25сайт. Просто робота немного надо
274. 9:27переделать, добавить какие-то вот
275. 9:29оранжевые штучки в очень крутом,
276. 9:30реалистичном, студийном свете, да? А
277. 9:33нужно сделать и переделать робота. И
278. 9:35именно в пнг мне отправь, пожалуйста,
279. 9:37чтобы прозрачный фон был.
280. 9:41И всё. То есть я пока не придумал, как
281. 9:43должен выглядеть робот. А пускай чат GPT
282. 9:45сам придумает. Обычно это плохо
283. 9:47кончается, потому что не так, как ты
284. 9:50задумывал, да. Но я думаю, для примера
285. 9:53нам будет достаточно. Конечно, лучше
286. 9:54подзапариться, найти референсы этого
287. 9:56робота, да, как он должен выглядеть, как
288. 9:58вам нравится, и только потом давать
289. 10:00какой-либо промт. Но для просто начала
290. 10:03нам этого будет достаточно. Так, здесь
291. 10:05он нам предложил план. Ну, пускай,
292. 10:07скажем, план нас устроил, да, нажмём а
293. 10:10accept, принять, и он начнёт уже сразу
294. 10:13делать. Смотрите, что он делает. Очень
295. 10:15важный момент. Он говорит: "Skillropic
296. 10:17skills front design". Он сам запускает.
297. 10:19В клоде есть такая штука, как скилы.
298. 10:23Вот они, skills. И здесь у нас есть уже
299. 10:25скилл, который называется frontend
300. 10:27design. И он обращается к нему для того,
301. 10:29чтобы сделать неишный дизайн. Как я его
302. 10:32загрузил? Смотрите, что мы делаем. Мы
303. 10:34нажимаем customize, вот здесь. Потом
304. 10:36нажимаем
305. 10:37skills слева. Итак, после этого мы
306. 10:39нажимаем кнопочку AD, нажимаем Upload и
307. 10:41Skill. И здесь нам нужно вставить один
308. 10:44файл. Я, естественно, вам ссылку на этот
309. 10:46файл скину. Вот. Вы можете,
310. 10:48соответственно, здесь его скачать. Вот
311. 10:50здесь вот Skill MD он называет. Нажимаем
312. 10:52кнопочку Download Row File. Вот так он
313. 10:55скачался. И вот этот вот
314. 10:57файл мы переносим вот сюда. Всё. А он
315. 11:00говорит о том, что у меня есть уже этот
316. 11:02скилл. Надо ли его зареплейсить, то есть
317. 11:05заменить? В моём случае я нажимаю upload
318. 11:07and replace. В вашем случае просто будет
319. 11:09upload, да, кнопочка. Всё. Вот я его
320. 11:12загрузил. Frontend дизайн. Теперь каждый
321. 11:13раз, когда вы будете делать какой-то
322. 11:14дизайн, а у вас дизайн будет просто
323. 11:17автоматически становиться лучше, потому
324. 11:18что у него уже будут встроены классные
325. 11:21промты для того, чтобы сделать офигенный
326. 11:23дизайн. Помимо этого есть замечательный
327. 11:25ещё один скилл, который называется у нас
328. 11:28UX UI Pro Max. Вот так он выглядит. Тоже
329. 11:30ссылку я вам оставлю. Естественно, чтобы
330. 11:32его скачать, нам нужно вот эту вот а
331. 11:34строчку вставить в клод. Как только он
332. 11:38сейчас завершит работу, я обязательно
333. 11:40отправлю ему этот скилл. Ну что, друзья,
334. 11:42он закончил делать сайт. Давайте
335. 11:44отправим вот этот npm install, который
336. 11:46мы вот нашли здесь. И уже чат GPT нам
337. 11:49подготовил. Знаете, на что похоже? на
338. 11:51человек-муравей оса. [смех]
339. 11:53На человека-муравея похоже. Давайте
340. 11:55скачаем. И смотрите, что мы сделаем. А,
341. 11:57интересная штука, которую точно нужно
342. 11:59вам знать. Вот у меня есть веб-сайт, а,
343. 12:02тест. И вот здесь он сделал какой-то
344. 12:04assets, да? Давайте мы сюда, а, тоже
345. 12:07сделаем папочку, назовём её типа а фото.
346. 12:11И сюда мы можем добавлять вообще любые
347. 12:13фотографии. Ваше фото какое-то можем
348. 12:15добавить, какие-то ваши кейсы,
349. 12:16портфолио, всё, что угодно можем сюда
350. 12:18добавлять. Теперь мы берём, открываем,
351. 12:21а, ну, находим, получается, наше фото,
352. 12:24вот это,
353. 12:28и вставляем его в эту папочку
354. 12:32Photos. И я назову его, а, муравей.
355. 12:37Пускай будет так. Муравей пнг. Вот. Тем
356. 12:40временем он устанавливает, получается,
357. 12:42вот этот вот скил. Я ему скажу так:
358. 12:44смотрите, я нажимаю собачку, нажимаю
359. 12:46Photos и ставлю вот этот муравей. ПН,
360. 12:51смотри, а я вставил вот эту фотографию,
361. 12:54которая должна быть в главном экране. Аа
362. 12:57вставь её теперь, чтобы она была в
363. 12:59главном экране вместо той, которая была
364. 13:01до. Давайте посмотрим, как сейчас
365. 13:04выглядит.
366. 13:06Вот так вот. Цифровой двойник. Здесь
367. 13:07должна быть фотография создана для тебя.
368. 13:10А масштабирует себя, там что-то такое.
369. 13:13Здесь цены, видите, очень красиво, очень
370. 13:15прикольно получилось. Вот здесь можно
371. 13:16оставить заявку, интересующий тариф и
372. 13:18так далее. То есть действительно
373. 13:20классный, не похожий на какой-то вот,
374. 13:22знаете, сделанный иишкой дизайн. Ещё у
375. 13:25нас здесь будет какая-то фотография
376. 13:26наша. Смотрите, как красиво он вставил.
377. 13:28Видите, как очень элегантно выглядит. Я
378. 13:30бы хотел, знаете, что когда а я шевелю,
379. 13:33получается, мышкой, чтобы был какое-то
380. 13:36вот оранжевое такое свечение сзади.
381. 13:38Слушай, сделай так, когда именно по
382. 13:40главному экрану, по Hero section я веду
383. 13:43мышкой, чтобы там такое вот оранжевое
384. 13:45свечение от мышки было и заходило за вот
385. 13:49эту а картинку муравья, да, чтобы просто
386. 13:51по бэкграунду было так красиво такое
387. 13:53небольшое свечение. Дальше, друзья, я
388. 13:56хочу показать вам вот такой сайт.
389. 13:58Называется 21 First Death. И здесь у нас
390. 14:00есть очень интересные такие решения
391. 14:02разные, которые подходят к сайтам. Вот
392. 14:04здесь, например, есть какие-то шейдеры,
393. 14:06да? Здесь мы можем добавить, смотрите,
394. 14:08например, сзади, чтобы выглядело вот так
395. 14:11вот. Мне кажется, прикольно. Для этого
396. 14:13мы просто нажимаем на эту штуку,
397. 14:14нажимаем copy prompt и, а, отправляем
398. 14:18скриншот
399. 14:21прямо к лоду. Вот таким образом
400. 14:23вставляем этот промт, который мы здесь
401. 14:25скопировали, да, копипромт сделали, и
402. 14:27просто ему говорим:
403. 14:29"Слушай, смотри, мне нравится эта
404. 14:31секция, но сзади фон просто обычный. А я
405. 14:34тебе ставил промт, где там прямо вот
406. 14:37какие-то точки, как будто бы волна. Вот
407. 14:39сделай именно вот эту волну сзади.
408. 14:43И таким образом мы можем прямо а
409. 14:45какие-то интересные штуки добавлять
410. 14:47прямо на сайт, а с помощью вот уже
411. 14:50готовых дизайнерских решений. Здесь есть
412. 14:51вот такой, например, шейдер. Тоже очень
413. 14:53красиво. Что-то такое, да, летающее. Ну,
414. 14:56в общем, здесь очень много всего. Можно
415. 14:58найти вот кнопочки интересные сделать,
416. 15:00да, какие-то градиенты сделать, анимации
417. 15:02сделать и так далее. Вот что-то такое
418. 15:05подобное добавить. Liquid Glass, да,
419. 15:06сейчас который модный. Вот такие вот
420. 15:08анимации тоже красивые есть. В общем,
421. 15:10здесь очень много разных вставок, прямо
422. 15:12можно полазить, посмотреть и улучшать
423. 15:14свой дизайн. Так, я надеюсь, он добавил.
424. 15:17Давайте посмотрим. Да, вот всё, что
425. 15:19нужно было. Единственное, я бы,
426. 15:20наверное, цвет какой-нибудь более яркий
427. 15:22сделал, но уже неплохо. Уже прикольно.
428. 15:25О'кей, давайте сюда добавим. Так, он мне
429. 15:28должен сказать, что свечение работает.
430. 15:29Отлично. Так, я отправил ему наш промт.
431. 15:32Давайте посмотрим, что он сделает. Я
432. 15:34думаю, это займёт пару минут. Вернусь,
433. 15:36как всё будет готово. Ну что, он сделал
434. 15:38волну. Единственное, мне не нравится,
435. 15:40что, видите, здесь есть плашка в первой,
436. 15:41во второй и в третьей нету. И как-то
437. 15:43странно становится. А давайте добавим,
438. 15:46скажем ему сделать плашки.
439. 15:50Слушай, смотри, здесь получается в
440. 15:51первом пункте есть плашка, а во второй и
441. 15:53третьей нету, поэтому они сливаются с
442. 15:55фоном. Давай добавим плашки и сделаем их
443. 15:58чуть-чуть прозрачными, чтобы за ними
444. 16:00было видно. А точки. Всё. То есть,
445. 16:04ребят, вы должны понять саму суть, да?
446. 16:06Что если что-то мне не нравится, вместо
447. 16:08того, чтобы описывать как-то словами и
448. 16:10так далее, я просто беру скриншот,
449. 16:12вставляю ему и говорю: "Вот это мне не
450. 16:14нравится". И всё. И он это исправляет.
451. 16:16Вот таким обычным языком, без знаний
452. 16:18огромных промтов, без знаний дизайна.
453. 16:19Просто вставили, что вам нравится, можно
454. 16:22с нуля делать такие красивые сайты. Всё,
455. 16:24он исправил, сделал немного прозрачным,
456. 16:26чтобы было видно вот эти вот точечки.
457. 16:28Очень красиво выглядит, да, достаточно
458. 16:30так технологично, интересно. Вот они
459. 16:33интересно анимируются. Мне очень
460. 16:34нравится. И таким образом мы меняем
461. 16:36каждую деталь, чтобы сделать сайт
462. 16:38уникальным. Вот и всё, друзья. Сейчас у
463. 16:40нас есть красивый сайт, но он живёт в
464. 16:42нашем компьютере. Наша задача сделать
465. 16:44так, чтобы он был доступен в интернете.
466. 16:46И самое главное, чтобы когда человек
467. 16:48нажимал, например, начать бесплатно,
468. 16:50оставлял заявку, мы видели эту заявку,
469. 16:53она к нам где-то приходила. Что мы для
470. 16:55этого сделать должны? Первое, мы должны
471. 16:57зайти на сайт, который называется
472. 16:59GitHub. Там должны зарегистрироваться и
473. 17:01потом, а, нажать создать репозиторий.
474. 17:04Вот у нас есть new, я нажимаю New. А, и
475. 17:07вот здесь у нас есть мой аккаунт
476. 17:09repository name и так далее. И вот здесь
477. 17:10как раз-таки мы создаём, назовём его так
478. 17:12же, как назвали а наш сайт. Description
479. 17:15можете не писать, это описание. Здесь
480. 17:17обязательно выбираем private, вот так. И
481. 17:20всё. Больше нам ничего не нужно.
482. 17:21Нажимаем Create repository. Теперь вот
483. 17:23копируем вот эту вот. Можем адрес
484. 17:25скопировать, можем здесь скопировать.
485. 17:27Переходим в clД, отправляем вот этот вот
486. 17:29сайт и говорим: "Слушай, все файлы,
487. 17:32которые у нас есть по веб-сайту, а
488. 17:35сделай пуш на GitHub. Когда вы впервые
489. 17:37это сделаете, клод попросит вас
490. 17:39авторизоваться. Если вы не знаете, как
491. 17:41это сделать, у меня есть видео по
492. 17:43клод-коду, прямо основы клод-кода. Я там
493. 17:45полтора часа рассказываю про то, как это
494. 17:47сделать. И мы также работаем с Гитхабом
495. 17:49там. А поэтому вы можете посмотреть то
496. 17:51видео, чтобы сэкономить время. Как
497. 17:52авторизоваться, я здесь показывать не
498. 17:54буду. Посмотрите моё другое видео. Вот
499. 17:56он говорит, что я авторизован как K Pro
500. 17:59AI. Всё супер. И начинает, получается,
501. 18:01делать пуш. Что значит пуш? Pш - это
502. 18:03значит, мы берём файлы, которые у нас
503. 18:05есть на компьютере, и переводим куда-то
504. 18:07в интернет, в облако. Вот что значит
505. 18:09пуш. Супер. У нас теперь всё должно быть
506. 18:12готово. Все файлы должны быть тут.
507. 18:14Давайте посмотрим. Да, у нас есть все
508. 18:15файлы. Фотос есть фотка муравей.
509. 18:18Отлично. То есть всё, что было у нас на
510. 18:19компьютере, теперь где-то в облаке
511. 18:21находится. Но этого недостаточно, чтобы
512. 18:23получить доступ к сайту, да? У нас не
513. 18:25будет вот это открываться. Мы же не
514. 18:26можем дать человеку вот эти файлы и
515. 18:28сказать: "На, как-то разберись". Нам
516. 18:30нужно сделать так, чтобы где-то оно
517. 18:31появлялось. Для этого у нас есть
518. 18:33следующий сайт, называется Verе. Вот
519. 18:35таким образом. Кстати, и GitHub, и
520. 18:37Versel они бесплатные, поэтому пока мы
521. 18:39больше 20 долларов не потратили, да? Вот
522. 18:41мы зашли на сайт Versel, нажимаем
523. 18:43Continuous GitHub, нажимаем Continue и
524. 18:46создаём, получается, наш Versel аккаунт.
525. 18:48В моём случае, по-моему, он у меня уже
526. 18:50создан. Да, он уже создан, поэтому, а,
527. 18:53здесь я нажимаю, что Add new project.
528. 18:57Добавляю новый проект. И вот здесь,
529. 18:59видите, у меня подключён GitHub, поэтому
530. 19:01я могу видеть вот этот вебсайт-тест и
531. 19:03другие мои репозитории. Здесь я,
532. 19:05естественно, выбираю вот этот
533. 19:06репозиторий, который я только создал. В
534. 19:08вашем случае он будет единственный,
535. 19:09поэтому вы не запутайтесь и нажимаем
536. 19:10кнопочку импорт.
537. 19:13Здесь мы ничего не трогаем, нажимаем
538. 19:15deploy и наблюдаем за тем, как
539. 19:18открывается наш сайт. Так, он говорит:
540. 19:20just deployed, всё, continue to
541. 19:21dashboard. И вот этот вот доменсайт,
542. 19:24тест пуке,
543. 19:27это пока что наш домен. Всё, теперь а
544. 19:30наш сайт доступен в интернетах. Это
545. 19:32отлично. И каждый раз, вот важный
546. 19:34момент, да, каждый раз, когда мы будем
547. 19:36делать какие-то изменения тут, мы
548. 19:39обязательно должны говорить: "Пуш это
549. 19:41изменения на GitHub, отправь эти
550. 19:44изменения на GitHub." Всё время мы
551. 19:45должны говорить, да, как только сделали
552. 19:47пачку изменений, например, три-5ять
553. 19:48изменений сделали, отправляем на GitHub,
554. 19:50а VCL уже автоматически будет
555. 19:52подтягивать эти файлы с Гитubба, то есть
556. 19:54ему не надо будет ничего говорить. Всё,
557. 19:56он у нас теперь есть домен вот этот вот
558. 19:58вебсайт тест а PUKE six Versel app.
559. 20:01Отлично. Теперь мы можем сделать, что мы
560. 20:03можем перейти на Vers, нажать кнопочку
561. 20:06domain и купить какой-то домен. Давайте,
562. 20:08ну, возьмём какой-нибудь домен. Нажмём
563. 20:10кнопочку Buy. Посмотрим, есть ли ещё
564. 20:12раз. й
565. 20:14Kйс Pro AI
566. 20:16хочу взять какой-нибудь дешёвый там за
567. 20:18доллара два, если есть 11
568. 20:221 2 Вот X YZ самый дешманский есть самый
569. 20:25дешманский пять Agency. О, прикольно.
570. 20:27Agency, да? Давайте возьмём Agency. Мне
571. 20:30нравится. Всё, нажимаем на кнопочку кар
572. 20:34XYZ уберём, наверное. Нет, давайте
573. 20:36всё-таки XYZ купим. 2 доллара всё-таки
574. 20:40приятная цена. информация билинга. Тут
575. 20:42надо будет добавить карту какую-то. Всё,
576. 20:45всё добавлено. Нажимаю buy.
577. 20:48Ну что, друзья, я купил дожимаю config,
578. 20:51connect to project. Выбираю вот этот наш
579. 20:53проект, вебсайт test connect. И я думаю,
580. 20:56должно пройти несколько часов, чтобы он
581. 20:59зарелизился, чтобы он был доступен,
582. 21:02потому что там вот DNS информация. Ну,
583. 21:04там, короче, будут свои какие-то
584. 21:05настройки хостинга, чего-то ещё.
585. 21:07Поэтому, скорее всего, пару часов,
586. 21:10возможно, пару минут. Иногда бывает
587. 21:11очень быстро, иногда бывает очень
588. 21:12медленно. Но это ещё у нас не всё,
589. 21:14потому что сайт доступен, но он пока не
590. 21:17принимает никакие заявки, да, ничего не
591. 21:19уходит никуда. Поэтому наша задача с
592. 21:21ним, а, как-то разобраться. Что мы
593. 21:23делаем, друзья? Мы Клоду говорим вот
594. 21:24следующее. Слушай, Клод, мне нужно,
595. 21:27чтобы на нашем сайте теперь работала
596. 21:29форма заявок, чтобы, когда я оставляю
597. 21:31заявку, мне приходило на Gmail
598. 21:33уведомление с информацией, а также
599. 21:36куда-нибудь в Google таблицах
600. 21:38записывалась эта информация. Что мне для
601. 21:40этого нужно сделать? Дай мне, как
602. 21:42десятилетнему ребёнку, инструкцию того,
603. 21:44что куда надо вставить, куда нажать,
604. 21:45куда перейти. И всё, что можешь сделать
605. 21:48сам, сделай сам. Он попросит нас создать
606. 21:50таблицу. После того, как мы создадим
607. 21:52таблицу, там надо будет какой-то код
608. 21:54туда, в эту таблицу. А вложить там
609. 21:56сделать небольшое приложение. Это очень
610. 21:57легко делается. Просто копипастим, да? И
611. 22:00после этого, я думаю, всё, будет
612. 22:02приходить уже всё на Gmail. Итак, Клод
613. 22:05попросил нас создать таблицу. Назови её
614. 22:08заявки кай- говорит. О'кей. Скопируем
615. 22:10ссылку. Всё-таки в Гугле сделаем
616. 22:13и назовём её заявки Kй.
617. 22:19Так, отлично.
618. 22:22Так, открой редактор кода. расширение.
619. 22:25А и вставь, говорит, вот эту штучку.
620. 22:27Давайте так.
621. 22:31Расширение Appsриpt. И вот где код, мы
622. 22:34должны вставить вот этот вот код.
623. 22:40Вот таким образом.
624. 22:43Потом говорит: "Опубликуй".
625. 22:45Начать развёртывание.
626. 22:47Новое развёртывание. Выберите тип.
627. 22:50Давайте посмотрим, какой тип надо
628. 22:51выбрать. Доступ. Все. Запуск. Я
629. 22:55веб-приложение
630. 22:56веб-приложение Доступ все от моего
631. 23:00имени. Да, всё верно. Нажимаем
632. 23:03развёртывание. Вы можете не понимать,
633. 23:04что здесь происходит. Давайте, более
634. 23:06того скажу, я сам не понимаю, что здесь
635. 23:08происходит. Говорит: "Обнови". Ну-ка
636. 23:14предоставить доступ. Нажимаем здесь. Не
637. 23:17бойтесь. Нажимаем Go to Project. Видите,
638. 23:19я здесь вот Advanced нажал. Подробнее.
639. 23:21Go to Project. Это нормально. Select
640. 23:25all. Нажимаем и continue. Так как вы
641. 23:27сами предоставляете себе доступ, ничего
642. 23:30не произойдёт. Так, всё отлично. А,
643. 23:32развернуть, да, здесь вот перейди,
644. 23:34разрешить, нажми и так далее. Появится
645. 23:37URL на exeg, говорит, вот такой вот URL.
646. 23:40Вот он, scriptрит. Вот это. Нажимаем
647. 23:42окей, чтобы скопировать. И дальше пришли
648. 23:45мне эту ссылку сюда в чат, говорит. Вот
649. 23:47прислал.
650. 23:50Тем временем мне вот на Gmail пришла
651. 23:52заявка. Вот дата такая-то, кай, бизнес,
652. 23:551.000 долларов и так далее. Уже заявка у
653. 23:58меня здесь есть. А теперь ответ
654. 24:01поменялся. Google говорит: "Не удалось
655. 24:03открыть файл". Странно, потому что ко
656. 24:05мне пришла заявка, а он её не видит.
657. 24:07Так, ну что, продолжается какая-то
658. 24:08ошибка. А мне приходят заявки на Gmail,
659. 24:11но не приходят сюда. Я говорю:
660. 24:15"Слушай, мне не приходят, а заявки
661. 24:18именно в таблицу". То есть на Gmail
662. 24:20приходят, а в таблице не отображается.
663. 24:23Так, ну что, он говорит? Ошибки нету. А
664. 24:25есть лист и потом заявки. Да, мы видим
665. 24:27лист и вот здесь вот заявки. Вот тут,
666. 24:29оказывается, все они копились. Вроде всё
667. 24:31настроено. Давайте попробуем оставить
668. 24:34заявку на сайте. Имя напишем. А давайте
669. 24:39Иван Контакт Иван 1 2 3 отправит заявку,
670. 24:43говорит: "Спасибо, открываю вам почтовый
671. 24:45ящик". Что не нужно было открывать
672. 24:47почтовый ящик? Давайте отправим ему
673. 24:51и скажем об этом. Слушай, после того,
674. 24:53как человек нажимает заявка отправлена
675. 24:56или отправит заявку, просто должно выйти
676. 24:58там галочка: "Всё, ваша заявка принята".
677. 25:01И всё, какой-то попапчик такой должен
678. 25:02выйти красивый и всё. Мы свяжемся с вами
679. 25:04в ближайшее время. Ну что, вроде он
680. 25:07исправил. Давайте ещё раз. Да, ну
681. 25:09сделаем. Давайте Хайсар. Давай самое
682. 25:12дорогое отправить заявку. Так, друзья,
683. 25:15давайте продолжать. Прямо сейчас у нас
684. 25:17что? У нас попап не выходит. И здесь он
685. 25:19говорит: "Открываю почтовый клиент,
686. 25:21заявка почти отправлена. Меня это не
687. 25:23устраивает". Я копирую это, вставляю в
688. 25:26наш clotдко
689. 25:29и говорю: "Смотри, после того, как я
690. 25:32заполняю заявку и нажимаю отправить, она
691. 25:34не отправляется, а открывается почтовый
692. 25:37ящик". Мне этого не нужно. Мне нужно,
693. 25:38чтобы, когда я нажал кнопочку
694. 25:40"Отправить, у меня вышел поп, о котором
695. 25:42мы с тобой говорили". И всё, не нужно
696. 25:44открывать почту. Прямо заявка должна
697. 25:46быть уже. Вот заполняешь вот эти
698. 25:47формочки, и она должна быть отправлена.
699. 25:50Дальше, друзья, я обнаружил вот такую
700. 25:52вот ошибку. У меня, видите, написано
701. 25:53блок. Что-то заблокировано. Вот я
702. 25:56нажимаю сюда, я не разбираюсь, что это
703. 25:59такое. Отправлю ему прямо вот эту вот
704. 26:01штуку.
705. 26:06Слушай, у меня здесь выходит блок.
706. 26:08Скорее всего, это из-за того, что у меня
707. 26:11на Гитхабе одна почта и на Версселе
708. 26:14другая почта. Возможно, из-за этого.
709. 26:16Дело в том, что у меня есть два аккаунта
710. 26:18на Гитхабе и два аккаунта на Верселе. И
711. 26:20они между собой немного перемешаны. Я в
712. 26:22один аккаунт на Гитхабе добавил свой
713. 26:24email, но почему-то он иногда его не
714. 26:26подтягивает, поэтому из-за этого иногда
715. 26:28у меня выходит блог. Но есть и хорошие
716. 26:30новости. Например, теперь по сайту KSY
717. 26:34XYZ можно найти а мой сайт по моему
718. 26:39домену. Это мой домен прямо https. Ещё
719. 26:41он защищённый домен и так далее. То есть
720. 26:44вы прямо сейчас можете получить к нему
721. 26:46доступ. Единственное, пока заявку
722. 26:47оставить нельзя, но с этим, я надеюсь,
723. 26:50разберётся а клод-код. У меня есть
724. 26:53подозрение, это моя гипотеза, что
725. 26:56Verрсль не подтягивает файлы с Гитхаба,
726. 26:59потому что вот этот вот блок прилетел,
727. 27:01заявка принята, анимация, и он говорит о
728. 27:04том, что типа вот сделай апгрейд, ты
729. 27:06хочешь добавить какой-то ещё аккаунт,
730. 27:08видимо, и так далее, там купи у меня
731. 27:10что-то. Вот. Я думаю, как только мы
732. 27:12решим вот этот блок, ну не я решу, а вот
733. 27:15Клод решит, а у нас всё будет тип-топ.
734. 27:18Вот я вижу, он зашёл на сайт, но
735. 27:20написано local host. Это значит, он
736. 27:22заходит на сайт на моём компьютере, а
737. 27:24мне это нужно, чтобы он был Ага, вот
738. 27:26такой вот popп. Отлично. Но мне нужно,
739. 27:28чтобы это всё было на GitHub. Пушу из
740. 27:30кэша. Комичу и пушу. Какие сложные
741. 27:33слова. Так, давайте отправлю ему вот эту
742. 27:35ошибочку, которая у нас вышла. И пусть
743. 27:38он её исправит. И как только он
744. 27:39исправит, мне кажется, у нас всё будет
745. 27:41прекрасно работать. Вот так, друзья,
746. 27:43очень важный здесь показательный момент.
747. 27:45Когда у меня возникает какая-то
748. 27:46проблема, вместо того, чтобы думать о
749. 27:48том, как это решить, я делаю скриншот и
750. 27:50отправляю прямо Клоду, чтобы он решал
751. 27:52эту проблему за меня. Я могу рассказать
752. 27:55какие-то свои мысли, а могу и не
753. 27:56рассказывать, чтобы он полностью сам
754. 27:58проанализировал проблему и сам же её
755. 28:00решил. Он говорит о том, что в коде
756. 28:02писал какой-то replyantropic.com.
757. 28:05Именно поэтому Versell это как-то
758. 28:07считывает. В общем, он говорит: "У тебя
759. 28:09есть два варианта: сделать репозиторий
760. 28:11публичным или оставить приватным". Но
761. 28:13если оставишь приватным, у тебя будет
762. 28:14больше разных шагов. Поэтому я сделаю,
763. 28:18давайте публичным. И тем самым Verсее у
764. 28:20нас будет бесплатным. Да. Вот
765. 28:23единственный минус, он говорит о том,
766. 28:24что мой код сайта будет виден другим
767. 28:26людям, но мне это не страшно. Ничего
768. 28:28страшного, а пускай будет виден, потому
769. 28:31что у меня там нету никаких а секретных
770. 28:33ключей. В любом случае к этому можно
771. 28:35было бы получить доступ. Так, теперь
772. 28:37статус сменится. Вебсайт KS Vcell app.
773. 28:40Так, он нам говорит: "Вернись на
774. 28:41страницу Vercell, тот самый экран со
775. 28:42скрина". Вот он. А, нажми кнопочку
776. 28:45Redeploy. Вот она. Так, нажимаю
777. 28:48кнопочку, но ничего не происходит.
778. 28:50Давайте попробуем сделать скриншот,
779. 28:54когда нажимаю
780. 28:56плой.
781. 28:58Прямо вот так. Каждую свою проблему. Не
782. 29:01стесняйтесь, описывайте. Ну что, он сам
783. 29:03как-то что-то сделал, говорит. говорит:
784. 29:06"Закрой окно. Давайте закроем". Перейдём
785. 29:08на окно deployments,
786. 29:11о чём он мне говорит. И вот здесь у нас,
787. 29:13видите, стало ready. Отлично. 46 секунд
788. 29:16назад. Супер. Так, о'кей. Проверяем
789. 29:19форму, говорит. Давайте нажму overview.
790. 29:23Вот здесь перейдём на сise XYZ. Оставить
791. 29:27заявку. Здесь нажмём,
792. 29:31а, ну, что-нибудь выберем.
793. 29:34Работай.
794. 29:37Вот так. Прикажем им работать. Отправим.
795. 29:41Так, ждём. О, есть попап. Отлично.
796. 29:44Отлично. Нажимаем отлично. И всё. Теперь
797. 29:47нам нужно проверить а таблицу. Табличку.
798. 29:51Итак, мы видим, да, Хайсар Курмангалиев,
799. 29:53Иван, премиум, работай. Это вот только
800. 29:55что упала заявочка. Супер, всё работает.
801. 29:59И таким образом вы получаете заявки.
802. 30:01Теперь зайдём на Gmail, чтобы когда, а,
803. 30:03оставили заявку, пришло уведомление: вот
804. 30:05она, наша заявочка, работай, контакт и
805. 30:08всё. То есть таким образом мы можем,
806. 30:10например, получать уведомления и на
807. 30:12Gmail, и одновременно, чтобы ещё
808. 30:14табличка заполнялась, чтобы мы её,
809. 30:15например, передали своим менеджерам. Вот
810. 30:17таким образом несложно настраиваем форму
811. 30:20подачи заявок. О'кей, в целом всё.
812. 30:23Первый дизайн мы с вами завершили. И
813. 30:25помимо того, что это получился очень
814. 30:27красивый, посмотрите, офигенный дизайн,
815. 30:29помимо этого, это очень рабочий сайт,
816. 30:32который можно уже сразу получить доступ.
817. 30:35Вот, пожалуйста, переходите на сайт,
818. 30:37оставляйте заявку,
819. 30:39да, [фыркает] и всё, друзья. Теперь
820. 30:40давайте создадим новый сайт. Для этого
821. 30:42мы нажмём новая сессия.
822. 30:45Здесь выберем webсайттест.
823. 30:47В вашем случае ваша папка, да? Здесь я
824. 30:49нажимаю Open Folder и создаю новую
825. 30:52папочку.
826. 30:54Выбираю рабочий стол. Новая папка.
827. 30:56Давайте просто назовём его вебсайт 2,
828. 30:58да, не будем что-то там крутое
829. 31:00придумывать. Open trust. Всё. План,
830. 31:04помните, да? Ставим и всё. И таким
831. 31:06образом у нас есть
832. 31:09папка второго сайта. Теперь смотрите, я
833. 31:10хотел вам показать вот этот сайт,
834. 31:12называется Motion Sites. Все ссылки,
835. 31:14которые я использую, будут в описании,
836. 31:16поэтому не переживайте. Здесь у нас есть
837. 31:18очень красивые дизайны различного
838. 31:20характера. И это уже готовые сайты,
839. 31:23которые можно использовать. Например,
840. 31:24вот этот вот 3D-шеп. Вы можете взять,
841. 31:27сделать такой сайт и что-то поменять. То
842. 31:29есть вы как бы собираете красивый сайт,
843. 31:32например, вот это вот что-то красивое,
844. 31:33да? Вот это что-то красивое, но это
845. 31:35премиум, да, это нам недоступно. Давайте
846. 31:38вот посмотрим вот это вот. Смотрите,
847. 31:39какой-то космос. Нажимаю cop, просто
848. 31:41скопировал. сюда вставляю
849. 31:45и говорю: "Слушай, я хочу собрать сайт
850. 31:47вот прямо как этот вставил тебе промт".
851. 31:50Всё. И таким образом мы просто берём уже
852. 31:54готовый дизайн сайта и его можем,
853. 31:56соответственно, редактировать под себя и
854. 31:58уже выкладывать также, да, на GitHub
855. 32:00сначала, потом на Versе, привязывать
856. 32:02свой домен, привязывать форму захвата
857. 32:05контактов и всё. И таким образом, а,
858. 32:07получать очень красивые дизайны. Вот
859. 32:09посмотрите, что-нибудь вот вот в таком
860. 32:10роде можно делать. тоже можем что-нибудь
861. 32:12такое повторить. И тем самым к лоду не
862. 32:15нужно много думать, потому что у него
863. 32:16есть в принципе всё. Друзья, не
864. 32:18переключайтесь. После того, как мы
865. 32:20соберём с вами этот сайт, я покажу вам
866. 32:22замечательный, офигенный сайт, который
867. 32:25делается на эффекте паралакса, да,
868. 32:27который я показывал в самом начале. И
869. 32:29это будет просто вынос мозга, насколько
870. 32:32это будет красиво. Ждите. Всё, он
871. 32:35говорит: "Промт полностью понятен.
872. 32:37Давай, всё, давай начинай строить".
873. 32:39Отлично, начинай. Я, наверное, понял,
874. 32:41что хочу поменять. Хочу сделать русский
875. 32:43shft. Зачем мне английский сайт? У меня
876. 32:46будут вот эти все те же видосы какие-то
877. 32:48интересные и так далее, но всё будет
878. 32:50написано на русском языке. Ну что,
879. 32:53друзья, когда у нас есть потрясающий
880. 32:55промпт, который охватывает всё, для того
881. 32:57чтобы построить сайт, клоду буквально
882. 32:59нужно 6 минут. Уже он скоро заканчивает.
883. 33:02Я попрошу его перевести весь текст на
884. 33:04русский язык, сохранив при этом шрифты,
885. 33:06сделав хорошую адаптацию шрифтов, да, и
886. 33:09после этого можно будет уже сделать этот
887. 33:12сайт публичным. Слушай, переведи теперь
888. 33:15весь текст на русский язык, но сохрани
889. 33:18вот этот стиль шфтов вот этот, а, чтобы
890. 33:21когда он будет на кириллице, такой же
891. 33:23был сериф или как шериф. Шериф - это или
892. 33:27сериф - это вот такой рубленый шрифт. Я
893. 33:29про это ему говорю. Надеюсь, он это
894. 33:31сохранит. Так, ну что, друзья, он
895. 33:33говорит, что завершил. А давайте
896. 33:35посмотрим. Открой мне сайт
897. 33:38local host 5173. Вот он. Да.
898. 33:42Так,
899. 33:44переходим на local host. И вот знай всё.
900. 33:46Введите, будьте в курсе.
901. 33:50Вот эти вот видосики очень красиво
902. 33:51выглядят, прямо очень эстетично.
903. 33:55Какие-то видео и так далее. Всё. Теперь
904. 33:58хотел показать вам одну небольшую фишку.
905. 34:00Когда мы сделали первый раз с вами,
906. 34:02привязали GitHub и Verscellе, теперь мы
907. 34:05можем сделать вот что. Пушни все эти
908. 34:08папки на GitHub, создай новые
909. 34:10репозитории.
910. 34:12Надо было сказать файлы, но он, я думаю,
911. 34:14понял. То есть сейчас нам не нужно
912. 34:16вручную заходить на GitHub, создавать
913. 34:18репозиторий, копировать ссылку, что-то
914. 34:20ещё делать. Мы уже залогинились, и тем
915. 34:22самым будет легче. Но самое интересное,
916. 34:24что теперь и на Верс ничего не надо
917. 34:26будет делать. Просто скажем: "А теперь
918. 34:28задеплой всё это на Versе". И он сам это
919. 34:30сделает. Приватный, публичный. Ну
920. 34:32давайте сделаем публичный. Asmending,
921. 34:35как назвать, говорит, давайте так. И я
922. 34:37сейчас подготовлю следующий промт.
923. 34:39Теперь обязательно задеплой это всё на
924. 34:41Verscеell. Сейчас он пушнет все файлы,
925. 34:44скажет окей, и мы переведём всё это на
926. 34:46Версель. То есть, не выходя из
927. 34:48клод-кода, у нас уже будет всё готово и
928. 34:49публично. Огонь. Репозиторий создан.
929. 34:52Теперь отправляем
930. 34:54вот этот вот промт. Всё, прошло
931. 34:55буквально 2 минуты. говорит: "Всё
932. 34:57работает. Вот мой сайт". Отлично.
933. 35:00Давайте перейдём. Так, ну что, да, всё
934. 35:03работает. Отлично. Видите, то есть один
935. 35:06раз мы запарились, да, долго было и так
936. 35:08далее, но теперь каждый новый сайт мы
937. 35:10будем создавать, буквально говоря ему:
938. 35:11"Отправь файлы на GitHub". Отправил.
939. 35:14Супер, теперь задеплою всё на Versе.
940. 35:17Всё, [смех] больше вам ничего не надо
941. 35:18будет делать. Да, всё, у нас всё
942. 35:20работает. И давайте я покажу сейчас тот
943. 35:23сайт, который мы с вами будем создавать.
944. 35:26Как он будет выглядеть, друзья? Сайт,
945. 35:28который мы с вами будем создавать, а,
946. 35:30будет выглядеть вот таким вот образом.
947. 35:34Я сейчас скролю, и видите, как красиво
948. 35:39узнать больше. Вот так он будет
949. 35:41выглядеть. И я расскажу про то, как
950. 35:43создавать вот такой вот красивый motшн в
951. 35:46стиле Apple или мета и так далее. Вы
952. 35:49увидите, как это делать. И на самом деле
953. 35:51это очень легко. Первое, что для этого
954. 35:53вам нужно, вам нужны фотографии. Вы
955. 35:55можете сгенерировать их в чат GPT, как я
956. 35:56показывал до этого, с роботом, да? А
957. 35:59либо найти просто в интернете какие-то
958. 36:00фотографии. Вот вот эти конкретные
959. 36:02фотографии я нашёл просто в интернете.
960. 36:04Вот что я потом сделал. Я перешёл на
961. 36:07редактор видео. Я для этого пользуюсь
962. 36:09HixField. Здесь получается нажимаем
963. 36:11видео. Я обычно делаю всё на Cdens. Вот
964. 36:13он CDEN 2.0. Теперь смотрите, что я
965. 36:16сделал. Я скинул две фотографии. То есть
966. 36:18мне нужно сначала получить вот это вот
967. 36:20нужно было
968. 36:23вот это вот видео мне нужно было
969. 36:25получить. Для этого что я сделал? Я
970. 36:27отправил две фотографии. Вот первую и
971. 36:30вторую,
972. 36:31отправил в клод и сказал ему: "Я тебе
973. 36:34скинул два кадра. Это начальные и
974. 36:36конечные кадры. Я, естественно, их скину
975. 36:38в CDнce. Им нужно, что, знаешь, чтобы
976. 36:40просто камера приближалась, получается,
977. 36:41приблизалась. Я просто, ну, словами
978. 36:44описал, да, и дальше как будто бы вот
979. 36:46отделение камеры, там вот потихоньку
980. 36:48вылетали вот эти, ну, вот выходили эти
981. 36:50линзы, да, граpic как будто бы такой.
982. 36:53Просто описал словами, что я хочу
983. 36:55получить. Вот он мне дал вот этот вот
984. 36:57промт, я его вставил. То есть я
985. 37:00загрузил, получается,
986. 37:02изображение.
987. 37:04Вот первое изображение, второе
988. 37:06изображение и всё. И получается, вставил
989. 37:10вот этот вот промт. Копировать.
990. 37:13ставить. Потом выбрал, естественно, 9 16
991. 37:16на9, да, чтобы было горизонтальное, и
992. 37:19выбрал 180пи.
993. 37:22И у меня, по-моему, здесь 6 секунд, да,
994. 37:23поставил 6 секунд и нажал generate. Я
995. 37:25сейчас этого делать не буду. Таким
996. 37:26образом, я сделал первый кадр. Вот он у
997. 37:29меня.
998. 37:32Теперь а я отправил то же самое к лоду
999. 37:36опять. Только я отправил, получается, в
1000. 37:38начале я отправил вот этот кадр, да, чем
1001. 37:40он завершился. То есть вот этот вот
1002. 37:42кадр, потом этот и этот, чтобы у меня
1003. 37:44как бы видео как будто бы продолжилось.
1004. 37:46Понятно, да? И вот он сделал вот такое
1005. 37:50вот продолжение.
1006. 37:56То есть это были какие-то якорные точки,
1007. 37:58да? Вот вот это первая якорная точка,
1008. 38:00вот это вторая якорная точка, вот эта
1009. 38:02третья. Посмотрите, насколько
1010. 38:03некачественное изображение, но он считал
1011. 38:06его и сделал качественным.
1012. 38:09Соответственно, здесь тоже клод мне, а,
1013. 38:11говорит о том, что вот вот этот промт
1014. 38:13вставь, я его вставил, получил вот этот
1015. 38:15результат и всё. И теперь я скачал вот
1016. 38:17эти два видео. Что теперь? Теперь наша
1017. 38:20задача перейти в клод, нажать новая
1018. 38:22сессия, выбрать, соответственно, новую
1019. 38:25папку, рабочий стол. А, назовём, мм,
1020. 38:28glгes, да,
1021. 38:31glasses, типа очки. Вот. Open trust
1022. 38:35план.
1023. 38:37И смотрите, что я делаю вот сейчас
1024. 38:39внимательно, друзья. Я открываю папку
1025. 38:41Glasses, и сюда я создаю сам новую папку
1026. 38:45внутри, которую я называю, например,
1027. 38:47footage. Фage означает, ну, какие-то вот
1028. 38:50видосы, да? В этот футеage я буду
1029. 38:52загружать два видео.
1030. 38:56Вот эти два видео я загружу в этот
1031. 38:57фooдж. Вот таким образом. И всё. Теперь
1032. 39:00я скажу клоду. Клод. Я хочу сделать сайт
1033. 39:03с motionн дизайном таким паралакс
1034. 39:05эффектом. Я тебе загрузил уже два видео,
1035. 39:08да, первое и второе. Соответственно,
1036. 39:10используй их по порядку. То есть когда
1037. 39:12человек будет скролить, чтобы вот этот
1038. 39:15motionн эффект создавался, да,
1039. 39:16соответственно, нужно порезать его а на
1040. 39:19кадры.
1041. 39:21Добавь какой-нибудь текст на русском
1042. 39:23языке. Это будет про очки.
1043. 39:26Э, Gen 2. Немного текста добавь, чтобы
1044. 39:29было красиво, в таком, а, интересном
1045. 39:32стиле. Сделай.
1046. 39:34И сейчас я футаж сделаю. Так,
1047. 39:38я отметил footageж
1048. 39:40и отмечаю
1049. 39:451
1050. 39:47и два. Вот таким образом, чтобы он
1051. 39:50понимал точно, какой файл и какая папка.
1052. 39:52Всё, я нажимаю Sent и всё. То есть,
1053. 39:55смотрите, в чём как бы магия, да,
1054. 39:57выглядит очень красиво, но на самом деле
1055. 39:59очень просто. Что у нас происходит тут?
1056. 40:02На самом деле это видео Клод начинает
1057. 40:04резать на очень много разных кадров.
1058. 40:07Очень много. Например, там 6 секунд он
1059. 40:09порежет на 300 кадров. И каждый раз,
1060. 40:12когда я листаю, я просто листаю кадры.
1061. 40:14Когда я делаю скролл, это просто кадры
1062. 40:16меняются и всё. То есть ощущение, как
1063. 40:18будто это видео, а на самом деле это не
1064. 40:19видео. Видите, я могу туда-сюда листать,
1065. 40:21туда-сюда, туда-сюда. Вот и всё. Это
1066. 40:24просто картинки. То есть он видео
1067. 40:26порежет на на множество картинок и
1068. 40:28создаст вот этот мон эффект. Вот и всё.
1069. 40:30Ну и сверху добавит, естественно, текст.
1070. 40:32Так, он говорит: "Тёмный премиум,
1071. 40:33светлый минимализм". Ну, конечно, тёмный
1072. 40:35премиум. А сколько текста добавить
1073. 40:37поверха анимации? Ну, давайте так
1074. 40:38лаконично сделаем. В основном мы будем,
1075. 40:41а, делать акцент именно на визуал. И вот
1076. 40:44он говорит: "Смотрите, твоё видео
1077. 40:47Full HD на 24 FPS, то есть в одном видео
1078. 40:50у тебя 145 фреймов и во втором видео у
1079. 40:54тебя 289 фреймов". То есть он просто
1080. 40:56возьмёт и порежет на эти фреймы. То есть
1081. 40:58фреймы - это такие кадры. И всё. Вот так
1082. 41:02просто это делается, да? Вся магия в
1083. 41:03этом. Ну что, друзья, прошло 15 минут.
1084. 41:06За 15 минут он собрал мне элегантный,
1085. 41:09офигенный сайт. Ну, мы сейчас это
1086. 41:11проверим. Я пока ещё не знаю, как
1087. 41:13получится, но я думаю, это будет очень
1088. 41:15красиво.
1089. 41:17Так, одна деталь. Браузерная панель.
1090. 41:19Тормозит перерисовку. О'кей. О'кей. Ну,
1091. 41:22давай сначала попробуем.
1092. 41:30Вау, красиво открывается.
1093. 41:33Есть у нас всё
1094. 41:35очень круто.
1095. 41:38Единственное, мне не нравится вот этот
1096. 41:41вот сектор.
1097. 41:45И, я бы сказал, конечный тоже не
1098. 41:47нравится.
1099. 41:52Слушай, вот в самом начале и в самом
1100. 41:54конце здесь текст налезает на очки, а
1101. 41:56очки - это, ну, важный элемент. Поэтому
1102. 41:58текст нужно сделать, например, с левого
1103. 42:01боку, да? А, и чуть поменьше его
1104. 42:04сделать, чтобы очки было полностью
1105. 42:06видно. Вот таким образом мы делаем
1106. 42:09какие-либо правки. Но, видите, сам
1107. 42:11скролэффект есть. Мне нравится, что,
1108. 42:14например, в первой версии у нас был
1109. 42:15только белый текст. Здесь он добавил
1110. 42:17такой немного оранжевый. Это очень круто
1111. 42:19выглядит,
1112. 42:21прямо потрясающе. Вот узнать больше тоже
1113. 42:24с какой-то точечкой. Даже подсвечиваются
1114. 42:26кнопки и так далее. Очень классно.
1115. 42:27Только вот, ну, хотелось бы, чтобы оно
1116. 42:29где-то вот здесь вот, наверное, стояло.
1117. 42:32тоже относится и вот к этой секции.
1118. 42:35Здесь вот листай какая-то анимация
1119. 42:37красивая. В общем, очень круто. Вот
1120. 42:40буквально пару изменений осталось, и я
1121. 42:42думаю, будет всё. О, уже поменял. Супер.
1122. 42:45Вот что нужно было.
1123. 42:47Просто офигенно. А в конце, в конце пока
1124. 42:50чуть-чуть не то. Надо приподнять. Сейчас
1125. 42:54он это проверит, сам исправит и так
1126. 42:55далее. Я просто решил заранее проверить.
1127. 42:58Ну всё, всё, он исправил. Так, идём к
1128. 43:00концу. И вот так красиво выглядит,
1129. 43:03друзья. Таким образом, мы с вами умеем
1130. 43:05теперь создавать разные сайты. Мы можем
1131. 43:07создавать сайты по референсам, мы можем
1132. 43:09сделать сайт прямо копию другого
1133. 43:11классного сайта и скорректировать её под
1134. 43:13себя. Мы также можем создавать сайты с
1135. 43:17очень красивой графикой, которая из
1136. 43:18любого видео делает крутую
1137. 43:20motшн-графику. Это можно использовать
1138. 43:22там для себя, себя как-то анимировать,
1139. 43:23сделать своё портфолио, как будто вы
1140. 43:25становитесь, ну, вообще всё, что угодно
1141. 43:27на самом деле теперь вы умеете делать с
1142. 43:30сайтами. Но я считаю, самое главное, мы
1143. 43:32научились ещё привязывать своё доменное
1144. 43:34имя. Также делать так, чтобы, когда
1145. 43:36поступает нам заявка, чтобы мы видели,
1146. 43:38куда она поступает. То есть это
1147. 43:40полностью рабочие сайты, которые вы
1148. 43:42можете продавать или использовать для
1149. 43:44своего бизнеса. Я надеюсь, вам урок
1150. 43:46понравился. Если у вас будут какие-то
1151. 43:48вопросы или какие-то запросы или нам
1152. 43:51нужно разобрать какой-то сайт более
1153. 43:53конкретно, то, конечно, пишите обо всём
1154. 43:55в комментариях. Возможно, мы сделаем
1155. 43:56вторую серию, если нужно будет. Но я
1156. 43:59считаю, это полностью рабочий гайд от
1157. 44:01нуля до конца, чтобы делать просто
1158. 44:03офигенные сайты. Спасибо, что были со
1159. 44:06мной всё это время. Подписывайтесь на
1160. 44:07этот канал и до новых встреч. M.