Transcription
Друзья, привет. Сегодня мы создадим ваш сайт с помощью искусственного интеллекта, который напишет за нас весь код сайта, а мы будем только давать ему инструкции в чате. А сайт будет создан на чистом HTML и CSS. И при этом мы с вами не напишем ни единой строчки кода.
А если у вас малый бизнес, вы можете, а, создать сайт самостоятельно и сэкономить кучу денег. Возможно, вы хотите просто освоить новые навыки или быстро воплотить в жизнь свои идеи. Какая бы цель, задача перед вами не стояла, я думаю, что этот мой урок - это отличный способ начать.
А сейчас я расскажу вам, что конкретно мы с вами сделаем. А сначала мы зарегистрируем имя нашего будущего сайта, затем скачаем и установим мощную профессиональную программу курсор, в которой будем работать. А скачаем подготовленную основу для сайта, которую сделал мой наставник TERMore. Научимся заменять картинки на всём сайте одной командой. Напишем весь контент сайта с помощью искусственного интеллекта. Узнаем, где брать фото картинки для сайта абсолютно легально. А узнаем, как добавлять видео на сайт, как создавать новые блоки с нужным нам дизайном, как изменять конкретную часть сайта, как добавлять новые страницы и многое-многое другое.
А теперь давайте поговорим о том, сколько это будет нам стоить. А хостинг обойдётся нам в 420 руб. в месяц. Хостинг - это необходимая услуга для того, чтобы ваш сайт, файлы, папки, картинки, в общем, всё, что мы называем сайтом, чтобы это хранилось на сервере в интернете и было доступно для любого пользователя, у кого есть подключение к интернету. То есть без хостинга нам никак не обойтись. А по моей э рекомендации у вас будет 30 дней бесплатного теста, быстрого, классного суперхостинга, одного из лучших в России, и вы сможете убедиться, что оно того стоит. А домен обойдётся нам 179 руб. за первый год. Это если речь идёт о домене .ru. Другие домены, они чуть подороже, всё увидите по дороге. Ну и создание сайта - это самая, а большая статья расходов, да, в нашем случае, так как мы всё будем делать самостоятельно, для нас это будет абсолютно бесплатно.
А, хорошо. Если вы готовы, то мы можем приступать. Поехали.
А, пожалуйста, в описании к видео найдите ссылку получить хостинг. Нажмите её, вы окажетесь на этой странице. Если она немного изменилась, ничего страшного. Находите попробовать бесплатно, нажимаете. А здесь нам нужно выбрать тариф, который мы будем тестировать. Нам вполне для начала будет достаточно тарифа "Блок". Это 12 ГБ на скоростных дисках, а тариф для пяти сайтов. То есть вы можете создать уже пять сайтов на этом тарифе, да? Э нагрузка. И в общем, всё здесь нас вполне устраивает. Стоимость 420 руб. в месяц при оплате за год.
А затем у нас есть варианты регистрации как физическое лицо и как юридическое лицо. Я буду показывать как физическое лицо. Сюда вписываете своё имя, фамилию, отчество. Как в паспорте. В общем, регистрация хостинга напоминает регистрацию SIM-карты, как и регистрация домена. То есть здесь лучше не выдумывать никаких левых данных, потому что это может впоследствии создать проблемы. Затем указываете ваш актуальный номер телефона. Никакого спама не будет, только, ну, какая-то важная информация. В общем, эти уведомления можно впоследствии отключить. Указываете email, который вы используете. А затем вы можете указать логин. Если у вас есть какой-то логин, к которому вы привыкли, просто напишите его здесь, и он будет у вас в панели хостинга.
А, и последний момент, а он достаточно важный. Пожалуйста, укажите код партнёра 110928. Он должен подставиться автоматически. Если ничего нету, напишите 110928. А для вас это никак услуга не цена не изменится в большую сторону, естественно. А, а для меня это будет ваша небольшая благодарность за мои бесплатные обучающие видео. Спасибо вам за это. В общем, заполняете, нажимаете регистрация.
После завершения регистрации вам становится доступна панель управления хостингом. А вот я зашёл в панель управления хостингом. И я прошу вас не пугаться, да? Нам здесь вообще мало что понадобится. Буквально пару моментов. Смотрите, находите "Домены и поддомены". Нажимаем. И здесь нажимаем "Регистрация доменов".
А затем, смотрите, здесь, соответственно, вот в это поле мы должны написать название домена, которое мы хотим зарегистрировать. А я вам рекомендую воспользоваться AI генератором доменов. Есть у Бигета. Смотрите, нажимаете вот сюда вот "Как выбрать домен". И вот здесь нажимаете "На нашем сайте". Вот ссылочка такая есть. Либо можете просто как-то перейти, в общем, на главную страницу Бигета и найти раздел "Домен". Нажимаете. И вот здесь есть AI генератор. Нажимаете. И здесь просто пишите, что за услуга, что за компания, в общем, о чём ваш сайт. А говорите, сколько должно быть символов в домене. Можно сделать 5, 10, 10-15, в общем, и больше. И потом нажимаете "Сгенерировать домен", и он вам предложит там 10-15 вариантов классных доменов, из которых можно выбрать.
А давайте представим, что вы определились с названием вашего сайта. В общем, сюда, в это поле, пишите название. Я напишу просто сейчас для примера My New Super Site, что-то такое. И вот нам сразу же здесь есть такие подсказки, да? А в зоне .ru, соответственно, регистрация будет 179 руб. за первый год и продление будет 390 руб. И также можно посмотреть все остальные зоны. Э, обращаю ваше внимание, что зачастую первый год, а, стоит гораздо дешевле, в, ну, вот в 10 раз дешевле, чем продление. Поэтому я настоятельно рекомендую. Доверьтесь моему опыту, регистрируйте в зоне .ru. Каждый раз, когда будете продлевать, будете себе говорить спасибо через год. В общем, выбираете домен в зоне .ru, а затем у Бигета сейчас идёт акция. Он предлагает вот этот ещё домен зарегистрировать абсолютно бесплатно. Можно сюда вот нажать "Подробности акции". И я нажимаю обычно "Отказаться от участия", мне этот домен ни к чему. Всё, 179 руб. Нажимаете "Продолжить".
На следующем этапе у меня автоматически загружаются данные администратора, которые, ну, предлагается использовать для регистрации домена. В вашем же случае здесь будет что-то типа, ну, типа "Ввести данные администратора" или "Завести нового", "Создать администратора". Нажимаете эту кнопку "Создать администратора". Затем берёте свой паспорт и внимательно всё точь в точь заполняете. А потому что если, ну, давайте представим, что через 5 лет ваш домен будет, ну, как бы высоко цениться, и если вы внесёте свои неправильные данные, то, по сути, владельцем вы и не являетесь. То есть это очень важно, как бы это ваша собственность, поэтому отнеситесь серьёзно, напишите свои паспортные данные, чтобы домен принадлежал вам железно. А, всё, заполнили, значит, эту анкету. А внизу что мы здесь оставляем? Значит, все вот эти вот переключатели мы оставляем. "Делегировать домен после регистрации" - оставляем, "Продлевать автоматически" - оставляем, "Private person" у нас автоматически устанавливается. И "Защитить свой сайт бесплатным SSL-сертификатом" - тоже оставляем. Всё, мы закончили и нажимаете "Зарегистрировать".
В моём случае заявка на регистрацию сразу же была отправлена. В вашем же случае, а, предложат вам пополнить баланс. А, соответственно, пополняйте баланс на необходимую сумму. Есть разные способы оплаты. А когда денег на балансе будет достаточно, вы нажимаете "Зарегистрировать" и видите вот такое сообщение: "Домен зарегистрирован". Всё. Здесь мы больше на хостинге пока ничего делать больше не будем. А можем идти дальше, да, и приступить непосредственно к созданию сайта.
Работать мы с вами будем в программе, которая называется Курсор. Также под видео, пожалуйста, найдите ссылку на эту страницу, и вам будет предложено скачать программу на свой компьютер. В моём случае предлагается загрузка для MacOS, в вашем случае, соответственно, для той операционной системы, которую вы используете. В общем, нажимаете, скачиваете, запускаете. Ну, ну, здесь вы знаете, что нужно делать. А я же сейчас открою Курсор.
А я запустил программу Курсор. А при первом запуске он попросит разрешить ему доступ к локальной сети. Нажимаете "Разрешить". В общем, и у нас вот такое вот окошко, да. А, смотрите, первая настройка, которую мы здесь сделаем - это выберем те ИИ модели, которые нам будут помогать в работе над сайтом. А для этого наводите, а, курсор мыши на вот это название Курсор, да, и здесь находим "Settings". И здесь находим "Cursor Settings". Открываются вот такие вот длинные настройки. Кстати, кажется, можно сделать, э, русский русский язык, да, включить, погуглить, если вам нужно русский. Я привык работать в английском. Вообще всё программирование, конечно же, ну, с английским языком так или иначе на английском языке. Поэтому я переключать не буду. Я думаю, что при желании можно Курсор сделать на русском. По-моему, у меня даже когда-то это получалось.
А, смотрите, находим здесь "Models". И я вам рекомендую. У меня было включено много разных здесь моделей, да, а я рекомендую оставить вот эти вот модели. Они хороши в кодинге. Claude 4 Sonnet. Claude Sonnet вот с этим вот мозгом, да, это, ну, как бы думание, thinking и GPT-5. То есть он как-то сам определяет, какой, э, какую ИИ модель использовать при определённой задаче. В общем, вот эти вот работают классно, они, по крайней мере, мной проверены. А если хотите, можете поэкспериментировать с другими. Но начать я вас призываю всё-таки с этими. В общем, проверьте, чтобы у вас было включено так же. А если, конечно, прошло там 2 года и вы смотрите это видео, да, и здесь абсолютно другие модели, то выбираете просто актуальную версию Claude. И, ну, и GPT тоже можно подключить. Всё, включили. А, и теперь можно вот эти вот настройки закрыть. Нажимаю.
А далее мы можем приступить уже к работе над сайтом. А для того, чтобы у нас был такой быстрый старт, да, и чтобы уже было с чем работать, мой наставник Тайрмор, он подготовил для нас как бы стартовый дизайн сайта. Уже там многое сделано, то есть это поможет нам сэкономить несколько часов времени. Я вам рекомендую начать работу именно так, и тогда вы сможете, ну, гораздо быстрее войти в курс дела. Пожалуйста. В описании к этому видео найдите ссылку на скачивание заготовки сайта. Скачиваете и сохраняете на рабочий стол. Давайте я сейчас это сделаю.
А вот я кликнул по ссылке в описании, и мне предлагается сохранить на рабочий стол. Нажимаю "Сохранить". А, всё, файл загрузился. И вот у меня вот этот zip архив website. Что нужно сделать? Соответственно, нужно его разархивировать. Разархивируйте. И вот у меня такая папочка website. Можно заглянуть внутрь. Да, всё правильно. Это наша заготовка, которую мы будем сейчас использовать. Отлично. Супер. Это можно закрыть.
Теперь я возвращаюсь в Курсор. И здесь, в Курсоре, я нажимаю "Open Project". Нажимаю. И, соответственно, теперь мне нужно на рабочем столе найти эту папку. Вот так вот. Нажимаете "Open". И вы должны у вас должно вот слева отобразиться вот эти вот файлы, которые мы только что видели в проводнике. Отлично, супер. И теперь можно начать работу в Курсоре.
А прежде чем приступить к работе, давайте ещё раз вернёмся на рабочий стол, откроем папку с веб-сайтом и найдём файл index.html и запустим его. И он у нас откроется в Chrome. И вот вы можете видеть перед собой на своих экранах заготовку, которую нам подготовил Tyler More. А значит, что у нас здесь? Ну, узнаваемое место для логотипа. Меню, это всё уже работает. Обратите внимание, страница "Главная", "About", "Service", страница "Контакты" есть кнопка, а все ссылки работают. Соответственно, у нас это первый экран, кнопка призыва к действию. И а здесь пошёл, в общем, контент, наши услуги, да, вот так вот всё это сейчас выглядит. То есть это всё нам подготовил Талермор. За это его огромная благодарность. И, соответственно, мы уже можем с этим, с этой заготовкой начать работу. А причём она, эта заготовка у нас адаптирована для мобильных устройств. Обращаю ваше внимание, да? Смотрите, при, соответственно, если с мобильного телефона пользователь заходит на ваш сайт, уже всё здесь, ну, как бы друг на друга не наезжает. Есть мобильное меню, вот такое вот. Да, в общем, всё классно, всё работает.
Так, а супер. И теперь давайте будем уже работать с этой с этой заготовкой. будем её редактировать в Курсоре. За нас это практически всё будет делать искусственный интеллект. А давайте я закрою вот эту вот лишнюю вкладку. Так.
Смотрите, первое, что мы с вами сделаем, а сейчас вы можете видеть, что у нас вот здесь как бы по задумке есть изображения, да, и они сейчас вот такие вот пустые, просто как бы плейсхолдеры. А что если мы могли бы с помощью всего лишь одной команды заменить все эти изображения на всём нашем сайте? Звучит фантастически, но на самом деле это реальность. То есть искусственный интеллект сейчас поможет нам в одну команду заменить все эти изображения. А под видео в описании также под ссылкой скачать заготовку сайта есть ещё одна ссылка скачать изображения. Пожалуйста, тоже скачайте их и сохраните на рабочий стол. Вот я их загрузил. Вот они. Website images. Да, давайте её разархивируем. И вот наши, в общем, два этих zip архива можно удалить. Удаляю. В общем, вот у нас папка с вебсайтом, с которым мы работаем, которая уже открыта в Курсоре, да, и у нас есть вот эти вот website images. Вот они. About, contact, home и services, да? Так, давайте откроем Курсор. И здесь, а, смотрите, мы можем открывать, вот здесь у нас как бы основная рабочая область. Мы можем открыть, например, любую из страниц, например, about, да, контакты, index, и index - это главное, соответственно, и а страница услуги. Допустим, нажимаем, и у нас открывается вот такой вот код, да, и вот это код всей этой страницы. Мы можем, естественно, здесь самостоятельно что-то редактировать. В принципе, здесь несложные это HTML, в общем, HTML-разметка, да, и здесь, на самом деле, ну, ничего такого сложного нету. Но нам даже это не придётся изучать, потому что нам на помощь придёт искусственный интеллект.
А смотрите, что нужно сделать. В принципе, нам не нужно здесь это держать открытым. Я могу закрыть. Обращаю ваше внимание на вот эту вот правую область. Здесь, соответственно, мы здесь с вами вот в этой, э, в этой области мы говорим, что делать искусственному интеллекту. И чтобы, так скажем, работать со всем сайтом сразу, мы должны ему сюда, ну, добавить контекст. Это называется здесь "Add context". Нажимаете и смотрите, у нас вот есть четыре страницы, да, здесь показано сейчас три. Их нужно все открыть. Я нажимаю index, about, services. Смотрите, если не отображается нужная вам страница, вот, например, страница контакта у меня не отображается, вы пишите здесь "contact.html". Вот она открывается. И нам ещё нужен style.css такой файл. Можете просто написать его "style. Style.css". Вот так вот. Теперь получается, те команды, которые мы будем давать искусственному интеллекту, они будут, а, искусственный интеллект будет работать вот с этими четырьмя страницами и с вот этим файлом style.css. И смотрите, что мы сейчас сделаем. А, забыл одно действие сделать. Что нужно нужно сделать? Что дополнительно? Смотрите, сверну Курсор. И нужно вот эту вот папку с картинками, которые мы только что скачали, поместить в папочку с нашим сайтом. Вот так вот перемещаем. Всё, она теперь здесь. Давайте проверим. Да, вот они. Website images, да, всё отлично. А, получается, сейчас, да, вот эти вот изображения, которые мы видим на сайте, они берутся вот отсюда. То есть вот у нас есть папка img, img, и здесь у нас есть вот эти вот изображения. Давайте откроем, покажу вам. Ну вот, например, какой-то такой плейсхолдер, да? Наша задача сейчас, чтобы изображения на сайте были не с этой папки, да, а вот с этой вот папки, которую мы скачали дополнительно. И как это мы можем сделать? Смотрите, возвращаюсь в Курсор и обращаю ваше внимание, что у меня здесь тоже появилась вот эта вот папочка, да? И смотрите, что я делаю. Вообще магия. Я я пишу следующее: "Замени на русском, прямо замени. Ну, пожалуйста, не обязательно, конечно, но я привык. Замени, пожалуйста, все изображения на сайте на вот эти". Ставлю двоеточие. И теперь, смотрите, открываю, нажимаю вот так вот website images и задерживая Shift, мне, в общем, нужно выбрать все вот эти вот. Вот так вот, чтобы всё это было. Так, а, наверное, лучше сделать вот так вот. Смотрите, развернуть все эти изображения. Может, и без этого сработает, да? Ну, давайте всё-таки так сделаем. И вот я начиная от about и заканчивая services Hero. Да, это я удаляю пока. Здесь нажимаю правой кнопкой выше, "Copy relative path". И здесь вставляю Ctrl V. Вот так вот. Всё. И теперь я отправляю send задачу на исполнение. Нажимаю. И он начал скрипеть своими железными мозгами. Сначала он что-то на английском соображал, да, теперь появилось на русском. Ну, так как я к нему на русском обращаюсь, он, видимо, соображает. Здесь ему также можно писать: "Пожалуйста, отвечай на русском языке". В общем, здесь такое взаимодействие. Вот представьте, что вы рядом с вами сидит очень умный, крутой программист, который может за вас всю работу сделать, и вы ему, соответственно, просто говорите, что ему надо делать, и даёте ему чёткие команды. И он, в общем-то, всё это делает. И вот, видите, "Сделаю правки в путях изображения на главной странице. Затем обновлю CSS-фоны. Заменю изображение страницах таких-то, в общем, и поехали". Да. А вот прошло где-то около полутора минут, и он нам отчитался, да? А что мы можем теперь сделать? Мы можем открыть наш браузер. Обновляю. И вуаля. Смотрите, какое чудо, да? Все изображения у нас заменены. Оп. Оп. Проверяем. Супер, супер. Отлично. Возвращаемся в Курсор. Здесь нужно нажать "Keep all". А, и теперь можно приступать уже к следующим командам. А, причём, смотрите, что интересно. Я только сейчас уже заметил после того, как всё было сделано. А здесь в этих в этой папке с новыми изображениями были вот такие вот contact hero transparent, about hero transparent, то есть для прозрачного заголовка. И искусственный интеллект, он не только не запутался, да, он мало того написал, что "Если хотите использовать прозрачные версии героев, герой - это вот это первая секция на сайте, да, ну, в английском языке называют hero section, то есть секция герой. Вот он их тут называет, да, transparent. Скажите, где именно их предпочесть?". То есть он их не использовал, он их нашёл, понял, что они есть, да, но не стал использовать. То есть он, ну, достаточно хорошо соображает.
Так, а давайте теперь дадим ему следующую команду, и она будет уже посерьёзней. А именно, давайте я вот скопировал и сейчас вставил вот этот вот промт. Прочитаю его. "Без изменения каких-либо изображений или иконок измени контент на сайте. Создай для меня сайт об услугах по веб-разработке. Название веб-сайта Суперсайты. Я предлагаю три услуги: создание сайта, создание контента и дизайн логотипов. Постарайтесь, постарайтесь, чтобы количество символов, которые уже есть на сайте, совпадало, чтобы не испортить дизайн. Пожалуйста, сделай это для всех страниц сайта". Вот такой вот промт я ему задаю и отправляю на исполнение. А давайте я ускорю видео. А, прошло около, наверное, 3 с половиной минут. И вот он отчитался, в общем-то, что он сделал. А, "Готово. Я обновил контент на всех страницах без изменения изображения иконок. Сохранил длину текста близко к исходной, чтобы не сломать дизайн. Что изменено? Всё", он нам рассказывает, что он сделал.
Так, а давайте я открою наш сайт и обновлю. О'кей. Смотрим главную. "Мы создаём мощные сайты, Суперсайты. Разрабатываем быстро надёжные воображения. Подключ от идеи, структуры до контента и фирменного стиля, чтобы ваш бизнес выглядел и работал превосходно". Заказать сайт. Отлично. А тексты он пишет, к слову, тоже достаточно конверсионные, грамотные. Ну, можете поэкспериментировать, сами почитайте, да, используйте, ну, возможно, другие темы для сайта и убедитесь, что действительно это всё круто. А, "Суперсайты быстро запустили наш проект. Всё чётко, красиво и без лишних право". Мои рекомендации, типа того, да? "Клиент Суперсайта, предприниматель. Свяжитесь с нами". А есть у нас вопросы к хидеру, а, простите, к футеру, да. Ну, мы это по ходу дела поправим. Давайте по посмотрим другие страницы. О компании, да, например. О. Интересно, да, не везде он почему-то дошли у него руки, так сказать. Услуги. Здесь изменил. Ну, видите, как как бы это не казалось странным, да, тоже такие человеческие ошибки совершает. То есть не везде он изменил у нас текст. Например, вот здесь вот на странице about он не поменял почему-то вот этот вот call to action. Ну, в целом он хорошо справился, да, изменил практически везде контент. А давайте вернёмся в Курсор. А вообще, в принципе, можно было бы его попросить, например, на странице About в самом низу. Да, ты не изменил, пожалуйста, обрати внимание, переделай, и он это сделает. А, но так как я буду менять ещё раз контент для всего сайта, да, то пока, ну, пропущу это как бы мимо мимо ушей.
Так, давайте перейдём в Курсор и зададим следующий промт. А давайте представим, что я передумал, да, и хочу делать сайт на абсолютно другую тему. Сейчас я работаю над сайтом по для службы выгула собак, например. И вот я пишу новый промт ему сюда, да? А что я пишу здесь? "Не меняя никаких изображений или иконок. Создай сайт о моей службе выгула собак. Название веб-сайта Good Dog. Я предлагаю три услуги: Выгул собак, передержка, дрессировка. Постарайтесь, чтобы количество символов, в общем, и так далее". И отправляю на задание. То есть никаких вопросов, да, типа зачем это делать? Мы же делали сайт на другую тему. То есть это такой послушный программист, который не задаёт вопросов. И давайте снова я ускорю видео, дождёмся результата.
А, итак, он закончил. Где-то 4 минуты тоже заняло, может быть, даже пять. И давайте посмотрим результат. Обновляю. Обновляю. Смотрим. "Забота движение каждый день. Good Dog. Профессиональный выгул собак. Передержка широкая собак. Бережный ход. Записаться о сервисе. Надёжные кинологи и dogwer заботиться о питомцах". В общем, всё о'кей. Он всё изменил. Да. Услуги dog. Выгул собак, передержка, дрессировка. Отзывы тоже поменял. "Запишитесь на прогулку". А почему-то он игнорирует у меня страницу about. Да, она и вот это вот место он игнорирует. Ну ладно, мы к этому вернёмся. Так, передержка. Всё. То есть он расписал всё как надо. Гото. Смотрите, "Готовы обсудить проект", да, тоже ошибка, надо обратить на это внимание. Так, а контакты, ну, в контактах он, в принципе, поменял на новое. То есть вот так вот, да, ничего человеческое ему не чуждо, и он действительно забывает некоторые моменты. Так, хорошо, давайте, а, перейдём на главную.
Так, что мы сделаем? Следующее. А, допустим, я хочу, чтобы логотип моего сайта, да, вот это вот, ну, то, что мы сейчас видим, здесь, здесь просто текст вместо логотипа. Я хочу, чтобы он был поменьше. Давайте попробуем попросить об этом наш искусственный интеллект. Нажимаю "Название логотипа на вебсайте слишком большое. Не могли бы вы уменьшить его размеры, а также заменить на каждой странице?". Нажимаю "Отправить".
А, друзья, случилось непредвиденное. Курсор говорит мне, что у меня закончился лимит использования. Я дело в том, что не всё далеко попало на видео, да, я уже с Курсором какое-то время работаю. Возможно, вышел лимит именно вот если он не привязан, например, к суткам, да, не суточный, недельный лимит, а просто лимит, который даётся по умолчанию, то, соответственно, ну, я уже достаточно давно работаю в Курсоре, и, возможно, вот достиг какого-то лимита. То есть, что делать, если вы столкнётесь с такой ситуацией, возможно, вы с ней не столкнётесь, да, потому что вы только начали использовать. Вот. Если столкнётесь, давайте попробуем найти решение. Я вот погуглил и предлагается удалить аккаунт для продолжения, э, для возобновления бесплатного вот этого пробного периода, да, использования.
Так, а смотрите, что нужно сделать. Значит, находим Курсор, э, кликаем здесь в настройках "Настройки аккаунта". И вот здесь есть у нас, так вот здесь, смотрите, нужно нажать "Управлять аккаунтом". У нас откроется браузер, то есть у вас должен быть создан аккаунт на сайте cursor.com. Вот такой вот дашборд. А затем, смотрите, здесь у нас есть так, а "Настройки", да? И вот в "Settings" у нас есть "Удалить аккаунт". Давайте попробуем сейчас удалить аккаунт. Нас просит написать "Удалить", да, для подтверждения. Delete. Нажимаю "Удалить". Так, хорошо, удалили, да? Допустим, что теперь? Открываем Курсор. И здесь давайте попробуем выйти. Так, вышли. Сверну. А, сейчас найду. Попробую заново запустить Курсор. Так, вот он у меня запустился. Давайте попробуем сейчас задать ему промт. А, добавлю здесь сначала все страницы. Так и style.css. Вот так вот нажимаю "Отправить". А, и он просит меня, а, зарегистрироваться. Так, давайте попробуем. Нажимаю "Зарегистрироваться" и попробую зарегистрироваться с тем же самым имейлом. А, да, вот и он меня просит, э, в общем, а, нет, здесь он попросит ввести данные карты. Я мог бы это сделать, да, но давайте попробуем без этого. Skip for now. Так, вроде авторизовались. Теперь открываю Курсор. Мм, нужно авторизоваться. Login. Нажимаю. Yes, login. Открыть Курсор. И давайте отправим задание. А, смотрите, сработало. И он, в принципе, начинает вроде у меня исполнять, да? А, смотрите, если вы в процессе вот этих удалений, да, если вы потеряли, а, ну, вам нужно просто.
Если вот этого здесь не будет, вам нужно просто открыть проект, да, и выбрать опять, ну, папку с вашим сайтом, так как мы все изменения сохраняли, то есть там все файлы актуальны, да, на тот момент, когда у нас закончился закончился лимит на использование.
И смотрите, он действительно удаление аккаунта привело к тому, что он, во-первых, начал мне писать на английском языке, но это не страшно, сейчас поменяем. Ну, в принципе, работает схема рабочая. Удаляете аккаунт и снова регистрируйтесь. Можно с тем же самым имейлом, и вы опять получаете, ну, определённое лимитное использование.
Плюс, что я сейчас сделаю, я сейчас поменяю а и модель. Для тех операций, которые мы здесь с вами совершаем, абсолютно не нужны такие умные э-модели. можно использовать даже те, которые, ну, так скажем, устаревшие, да, ну, хотя им там, может быть, полгода всего прошло.
Так, давайте дождёмся, пока он исполнит вот эту вот задачу и поменяем настройки. А, всё, он всё сделал, отчитался о результатах, правда, на английском языке. Сейчас давайте я попрошу его, ну, во-первых, давайте посмотрим, что он там наделал нам. Так, не совсем сюда. Вот сюда нужно перейти. Закрою, закрою. Обновляю. Да, видите, он уменьшил у меня логотип. И здесь, по-моему, тоже сделал его поменьше. Так, да, и на всех страницах, соответственно, он это проделал нам. Отлично. Супер.
Но самое главное, что мы смогли разобраться, да, как обнулить вот этот вот лимит. А сейчас, смотрите, я иду курсор настройки, настройки моделей. И давайте вот смотрите, кстати, вот у меня стоит 3 с5 клод 35 Sunnet. Этой нейросети вполне достаточно для выполнения наших задач. Все остальные можно выключить. Всё, теперь у нас расходование лимита будет идти медленней. А, отлично. Теперь я попрошу его писать на русском. А, и он вот теперь он нам отвечает на русском языке. Отлично. Давайте продолжим работу.
А сейчас я хочу попросить искусственный интеллект перевести все страницы на русский язык, название всех страниц. Пожалуйста, переведите название страниц сайта на русский и на русский язык и измени на сайте. Отправляю. А, всё, он работу окончил. Смотрите, спрашивают, хотите также перевести остальные тексты? Можно написать: "Да, переведи остальные тексты". Ну, мы по ходу дела к этому придём. Так, давайте посмотрим, как он сделал. Да, всё супер. Главное, она услуги контакты и оставить заявку тоже перевёл. Смотрите. Так, супер, супер.
Давайте, а, будем двигаться дальше. И сейчас я хочу, допустим, заменить. Я хочу, чтобы здесь было написано: "Профеональный выгол собак". Как это сделать? Возвращаемся в курсор. Пишу ему, пожалуйста, на главной странице страница в разделе, а или в секции герой, в разделе герой. Измени текст Good Day на Давайте без кавычек. Фиональный выгул собак. Отправляю. Так, он закончил. Давайте посмотрим. Оп, есть, да, профессиональный выгл собак. А что мне не нравится? Мне мне кажется, что здесь нужно шрифт уменьшить где-то процента на 33. Возвращаюсь в курсор и так ему и говорю. Пожалуйста, измени размер шрифта. где-то на 33%. Размер шрифта. Давайте добавим этого текста на 33%. А, всё, он всё сделал. Причём он изменил также адаптивное значение для мобильных устройств. Так, давайте посмотрим. Отлично. Профессиональный выгл собак. А, допустим, хочу я, чтобы у меня было написано профессиональный на этой строчке, да, а выгл собак на следующей. Так ему и говорю, пожалуйста, перенеси выгол собак на следующую стро строку. Отправляю. А, смотрите, он мне предлагает также, а, хотите добавить неразрывный пробел между выглу собак, чтобы они всегда держались вместе. Ну хорошо, давайте. То есть при изменении размера экрана, как бы он, ну вот будет всегда соблюдать вот этот вот, то есть выгол собак всегда будет вместе. Да, пишу я ему. Да, давай так и сделаем. Оп. Так, всё, работа выполнена. Давайте посмотрим, что он нам наделал. Обновляем. Да, видите, профессиональный выгл собак. Именно то, что я хотел. А причём, да, при изменении. О, посмотрите, у меня, кстати, мобильный. Почему-то он не учёл. Хм, интересно. Хотя, смотрите, для других элементов, да, это работает. Так, давайте-ка попробуем на другой странице. Будет это срабатывать, да? Смотрите, здесь везде работает. Интересно. Давайте попросим его, пожалуйста, сделай этот текст about friendly. Ну или сделал текст адаптивным, а то сейчас сейчас он не такой. Нажимаем. Так, он сделал. Давайте проверим. Так, нужно обновить, да? Смотрите, теперь теперь, соответственно, у нас а стал этот заголовок адаптивным. Супер, да? Он у нас, в принципе, слушается, да, и, ну, обычными словами, так скажем, ему можно объяснить всё, что мы захотим.
А давайте продолжим изменение сайта. Я покажу, что ещё можно делать в курсоре. А следующее, что мы с вами сделаем - это поменяем вот это вот изображение, которое у нас в секции Hero на главной странице, и также попросим нейросеть заменить вот эти вот изображения. Здесь мы добавим фотографии собачек, да, для а услуг нашей компании GoodDG. Так, а что для этого нужно? Во-первых, нужны, естественно, фотографии, да, картинки, которые мы используем для создания сайта. А я вам рекомендую, если нужны классные, э, профессиональные фотографии для разных сфер, так скажем, деятельности, которые можно использовать абсолютно легально на ваших сайтах. А сервис называется onsplash.com. А не знаю, работает ли сейчас он без специальных сервисов. В общем, я использую специальный сервис для доступа к этому сайту. И что здесь можно сделать? Вообще здесь, ну, огромное количество классных фотографий. Что я сделал? Я написал здесь doc. Вот так вот, да. И вот здесь у меня куча всяких разных классных фотографий. Их можно, причём, например, если мне нужно портрет, либо квадратные фотографии, в общем, и так далее. А здесь разные нам предлагаются другие подразделы, например, золотистый ретривер, да, кошки. В общем, классный сайт, который позволяет нам находить разные, короче, классные фотографии для наших нужд. Таких сайтов, естественно, много разных, не только он сплш. В общем, захотите, поищите их десятки. А затем, в общем, берём фотографии, значит, которые нам нравятся. Скачиваем, сохраняем. Всё, я это уже проделал. У меня Давайте я закрою с Splashш. А вот у меня так закроем курсор. Вот у меня на рабочем столе, смотрите, несколько фотографий, которые я подготовил. А что я делаю? Я выделяю эти фотографии. Нет, давайте вот так вот. Сначала я захожу в папку с нашим сайтом. Иду в раздел Website Images. Здесь у нас есть раздел home, и я вот эти вот фотографии помещаю сюда. Вот. А причём, что важно? А нужно задать правильные названия. Например, вот у меня здесь есть dogge. То есть я не расети даю понимание, что это для hero экрана. Затем есть dog walking, то есть в иглу собак, да, doctтрей, тренировка собак, дрессировка и dog overnight - это, ну, как бы передержка, ночёвка. То есть обязательно нужно назвать их правильно, чтобы, соответственно, фотографии попали в нужный раздел услуг, потому что Неросеть иначе не поймёт, что мы от неё хотим. То есть она поймёт, что мы от неё хотим, но она не поймёт, какую из фотографий куда ставить, да? Соответственно, когда мы называем их конкретно, то мы даём чёткие инструкции для нейросети. Что дальше? Теперь я открываю курсор и, а, говорю ему: "Пожалуйста, замени, а, фотографию, замени картин картинку на, а, картинку на как, ну, давайте так вот hero секции на главной и измени картинки для секции услуги. В общем, как-то я всё ему вот так вот простым человеческим языком объясняю. Затем проделаю то же самое. Смотрите, у меня вот появились м здесь вот в этом списке все вот эти вот фотографии. Их можно, кстати, открыть, посмотреть, да, здесь же прямо я их просто выделяю. А мы помним, уже мы это делали, да? Я копирую копия relative path и, соответственно, вставляю сюда. И всё. Я, собственно, отправляю, а, ускорю видео и вернусь, когда закончит. Меньше минуты прошло. Задача была несложная, смотрите. То есть фон героя заменён на вебсайт image, то есть показывает адрес и правильно выбирает Doggy Hero One. Всё правильно. Выглу собак, соответственно, Doc Walking. Передержка Doc Overnight, дрессировка Doc Trining. А нужно поправить кадрин позиция фоноворажение героя или подписи под карточками, спрашивает нас курсор. Нет, всё о'кей. В общем, я сохраняю эти изменения, закрою эту фотографию, она мне не нужна. И давайте посмотрим сайт. Бам, фотографии установлены. И здесь у нас отлично вот такая вот классная картинка. в hero экране, в hero секции.
Так, следующее, что мы сделаем, давайте, во-первых, мне не нравится шрифт, например. Я хочу изменить шрифт на всём сайте. Как это сделать? Да элементарно. А я большой любитель шрифта Monsterat, и я пишу нерасети задачу: измени измени шрифт на всём сайте на на монerat. Если если считаешь уместным, добавь а или так вот используй ещё один тарный шрифт. Если читаешь местным, использую ещё один комплектарный шрифт для, а, ну, там для некоторого текста. Посмотрим. Будет ли он это использовать, неизвестно. В общем, всё задаю. Мне нравится Мацерат. Я отправляю задачу на исполнение. А, вернусь, когда закончим. А, так. А, смотрите, он закончил. И причём он выбрал, что базовый шрифт у нас Монцерат. А для крупных заголовков он использует, предложил использовать какой-то другой шрифт. Вот такой вот. Я такой, ну, в общем, не использую. Не знаю. Давайте посмотрим, что он нам наделал. Так, обновляю. Ну, такой вот шрифт с засечками. Не очень мне он нравится, но, в принципе, в общем, в чём тут класс, да? То есть я даже про этот шрифт не знал, у меня в голове не стояло, ну, как бы сделать такой шрифт. И вот он нам предложил, то есть такой у нас программист, который мы который для нас готов стараться, да, абсолютно бесплатно, без выходных и в общем голова у него не болит, и он всегда готов к выполнению задач. Причём он с мозгами, да, и подсказывает нам, как нам лучше поступить. В принципе, неплохо выглядит, да, профессиональный гол собак. В общем, о сервисе. Ну, в общем, симпатично. Если считаете иначе, да, вы просто продолжаете общение с неросетью и говорите, что конкретно делать.
Так, супер. А, смотрите, что я бы хотел сделать здесь ещё. Во-первых, мне не нравится, что вот эта кнопка слишком большая. А кнопка слишком большая. Ну давайте вот попросим, попросим изменить эту кнопку, да? Идём опять в курсор и пишу я. Отправляю. Всё, он справился. И давайте посмотрим, как изменился наш экран Hero. Ну вот стало получше, как мне кажется, записаться можно, например, попросить его сделать, оставить заявку, как здесь, да, написать. В общем, естественно, вы полностью прямо показываете ему, что называется, пальцем, где и что нужно сделать.
Так, а давайте пойдём дальше. Что ещё мы можем делать в курсоре? А, смотрите, есть в курсоре удобная функция. Это как вот сохранение в играх. Допустим, хочу я отмотать назад какие-то изменения. Что мне нужно сделать? Мне нужно вот здесь вот, получается, в нашем чате подняться наверх. И, допустим, я хочу, допустим, всё-таки я хочу, чтобы у меня заголовки были тоже монцерат, и тогда я могу вернуться. Вот смотрите, видите, находим вот этот мой промт, который я им отправляю. Измени шрифт на всём сайте на Монцернат. Если считаешь уместным, используй ещё один комплементарный шрифт для некоторых для некоторого текста. И вот есть здесь такой restore checkpoint. Нажимаю, и он меня спрашивает: "Изменить все, вернее, отменить все изменения, которые были после этого чекпоинта". Я нажимаю continue. Так. И теперь я могу изменить, например, измени шрифт на всём сайте на Монцерат. Нажимаю отправить. А причём, видите, всё, что было после, да, у меня получается, а, вот мы поменяли фотографии, и вот мой следующий моя следующая задача. То есть он просто вычеркнул все те изменения, которые мы делали. Так, давайте подождём, пока он справится, да, и посмотрим, что у нас получилось. А вот он закончил. Но он меня почему-то спрашивал: "Хотите также применить мацеракт заголовком, заменить кастомные шрифты вот у этого вот стиля, значит, вернее, ну, как бы вот у этой в тайтле. А так, давайте посмотрим сначала, что он сделал. А, ну, в принципе, он уже поменял. Вот он. Это уже Монцерат. А, и смотрите, кнопку, помните, мы меняли, она у нас вернулась, то есть мы как бы восстановились на ту точку, да, и у нас кнопка, соответственно, откатилась назад.
Так, отлично, супер. Что ещё? А давайте сейчас попробуем сделать, например, понятно, что у нас в заготовке сайта бы было всего лишь 1 2 3 4 5 получается страниц, да? А 1 2 3 4, вернее, страницы с главной. Допустим, мы хотим добавить для каждой, вот у нас есть услуги и у нас есть выгл собак, соответственно, передержка и дрессировка. Помимо этого, для того, чтобы мой сайт выше ранжировался в поиске, например, я хочу создать отдельные страницы для каждой услуги. Что я должен написать? Курсор в курсор. Так, идём, открываем курсор. И тут я пишу ему: "Пожалуйста, создай три новых страницы с названиями оказываемых услуг. Создай структуру. и дизайн для этих страниц в той же стилистике, что и сайт. Добавь меню навигации на каждой странице. Эти страницы как подменю для страницы услуги. Вот такая вот задача. Нажимаю отправить. А хоть задача была и не маленькая, так скажем, да, сделал он это достаточно быстро. С чем связываю? Вот раньше у меня был включен, получается, Sonet 4 там, да, что-то ClД Sunet 4, Clot 4 Sonet и GPT5 ещё был подключен. Помимо того, что они тратили много как бы токенов, да, и, соответственно, моя вот эта бесплатная, мой лимит бесплатный, он быстро сгорал, он ещё долго соображал, сейчас он начал работать гораздо быстрее. Поэтому, а, имейте это в виду. То есть для таких задач, которые мы здесь делаем, да, какие-то простые действия, они абсолютно не требуются каких-то супер суперинкта. В общем, смотрите, он очень быстро сделал, получается, я добавил я до я добавлю три новые страницы. Услуги оформим подменю услуги. И вот он добавляет 89 строчек кода. 89 89 везде по 89 строчек код добавил, создал вот эти три страницы, а, в общем, и изменил некоторые настройки здесь вот, а, 54 строчки кода добавил в файл stys, в общем, создал страницу, он обо всём отчитался. О'кей. О'кей. Давайте посмотрим, что он сделал. Нажимаю обновить. Так, отлично. Смотрите, при наведении, соответственно, у меня появляются вот эти три. Даже, видите, сделал, ну, как бы хорошо сделал. он сделал, чтобы при когда я курсором вожу, видите, выделяется, подсвечивается. Давайте посмотрим в игл собак. Ну, кстати, он использовал здесь то же самое изображение. В принципе, наверное, просто взял из этого. А, соответственно, по контенту здесь, аэ, ну, надо бы что-нибудь добавить, больше текста написать, да, например, можно ещё какую-то секцию добавить, где расписать, попросить его расписать, что конкретно входит в эту услугу. В общем, смысл таких страниц в том, что на них побольше контента, конечно, как сейчас это маловато, но я не это вам хотел показать. Хочу показать вам, что просто страницы создаются. Вот, пожалуйста, точно так же. А, соответственно, теперь можно найти фотографии, которые будут подходить для каждой вот этого вот hero секции и заменить их, да, потому что как сейчас, то есть, ну, не совсем подходит.
А теперь давайте попробуем создать страницу, которая называется цены, и попросим искусственный интеллект создать нам, таблицу с ценами из трёх колонок. идём в курсор. Я уже написал, просто вставлю. Создай создай страницу цены, похоже на другие страницы, и добавь таблицу цен с тремя колонками. Посмотрим, что он нам предложит. Достаточно быстро справился. Осознанна страница прайс. А це в обще листике сатся с блоком тарифа на три колонки. В меню добавлен пункт цены. В общем, всё сделал. Нужно добавить увление рекомендуемого тарифа. Так, давайте посмотрим, что он сделал. Нажму сохранить. Вернёмся сюда. обновлю. О, посмотрите, он не не везде добавил, похоже. А, нет, всё, цены есть на всех страницах. Давайте посмотрим, что он здесь сделал. Так, здесь немножко он поплыл. Ну, здесь, в принципе, сделал неплохо, да, как бы понятно. Выглосова 25, передержка 60, дрессировка 45 баксов. Естественно, можно написать, что входит сюда вот. Что здесь сделать? Допустим, кнопки поменьше. Давай, давай сейчас попросим, попробуем немножко стилизовать вот эту вот секцию. Я попрошу его уменьшить шрифт заголовка секции, центровать соответственно по центру, а и добавить. И, допустим, изменим, а, поменяем доллары на рубли. Попросим поменять доллары на рубли и изменим размер кнопок. Ну, где-то процентов на 30 тоже можно кнопочки, наверное, уменьшить. Так, а давайте напишем этот промт. Вот такой вот промт я написал. И давайте отправим. Всё, он справился. Я отчитался. Заголовок всех цен уменьше на 25 и вырнен по центр. Кнопка тариф уменьшена на 30%. Размер паники, валюта заменя на рубли. При присчёте таком-то, выглу собак. Да, короче, всё посчитал. Нужно выделить одно из тарифов или как ременду, например, оставить рамку фон. Так, давайте я ещё напишу ему. Да, нет, точно выделять не надо. Ну, здесь по смыслу все услуги разные, да? Нет смысла выделять какую-то отдельно. В общем, можно попросить. Поэкспериментируйте, попробуйте. Так, давайте обновим, посмотрим, что он нам сделал. Всё, супер. Смотрите, выберите подходящий пакет. Э, ну, по тексту тут, ладно, можно ещё работать, да? В общем, всё, что мы просили, он нам сделал. Супер, супер. Очень круто.
А, допустим, мне показалось, да, что вот эти вот у нас цены, да, вот эти вот колоночки с кнопками, они слишком скучные, слишком статичные. Давайте сюда попросим добавить немножко жизни. Что я попрошу сделать? Я попрошу, во-первых, добавить тень для каждого блока. А потом при наведении курсора мыши я хочу, чтобы был какой-нибудь эффект, то есть движение, да? Плюс я хочу, чтобы он добавил галочки для каждых вот этих вот перечисленных, что входит в тариф. Так, вернёмся в курсор и напишем промт. Вот такой вот промт я написал. Давайте попробуем его в деле. Что он, как он это у нас реализует. Он закончил, достаточно быстро справился. Что он говорит? Добавил тен для карточек тарифов и планое поднятие приневидении. Пункты списка получили мини-иконки. Уточнил размер через фон. Чек. Ага. Эффекты работают адаптивно и не ломают сетку. Супер. Спрашивает, хотите усилить анимацию? Нет, пока не хотим. Давайте посмотрим, что ты тут наворотил нам, что ты сделал. Вот смотрите, в принципе, неплохо видно. Видите, эффект такой тени, да, появляется. И при наведении вот такой вот прикольный тоже эффект движения. Ну, классно. А, супер, да. Я даже не знаю, как это вот, ну, сколько это времени экономит сейчас при разработке вот такой вот вручную сайта, да? Ну, представьте, да, что простое, как бы простая задача, хорошо поставленная задача, и через 3 минуты у вас решение. А код бы вы писали, я не знаю, несколько часов, может быть, при этом нужно сначала этот код выучить, да? А единственный момент, я не вижу никаких галочек. Хотя он начитался, что он добавил какие-то какие-то мини-иконки, да, но сейчас я здесь ничего не вижу. Давайте попросим его просто добавить галочки к каждому пункту меню. Так, идём в курсор и просим. Никаких мини иконок не поя не появилось. А давайте попробуем вот такой вот промт отправить. Можно же, конечно, взять прямо иконку и сказать ему: "Вот тебе иконка, пожалуйста, добавь её". То есть загружаем сюда вот, а где у нас все файлы сайта лежат. Добавляем иконку, которая нас интересует, соответственно, да, и просим её добавить. Так будет, ну, гораздо проще. Ну, я хочу добиться от него, чтобы он сам иконку добавил. Давайте посмотрим, как он справится. Так, вот он отчитался, что сделал. Давайте посмотрим, что он сделал. Да, вот теперь галочки появились. Ну, видите, тоже бывает подтупливает. Прикольно. А, супер. Отлично.
Следующее, что я хочу вам показать, как вы можете добавлять дополнительную секцию. Мало того, не просто как бы из головы написать, да? Вы можете нарисовать, какую секцию вы хотите, а, и попросить искусственный интеллект её реализовать. Смотрим. А для того, чтобы нарисовать, как я хочу, чтобы выглядела секция, я буду использовать вот этот вот сервис tell.com. Ссылку оставлю в описании. А, смотрите, что я хочу сделать. Я хочу добавить, например, пускай у меня будет, ну, сайт про собачек, да, и, э, грех как бы не добавить сюда какую-то галерею, например, да. А, и я хочу, например, вот сюда вот на главную страницу между секцией с отзывом и, а, финальным call экшеном добавить галерею с фотографиями, ну, в общем, наших питомцев. Так, значит, вот у нас есть сервис. Здесь всё достаточно просто. Вот здесь нахожу внизу прямоугольник. Так. Что потом? А, потом, собственно, рисую. Вот так вот нарисовал один прямоугольник. Теперь я его копирую. Ctrl C. Ctrl V вставляю. Вот так вот. Ещё раз Ctrl V вставляю. Допустим, я хочу вот из двух рядов такую вот галерею, да, с фотографиями. А можно, наверное, попробовать его, конечно, какую-то секцию посложнее нарисовать, но давайте для начала научимся делать такие простые вещи. В общем, вот такая вот у меня галерея. Так, что дальше? Дальше, чтобы скачать, это нужно войти, чтобы, ну, в общем, скачать. Чтобы скачать, нужно здесь зарегаться. Я, знаете, как попробую сделать? Я попробую сделать просто скриншот вот этого экрана, того то, что я нарисовал. Всё, он сохранён. И теперь я загружу это изображение в курсор. Так, давайте я открою курсор. Теперь мне надо, в общем, перетащить. Вот у меня этот скриншот. Я просто беру его вот так вот и перетаскиваю сюда. Так, вот он у меня сюда добавился. Так, что дальше? Дальше я напишу, давайте попробуем вот такой вот промт. Отправляю. Вот он отчитался о выполнении. И смотрите, он мне предлагает. Нужно заменить какие-то фото или на другие из набора или добавить подпись Lightbox при клике. А давайте попробуем добавить Lightbox. Да, добавь, пожалуйста, Lightbox. при клике и возможность пере переключать фото лайтбоксе. Как-то так. Вот. Давай попробуем. Нажимаю отправить. Пока он исполняет, можно посмотреть, а что он сделал нам до этого. Так, возвращаюсь. Возвращаюсь сюда, обновляю. Бам. Вот он добавил, пожалуйста, мне галерею. Так, пока йбокс не добавлен. Давайте подождём, что он тут у нас делает. Ну, он ещё будет какое-то время работать, потом посмотрим. Так, вот он закончил, отчитался. Так, давайте посмотрим, что у нас здесь получилось. Так, обновлю. О'кей. Смотрите, при наведении появляется такая лумпа. А, лупа, простите, да? И вот, пожалуйста, опоп. Вот такой вот йбоx. Круто. Ну, просто супер, я считаю. Это просто супер. Так, а теперь бы я хотел немножко как бы галерея Непришей, Непшей Кобылихвост называется. А я бы хотел, чтобы он здесь подписал галерея. Галерея, не знаю, галерея наших питомцев. Пускай будет так вот, да. и задал для этой секции другое фоновое, ну, другой фон. То есть вот здесь вот, например, фон, я хочу его изменить. Как это можно сделать? А, во-первых, смотрите, идём в Google или ну-ка давайте попробуем в Яндексе. И в Яндексе я напишу хекс. Давайте так попробуем. Хекпикеer. Ну, к сожалению, у Яндекса своего нету. Ну ладно. Вот какой-то он нам открыл. В общем, что это за хекпикер? Так, ладно. В общем, здесь получается, вы выбираете любой цвет, который вас интересует, да? Здесь все возможные цвета вообще доступные человеческому глазу. И а здесь, а, допустим, хочу я, ну, что-нибудь вот такое вот, да, например, хочу какой-нибудь такой вот голубоватый фон. Ну, кстати, удобно и потому что сразу видно, да, что к чему. Пусть он будет вот так вот посветлее, например, да, где-то здесь вот. Ну, что-то такое. Короче, что мне нужно? Мне нужно получить вот этот хекс-код. Всё, я его копирую, закрою всё это, все эти дела, вернусь в курсор и задам следующий промт. Вот такой вот промт я ему написал. И давайте отправим на выполнение. Так, вот он закончил. читался. И давайте посмотрим, что он нам наделал. Так, закрою тоже хекпикер. Оп. В общем, в принципе, да, всё, что мы хотели, он и сделал. И у нас эта штука тоже работает. Супер.
А следующее, что мы сделаем, а, я хочу, чтобы у нас на странице Ос вместо вот этого вот изображения здесь в секции герой было видео. Допустим, хочу я такую фишку у себя на сайте. А что для этого нужно сделать? Ну, во-первых, нужно видео, да? А, и, э, где можно взять видео, естественно, вы можете видео сами записать. Есть такой вот сайт.com, доступен только со специальными сервисами. В общем, здесь есть возможность скачать видео. Тоже по поиску пишите. И, ну, много разных всяких маленьких коротеньких и средненьких роликов есть. В общем, я уже, а, скачал небольшое видео. Давайте я его сейчас найду. Так, вот оно у нас. Допустим, хочу я вот такую вот собачку, да, разместить, >> а разместить туда в секцию Оasс. Что для этого нужно сделать? Смотрите, значит, я должен переместить видео в папку, с которой мы работаем. Затем здесь я что хочу сделать? Я здесь создам, просто добавлю, создам ещё одну папку, файл new folder и назову её видео, чтобы у меня всё было организовано. И сюда вставлю а этот файл закрою. Открою теперь курсор, а, и напишу следующее. На, а, так вот такой вот прот я
Напишу. И мне нужно, соответственно, найти здесь у нас папочку видео и скопировать copy relative path. И добавлю его вот так вот в виде доги.
Так, на странице у нас в секции герой вместо картинки установи видеофон. Возьми вот это видео. Также измени цвет текста в этой секции на белый. Отправляю задачу, закрываю нашу собачку.
Так вот он отчитался, что всё сделал. Давайте посмотрим, как это теперь у нас выглядит. Открываю сайт. Открываю. Супер, отлично. Смотрите, классно. Причём он убрал звук, да, и видео у нас автозапускается и достаточно быстро работает, да? Давайте посмотрим, ничего ли не изменилось на других страницах у нас. Нет, здесь всё нормально, больше ничего он у нас не поменял. В общем, круто, круто.
А, идём дальше. Так, а следующее, что мы с вами сделаем, а давайте вот эту вот "оставить заявку". Я хочу, чтобы здесь был у нас номер телефона. Так, кстати, что у нас по поводу мобильной адаптации? Давайте посмотрим. В общем, здесь всё у нас, смотрите, всё мобильно адаптировано, да, даже Lightbox тоже адаптирован. Ну, единственное, переключатель у нас здесь не срабатывает, да? Не появляется переключатель. А, нет, вообще-то есть. Вот он, не заметил. Так, супер. Всё мобильно адаптировано. Так, и здесь что у нас? Угу. Ну-ка, у нас и видео тоже проигрывается. Отлично. Давайте развернём. В общем, хочу я сюда вот в шапку добавить номер телефона. Вместо "оставить заявку" будет номер телефона. И при клике должен у нас происходить вызов на номер телефона, который я укажу, а потом займёмся остальными ссылками, потому что сейчас у нас эти ссылки никуда не ведут.
Так, возвращаюсь на главную, открываю курсор и пишу следующий промт. Давайте попробуем такой вот промт. Отправляю. Я написал, тут нужно изменить название кнопки в заголовке на мой номер телефона. Надеюсь, он догадается. Надо было написать, конечно, в верхнем меню или в хидере. Ну, посмотрим. Всё, он отчитался. А, на всех страницах изменил. Давайте посмотрим, как это выглядит. Обновляю. Да, номер телефона. При нажатии, а, соответственно, предлагает открыть FaceTime, да? А, не буду проверять сейчас, будет ли идти вызов, да? В общем, если что, можно. Ну, давайте попробуем. Да, пытается набрать номер. Click call to make this call. В принципе, даже если я нажму, он наберёт сейчас этот номер с моего компьютера. Отлично. Так, отменяю.
А теперь давайте попросим его сделать, чтобы ссылки, да, которые у нас есть, ну, здесь я не буду как бы сейчас наводить красоту. Здесь, конечно, вот этот фон, он немножко выбивается из общей гаммы. Можно много что поменять. Ну, я думаю, что вы поняли, как с этим со всем работать. В общем, я хочу сейчас сделать так, чтобы все кнопки вели куда-то, потому что сейчас они ведут, ну, как бы никуда. При клике у нас просто открывается главная страница.
Так, идём сюда. И задам я следующий промт. Вот такой промт я задаю и отправляю на выполнение. Так, вот он закончил. Давайте посмотрим, что он сделал. Главное "записаться" и "оставить заявку" ведут на контакт. "О сервисе good" ведёт на about. "Подробнее услуга" ведут на страницу услуг. А кнопки "подробнее" ведут на страницу конкретных услуг. Кнопка "вау" ведёт на pricing. В общем, э, всё, он расставил. Контакты. Ссылки соцсетей ведут на соответствующие сайты. Ну, я не помню, чтобы у нас там были кнопки соцсетей, а цены, кнопки всех тарифов ведут на контакт HTML. В общем, так как у нас нету там как бы соответствующих страниц, э-э, не все они подходят. Ну, он как-то, в общем, распределил, да, не будем к нему придираться. Давайте посмотрим, что у нас здесь. Давайте "записаться". Отлично. Переходим. Да, так, допустим, страница контакты. А он про эти социальные сети говорит, да? Видите, он просто проставил. Ну, если дать конкретный адрес для конкретной страницы, соответственно, э-э, в социальной сети, он их изменит. Так, давайте, допустим, "о нас" так, вернее, допустим, "записаться" сюда вот "о сервисе ГУDO" меня интересует, да? Смотрите, переход сюда вот отлично на нужную нам страницу. В общем, э, всё хорошо, у нас всё работает, как надо. Я думаю, что вам механика действий понятна. Называете, какая страница, называете какая секция и называете, что нужно сделать. Допустим, давайте я ещё хочу, чтобы у меня в футере я хочу дать конкретные указания, чтобы здесь был не вот этот вот текст, а, например, текст, который я сам хочу написать. И я попрошу его перевести, соответственно, в футере вот эти вот две страницы: Политика конфиденциальности и Условия использования. Так как у нас таких страниц нету, можно попросить, конечно же, их создать. Причём можно их создать, не добавляя в меню, например, да, чтобы они просто были и ссылки на них были бы, например, в футере, да, в принципе, я сейчас думаю, что мы это и попросим его сделать, создать страницы "политика конфиденциальности" и "правила использования", а и, ну как бы, эти ссылки, чтобы при клике переход был на эти страницы.
Так, давайте перейдём в курсор и напишу я вот такой вот промт. Я написал: "А, создай две новых страницы "политика конфиденциальности" и "правила использования" в футере. Переведи ссылки на эти страницы на русский и сделай ссылки активными. В верхнее меню эти страницы не добавляй. Копирайт замени на этот." Отправляю. Так вот он отчитался, что он у нас всё сделал. Созданы страницы в футере всех страниц. Ссылки изменены на активные. Давайте посмотрим, что он сделал. Обновляем. Да, смотрите, как минимум копирайт он поменял правильно. "Мы любим собак. 2025 год." В общем, заголовок. А здесь в какой момент? Он создал нам страницу "политика конфиденциальности", да? Он создал, ну, здесь какой-то контент написал, естественно, ничего не дописал, можно ему скормить этот контент, можно прямо в Word-файле, то есть, допустим, вам подготовил юрист вот эти страницы, вы их скармливаете, и он здесь это размещает всё грамотно, там, в общем, сам отформатирует, отредактирует. Ну, здесь единственный момент, здесь только одна ссылка. В принципе, он про это и говорит, да. Нужно сделать две отдельные ссылки в футере по использованию вместо одной комбинированной. Ну, можно просить его, да, сделай. Ну, сейчас мы на этом останавливаться не будем. В общем, вот таким вот незамысловатым образом, просто общаясь, да, и давая определённые команды, вы можете легко и просто и очень быстро создавать, ну, такие вот, э-э, простые информационные сайты, как минимум точно. Ну, я думаю, что при, если у вас появится больше опыта, вы сможете делать и более сложные вещи.
Так, давайте сейчас немножко поработаем со страницей Контакты. Я хочу изменить, скормлю ему сейчас новую информацию для того, чтобы он поменял у нас телефон, электронную почту, адрес. А попрошу убрать вообще полностью ссылки на социальные сети и попрошу вместо вот этой вот карты сделать другую карту. Так, давайте откроем курсор и я напишу. А вот такой вот промт я написал. Давайте попробуем. Отправляю на исполнение.
Так, снова у нас та же самая проблема, что мы достигли лимита использования. А, ну, к сожалению, видимо, от злоупотребления всё-таки они вот так вот перестраховываются. Да, конечно, можно купить за 20 баксов в месяц безграничное использование. А, но я, возможно, буду приобретать такую подписку, да, в вашем же случае делаем то же самое, что мы делали уже до этого. Удаляем аккаунт заново, а, в общем, заново регистрируемся и получаем, а, снова наш лимит. Давайте я сейчас это сделаю и вернусь.
Так, вот я снова удалил аккаунт и, э-э, заново зарегистрировался. При этом мне, кстати, пришла эсэмэска. Я просто свой российский номер написал, мне пришла эсэмэска, всё нормально, короче, подтвердилось. А теперь мне нужно добавить опять все мои, в общем, все мои страницы HTML вот так вот. Те, с которыми я работаю, да, и style CSS. Вот так вот. И сейчас снова напишу промт.
А, ребят, я забыл включить запись. В общем, что произошло? Я написал ему новый промт, отправил, он меня попросил, а, типа, авторизуйся. Я авторизовался под тем же самым, в общем, имейлом, который я уже использовал. Это получается в третий раз я уже использую, да, и у меня после этого он, э-э, начал выполнять. То есть вот он после того, как я написал ему такой промт: "на странице контакта изменю номер на тот, что в кнопке в хидере", в общем, и так далее. Он немножко мне тут по-английски пишет, да, надо попросить его писать по-русски. И вот он отчитался, что изменил телефон и так далее. Давайте посмотрим в деле.
Так, курсор закрою, обновляю. Ага. А, ну я забыл попросить убрать социальные кнопки. Социальные сети. Ну, в общем, всё он нам написал, по сути, да, видите, причём не просто написал, да, он при клике, например, у нас переходит, соответственно, к написанию письма. Здесь при клике на номер телефона будет вызов номера телефона. И, э-э, можно попросить его уменьшить здесь масштаб. Да, не знаю, правда, как задать ему масштаб. Ну, в общем, э-э, слишком близко он карту использует, да. А так-то он, в принципе, правильно всё сделал. Город Уфа. В общем, надо попросить, чтобы он сделал немножко другой масштаб. Вот так. Вот так. Единственный момент, у меня куда-то делся. А, нет, а, да, куда-то делся. Ну-ка, сейчас подождите. Главное, а, смотрите, "мы любим собак". У нас только на одной странице получается вот этот вот. Так, ну-ка. Здесь всё нормально. Услуги. В общем, не на всех страницах он поменял у нас футер. Ну, опять же, как мы уже знаем, да, немножко он бывает подтупливает, то есть нужно просто возвращаться и говорить ему: "Ты это не сделал, просто сделай". В общем, ребят, я думаю, что ход действий вам абсолютно понятен. Всё здесь предельно просто. С опытом, с наработкой, да, будет получаться всё лучше и лучше. В общем, я думаю, что того, что я записал, той демонстрации вам будет вполне достаточно, чтобы самим окунуться в создание вот в такую разработку сайта, да, с помощью искусственного интеллекта. Называется это vibee coding. Сейчас очень популярно становится. В общем, вот так вот такими небольшими изменениями за, ну, достаточно короткий промежуток времени, учитывая, что вам не нужно писать ни строчки кода, вы просто пишете, а, просто пишете промты, да, и отправляете, и вуаля, курсор всё делает. Плюс я знаю, что есть специальное расширение, когда можно промты в курсор писать, надиктовывать голосом. То есть такое расширение, которое позволяет вам говорить словами, а, соответственно, попадает всё в курсор уже в виде промта. Если вас заинтересует, погуглите, найдите. Я думаю, что это классная, полезная штука.
Так, что дальше? В общем, таким образом вы можете потихоньку, постепенно сделать все страницы вашего сайта. А единственное, что нам останется сделать - это, допустим, хотим мы здесь поменять логотип, ну, настоящий какой-то графический логотип и хотим, чтобы у нас была фавиконка, то есть во вкладке браузера, например, в Google Chrome. Вот мы сейчас здесь у нас, ну, просто заполнитель, да, а мы, допустим, хотим, чтобы здесь была какая-то иконка, связанная с нашей деятельностью. А давайте я вам сейчас покажу сайт, на котором вы можете нарисовать и логотип, и фавиконку. Сервис, который мы будем использовать, называется logomaker.com. Ссылку оставлю в описании. Нажимаем Start my design. Здесь выбираем AI logo generator. Дальше пишем название logame good doc. Next. Что делает наш бизнес? Мой бизнес - это выгул. Выгул собак, передержка и дрессировка. Next. Какую можно выбрать тему для изображения? Приключение, серьёзное, мистическое, playful. Ну, в общем, давайте вот playful, да, попробуем здесь. Он нас спрашивает, есть ли у вас уже какая-то иконка, ну, как, которую вы хотите, я скажу: "Нет, подскажи мне какие-нибудь иконки". И он тут же мне креативит. И смотрите, что он мне предлагает. Man walking dog on, короче, мужчина выгуливает собаку. Лабра. Вот это, кстати, интересно. То есть не сама собачка, да, а кликер для тренировки. Может быть, интересная идея. Woman training. A dog. Пудель performing tricks. В общем, давайте попробуем вот этот вот кликер. И здесь я бы использовал, ну, пускай будет вот semi-realistic. И выбрать нужно цветовую схему. Ну, пусть будет. Давай попросим его. Пусть он выберет сам. Let us choose. В общем, всё вот это дело заполняем и нажимаем сгенерировать логотип.
Так, здесь нам нужно написать наш электронный адрес. Нажимаю continue. И он пишет, что работает над нашим логотипом. А, в общем, не знаю, как это было связано с кликером, да, э-э, для дрессировки, потому что он нарисовал, в принципе, нас мальчика и собачку. Ну, допустим. О'кей, ладно, не буду я сейчас на этом останавливаться. В общем, можете этот логомейкер тоже использовать. Ну, как бы, посильнее задавать ему больше разных задач. В общем, в итоге можете добиться какого-то логотипа, который вам понравится. Я сейчас просто покажу вам, как вы можете логотип установить на наш сайт.
А, смотрите, нажимаем, значит, так. Вот, вот он наш логотипчик, условно, да? А что дальше? Что дальше? Нам нужно его сохранить. Нажимаю сохранить. Здесь у нас предлагают купить, в общем, этот дизайн. Я говорю, что нам нужно просто скачать файл и нажимаю Download free low resolution file. И вот он наш логотип. Сохраняю его на рабочий стол. Теперь давайте сделаем, а, мне нужна ещё фавиконка. Как можно сделать фавиконку? Например, я просто удалю сейчас вот это дело. Затем здесь у нас есть разные иконки. Попробуем написать просто dog, например. Ну и вот, допустим, такая вот иконочка, да? А затем обрезать. Вот так вот так обрезать. Yes. И вот такая вот иконка, допустим, у меня будет на фавиконке. Вот сейчас вы здесь видите наверху вот фавиконка логомейкера. У меня будет вот такая. Так, опять нажимаю. А вот это нажимаю download options. В общем, сохраняю download free resolution. Напишу Favicon desktop. Так, всё у меня сохранено. Закрываю logomaker. Сворачиваю. Сворачиваю курсор. Вот у меня иконка раз. Вот у меня логотип, например, два. Переименую логотип. Напишу PNG и Favicon PNG. И теперь, соответственно, открою папку с сайтом. И у нас есть здесь вот website images. Ну, в принципе, просто их помещу сюда. Так, вот так. Как-то они странно у меня. Ну, так вот надо сделать, да? Вот теперь теперь в правильной папке. Всё, сворачиваю. Теперь открываю курсор, а, и говорю ему: "Измени". Текст написал. Теперь нахожу здесь, соответственно, эти изображения. Вот она, фавиконка. Так, сначала скопируем copy relative path. Вставляем и фавиконка. Copy relative path. Вставляю всё. Отправляю на выполнение.
Всё, он отчитался в выполнении. Давайте посмотрим, как он справился. Так, обновляю. Да, он установил логотип. А, немного видно, что он, э-э, ну, как бы, пикселей маловато. Здесь его нужно уменьшить будет. Так, давайте посмотрим. Внизу он тоже его поменял. Супер. И фавиконка у нас тоже установлена. Обратите внимание. И всё это для всех страниц сделано. Вот так вот. Ну, само собой, логотипчик можно попросить уменьшить. Вообще, этот логотип не особо подходящий. Я его так использовал для демонстрации. Лучше использовать всё-таки в такого вида футере, хидере, простите, использовать вытянутый в длину логотип желательно. Вот так вот.
А сейчас, ребят, хочу провести один эксперимент. Хочу попросить курсор сделать мой сайт, как будто он в таком супер ретро стиле. Давайте попробуем, что из этого получится. А у меня есть небольшие сомнения по поводу того, как он справится, потому что для кириллического алфавита, да, ну, ретро не особо и есть, наверное. Ну, сейчас проверим. Напишу промт.
Вот такой вот промт я написал. И давайте отправим. Закрою эту фавиконку. Ну и давайте подождём, что он нам сделает. Вот он закончил, достаточно быстро сделал. Не знаю, пару минут, может, заняло. Ну, давайте посмотрим, что он нам, в общем-то, сделал. Так, открою главную страницу. Ага. Ну, в общем, ну, прикольно, да? Не скажу, что мне прямо всё нравится. Например, вот эти синие кнопки нечитаемые, да? Можно попросить всё-таки изменить его немножко палитру. Ну, в принципе, да, наверное, в девяностых интернет мог выглядеть примерно как-то так. Ну, со шрифтом, как я говорил, для кириллицы не так много шрифта доступного, да, более, ну, в ретростиле. Ну, в общем, прикольно. Ну, смотрите, то есть буквально за несколько минут он сделал для нас как бы работу, которая заняла бы, ну, как минимум часы, а может быть и дни, да, у профессионального программиста, чтобы всё это настроить. Прикольный такой вот он сделал тут фон, такую ретро-бумагу, да, в общем, ну вот оцените, да, мощь, которая доступна вам, причём абсолютно бесплатно.
Хорошо, я, в общем-то, не планировал оставлять сайт в таком виде. А вернусь в курсор и попрошу его. Смотрите, undo all нажимаю. И теперь должно у меня всё вернуться на Да, всё вернулось на свои места. А, и в общем-то, друзья, я закончил демонстрацию работы с курсором, и сейчас нам остаётся одно последнее, но от этого не менее важное действие, а именно сделать сайт общедоступным в интернете, потому что сейчас это просто папка на моём компьютере, с которой могу работать только я один. Давайте сделаем это.
А, я открыл панель управления хостингом Beget. А, помним, да, мы регистрировали домен здесь в самом начале видео. А какие наши дальнейшие действия? Смотрите, нам нужно найти вот эту папочку "сайты". Нажимаю. И нужно создать сайт с именем домена, который мы регистрировали. Я вот вставлю My New Super, нажимаю создать. А, в общем, я уже только что создал, да, за минуту до этого буквально. Вот у меня говорит, сайт с таким именем уже существует. Хорошо. Смотрите, здесь я пишу My New Super. Вот у меня он появился. То есть сайт есть, да, но он пока не прилинкован к директории. Вернее, этот сайт не прилинкован к домену. Нажимаем вот эти вот три точки здесь и нажимаю "прикрепить домен". Так. И здесь, соответственно, вот в этом выпадающем списке мне нужно найти домен, который я регистрировал. Ну, в вашем случае домен, который вы регистрировали. Всё, нажимаю My New Super, да, изменения вступят в силу в течение 10 минут и нажимаю "прикрепить". Хорошо.
Следующее. Теперь мне вот этот вот сайт, который я создал, эта папочка создалась на хостинге, да. Теперь мне нужно файлы, с которыми мы работали, которые сейчас на моём рабочем столе, их поместить, а, в эту папку на хостинге. А, смотрите, как это можно сделать. Можно нажать сюда вот. И здесь можно выбрать "перейти к файлам сайта". Нажимаю. У меня открывается файловый менеджер. У Beget свой собственный файловый менеджер. И вот, собственно, вот он мне открыл. А дальше я захожу в public_html. И здесь у нас есть какие-то уже файлы, так скажем, да? А давайте мы сейчас их удалим, потому что у меня есть тоже файл index, да, они могут конфликтовать. Короче, удаляете всё, что здесь создано. Затем идём в раздел "файл" и нажимаю "загрузить файлы". А затем я должен нажать здесь "browse". И здесь, смотрите, я перед тем, как заходить в контрольную панель хостинга, я заархивировал, вот у меня есть папка "website", я просто её заархивировал в архив website. Да. И давайте я попробую загрузить этот архив. Нажимаю. И вот он мне предлагает, соответственно, поставим галочку и нажимаю "загрузка". И сейчас файлы с моего рабочего стола переносятся на хостинг. Вот они перенеслись. Закрываю. Теперь задача разархивировать здесь этот архив. Нажимаю и нажимаю "распаковать архив". Так, всё верно. Нажимаю "о'кей". А, смотрите, у меня, получается, в папочке public_html, а при разархивировании, соответственно, у нас появилась ещё одна папка "website". И нам нужно сделать ещё одно действие, а именно переместить все файлы нашего сайта в корневой каталог, а, которым является вот public_html. Смотрите, что мы делаем. Я захожу, значит, открываю эту папку. Выделяю все файлы. И здесь, в правой части экрана, я открываю папку public_html. Так, ещё раз выделяю и нажимаю "переместить". То есть я как бы вытаскиваю из этой папки "website" просто в корневой каталог. Нажимаю "переместить 16 файлов". Да. Так, папка "website" у нас теперь пустая. И, соответственно, мы можем, соответственно, архив website.zip, да, и вот эту папку тоже удалить. А я не знаю, вот у меня ещё какая-то папка появляется MacOS. Ну я её оставлю. В вашем случае её может просто не быть. Удаляю, в общем, эти два файла. Файл и папку, точнее. И всё. Вот у меня корневой получается мой. Смотрите, вот у меня здесь все мои сайты, да, которые у меня вообще есть на Beget. Я нахожу сейчас My New Super, вот он. Захожу внутрь. Public_html. И здесь вот у меня, пожалуйста, файлы, которые у меня были на рабочем столе. И теперь давайте я в новой вкладке браузера открою сайт. Пишу адрес сайта, нажимаю Enter. И бам. Сайт доступен в сети интернет. Давайте посмотрим главную страницу, посмотрим внутренние. Да, видео даже подгружается, всё о'кей. В общем, всё работает. Всё то же самое, что мы видели при работе с сайтом, когда он ещё был на моём рабочем столе. Вот так вот, друзья. На этом видео окончено. Я надеюсь, у вас всё получилось. Если видео понравилось, пожалуйста, поставьте лайк. Буду также благодарен за любой оставленный комментарий. А на этом прощаюсь. С вами был Кальсн Алексей. И до встречи в новых обучающих видео. Пока. Yeah.