Итак, дамы и господа, начинаем наш

марафон по разработке совместно с

искусственным интеллектом. Впереди будет

много чего интересного, и мы сразу же

начинаем с первого действия. Нам

необходимо скачать программу курсоor.

Для этого переходим по адресу cursor.com

Download и нажимаем данную кнопку. В

моём случае это MacOS. Если у вас

Windows, то, скорее всего, здесь

автоматически поставится то, что нужно.

Скачиваем её. Это текстовый редактор для

кода, который сразу же работает

совместно с искусственным интеллектом, и

запускаете его у себя на компьютере. Вы

увидите примерно такую же картину. Она

будет очень похожая. И дальше в

настройках вам необходимо будет сразу же

перейти и где-то здесь залогиниться, то

есть создать свой аккаунт. Как видите, у

меня уже есть аккаунт, он даже платный,

но, мм, так как там есть триальная

версия, кажется, на неделю, то у вас

также всё будет прекрасно работать. То

есть это первые действие, которые нужно

будет сделать. И мы сразу же начинаем и

переходим к разработке. Для этого

необходимо нажать на кнопочку Open

Project. По сути, здесь мы просто

выбираем папку, где будет храниться наш

проект. Это ничем не отличается от

обычной папки, где хранятся файлы.

Поэтому давайте я назову а данный сайт

как

My Journal. Нажимаю создать и нажимаю

открыть.

И дальше мы попадаем примерно вот в

такое окно, где действительно мы можем

работать совместно и с кодом, и с

искусственным интеллектом. Значит,

здесь справа это окошко как раз-таки для

работы с ИИ. Мы можем её переключать вот

таким вот образом, да, по кнопочке, и мы

будем много взаимодействовать именно с

данным меню. Слева у нас будет храниться

весь исходный код, который будет

сгенерирован.

И давайте для начала мы сделаем совсем

базовую настройку, чтобы у вас работало

так же, как и у меня. В первую очередь

слева здесь вы наверняка видите такую

кнопочку, где есть куча квадратов.

Давайте на неё нажмём. И это называется

Marketplйс расширений. Нам необходимо

установить одно расширение для того,

чтобы было удобнее работать. Оно

называется, вы просто прописываете здесь

как opener.

Вот так вот пишите. И вот такое

расширение вам необходимо установить. То

есть вы сюда переходите

и ну давайте я на другом покажу. То есть

и нужно будет нажать кнопочку install,

да? То есть переходите сюда, нажимаете

install. Просто оно у меня уже

установлено, поэтому, э, у меня другие

кнопки, либо выключить, либо удалить.

Вам необходимо его установить и дальше

перейти обратно в эту вкладку. Это была

первая задача. Вторая задача. Нам

необходимо перейти в настройки курсора.

Мы это можем сделать по кнопке справа

вверху. Тут есть такая вот иконка, а,

COG называется, Open Settings. Переходим

в настройки. В принципе, вы уже здесь

были, да? То есть необходимо войти,

создать аккаунт. И дальше нам необходимо

перейти в поле R memories and commands.

Это, по сути, правило того, как

искусственный интеллект будет

взаимодействовать вместе с нами. И здесь

у вас, скорее всего, здесь будет

абсолютно пустое поле, да, то есть

ничего не будет написано. Добавьте

кнопочку add и пропишите вот такой вот

текст. always answer in Russian

language. А чтобы у вас появилось вот

такое поле одно. Остальные, в принципе,

пока не так важны. Дело в том, что по

умолчанию искусственный интеллект

работает на английском языке. И для

того, чтобы нам было проще понимать, что

он нам рассказывает, что выдаёт, будет

удобнее, если он будет работать на

русском. Поэтому здесь вот у вас должна

быть такая вот поле, а чтобы он

постоянно отвечал на русском. Ну, если

вы хотите это сделать. И, в принципе,

это то, с чем мы с вами и начнём

работать. Теперь перейдём к разработке.

У вас должен быть на этом этапе промт,

который позволит нам создать первый

сайт. Мы не будем сейчас создавать это

всё с нуля, как это делали в прошлом,

создавая htмэйли, там и так далее. Мы

будем всё это делать с помощью

искусственного интеллекта. И для этого

нам потребуется вот эта панель, да,

которая есть справа. Повторюсь, что она

переключается через данную кнопку,

называется Togle AI Pain. Здесь, что нам

важно понимать, здесь мы обращаемся

обычным человеческим языком, можем на

русском, можем на английском, к

искусственному интеллекту, который будет

оцифровывать, что мы хотим от него и

создавать для нас сайт. И давайте сюда

мы вставим первый промт, то есть запрос

в искусственный интеллект, а который

также вы видите м уже у себя. И давайте

его разберём. То есть, как итоговый

результат вообще всей нашей работы в

марафоне, мы будем создавать сайт,

который будет описывать, кто мы такие

как специалист, какие у нас есть навыки,

мы тоже будем их добавлять потом и будем

оценивать сами свой собственный уровень.

И мы начнём пока с первой секции.

Остальные секции будут в следующих днях.

Она называется hero section, то есть это

такая заглавная секция, где показана

общая информация.

А, смотрите, значит,

безусловно, я даю вот такой вот промт. И

прикол искусственного интеллекта в том,

что он каждый раз работает немножечко

иначе. То есть в любом случае результат,

который будет у меня сейчас, он будет

отличаться от того, что у вас.

Незначительно, но тем не менее. А я к

чему про это рассказываю? К тому, что

здесь я довольно-таки подробно описал,

что конкретно нам нужно сделать. Мы

сейчас это разберём. Но в случае, если

вы чувствуете, что у вас чуть больше

опыта, вы, конечно же, можете некоторые

вещи под себя изменить. То есть это

абсолютно о'кей. И мм

вы можете адаптировать те вещи, которые

сами хотите там поменять. Если вы хотите

до конца пойти как начинающий со мной,

то лучше оставить всё как есть. Итого,

что мы здесь пишем? Мы говорим, что мы

вначале хотим сгенерировать hero

section, ну, то есть секцию героя. И

есть требование, мы используем чистый

HTML CSS без каких-либо фреймворков, да?

Это языки разметки, которые HTML будет

создавать каркас, мы сейчас посмотрим на

него, а CSS будет создавать визуальную

стилистику, там где элементы

расположены, как они выглядят и так

далее.

Внутри блока должны быть имя

пользователя,

короткие био, это одно-два предложения,

и подзаголовок. У нас проект называется

Мой путь в IT+ AI. А будет одна кнопка

Мои навыки. И вот смотрите, что вы сразу

же можете здесь изменить, чтобы

попробовать поиграться с этим. Например,

по умолчанию у меня выбран вот такой

тёмный фон, да? Это вот хэш цвет. Он

обозначает первые две буквы в

шестнадцатиричной системе. А то есть это

система RGB red green blue. А первый код

отвечает за красный цвет, второй

отвечает за зелёный цвет и третий

отвечает за синий цвет. То есть вы

можете это поправить, если разбираетесь

с этим. Если нет, чуть позже посмотрим,

как это сделать. И в общем, вот эти вот

все стилистические моменты вы можете

поменять, да, либо пока оставить как

есть. А значит, добавить лёгкую анимацию

можете оставить, это будет интересно с

ней.

Код читаемый тоже оставляем. И важно,

чтобы структура проекта у нас была

строга вот по этим файлам для того,

чтобы вам было проще соотносить то, что

есть у вас и что есть у меня. Когда вы

сделали лёгкие коррективы или пока их

оставили, мы дальше выбираем здесь мод

агент обязательно. И здесь, скорее

всего, у вас также будет стоять кнопочка

авто. Эта кнопка сигнализирует нам о

том, какой искусственный интеллект,

какая LLM будет нам всё это

генерировать. После этого я нажимаю

запустить агента. И давайте посмотрим,

как это будет выглядеть.

Как видите, искусственный интеллект на

основе наших слов, которые мы просто ему

написали, начинает создавать

полноценный код.

В первую очередь он создаёт индекс HTML.

После он создаёт style CSS, да, вот эти

вот файлы, мы сейчас будем их смотреть,

и создаёт что-то в скрипте. Очень важно

при работе с искусственным интеллектом

сразу же читать, а что он нам пишет. И

вот, видите, он мне на русском отвечает,

да, то, что он сделал hero секцию для

нас, структуру проекта обозначил,

а минимальные особенности, да, то есть

здесь он оставил тот фон, который я

просил сделать. Небольшая анимация,

адаптивность,

переменные.

И он также ещё говорит, что можно

настроить, да, то есть, э,

выставить свои данные. Мы чуть позже в

домашнем задании с этим поработаем. И

смотрите, что нам нужно делать дальше.

Мы можем нажать на кнопочку Review, то

есть посмотреть, а что сделал

искусственный интеллект.

И в данном случае мы видим, что он взял

нам и сгенерировал код. Смотрите, здесь

всё зависит от вашего текущего уровня

понимания. То есть

может быть вы ни разу не работали с

кодом. Тогда я хочу сказать, что в

данном случае мы видим HTML - это

структура сайта, а, которая просто

обозначает, какие элементы в нём есть.

Это CSS - это язык разметки, который

обозначает, как эти элементы должны

выглядеть, да? И, ну, дальше тут просто

определённый код есть. Мы этому учим на

большом флагманском курсе профессия. И

есть, а, script JS. Это

уже первый язык программирования, с

которым мы сталкиваемся в данном случае.

И он добавляет некоторую логику. То есть

на текущем этапе мы можем сказать:

"Хорошо, нажать, допустим, keep all".

То есть мы принимаем то, что сделал

искусственный интеллект. Мы также можем

посмотреть на то, что он сгенерировал,

нажимая на данные кнопки. То есть видим,

что здесь у нас действительно есть а

первая секция.

Видите, в ней есть название ваше имя,

потом есть какой-то код с описанием, ну

и то, что мы требовали дальше. Для того,

чтобы это посмотреть, нажимаем правой

кнопкой в любое

пространство, когда открыт HTML именно,

и выбираем действие Open in Default

Browser.

И как видите, мы попадаем на сайт,

где вот если обновить страницу, у нас

сразу же уже есть анимация и есть

базовая информация с вашим именем,

с описанием мой путь в IT и мои навыки.

Да, если мы нажимаем, то ничего не

происходит, но есть такая вот базовая

анимация. И я вас поздравляю. Мы с

помощью обычных слов сгенерировали

первую секцию, которая, на мой взгляд,

выглядит очень даже круто.

Как домашнее задание будет исправить все

эти данные, да, мы чуть позже посмотрим,

как это реализовать. То есть по итогу

необходимо будет, чтобы здесь было ваше

имя, здесь было ваше описание и так

далее. Но на текущем этапе я хочу

показать, что мы можем сделать ещё и где

потребуется уже вот ваше творчество.

Переходим обратно в курсор. Значит,

здесь мы находимся в секции при работе с

искусственным интеллектом. И, допустим,

глядя на этот сайт, мне всё, в принципе,

нравится, даже цвета в данном случае, но

как будто бы не хватает какой-то вот

живости, да, интерактивности и

взаимодействия с нами вот на заднем

фоне. То есть хочется здесь какого-то

вот действия получить. Давайте мы

попробуем сформулировать эту мысль для

курсора, чтобы он нам это реализовал. В

данном случае нет какого-то прям а

такого строгого правила, как это

сделать. Поэтому давайте пофантазируем.

Я пишу. Мне кажется, что задний план

выглядит

статичным, и туда можно добавить

динамики. Давай добавим

лёгкую анимацию

действия

с пользователем,

например, с

курсором

мыши

и автономные

лёгкие

анимации.

В данном случае, как видите, я на ходу

придумываю

этот запрос и просто объясняю словами,

что мне необходимо сделать. Я запускаю

это всё в курсор, и смотрите, он

начинает изучать, что здесь можно

реализовать.

Как видите, он добавляет какие-то

элементы, да? И повторюсь, что когда вы

будете это делать, во-первых, вы можете

немного иначе написать данный запрос, а

во-вторых, э у вас по-другому будет

выглядеть код. И здесь нам теперь уже

важны навыки программирования, чтобы

понять,

а какой код нужно трогать, какой нет.

Значит, смотрите, мы можем посмотреть на

все изменения, да? Вот нажав на кнопочку

Review, мы видим, что действительно

добавились какие-то элементы в HTML.

Мы видим, что в CSэсе тут большое

количество стилей. В целом нам вот

сейчас прямо не так важно их понимать.

Нам нужно посмотреть на результат, да? И

здесь у нас какой-то скрипт есть.

Давайте нажмём keep all,

закроем Review.

Прочитаем то, что он добавил. Он добавил

интерактивное свечение, следующее за

курсором, автономные анимации,

технические детали. Ну о'кей. Перехожу в

обратно браузер, нажимаю обновить

страницу.

И смотрите,

что мы получили. Сейчас, на мой взгляд,

этот сайт выглядит намного более

интересно, чем он был в начале, да,

потому что, ну, как минимум есть вот это

вот интерактивное взаимодействие с

пользователем. Есть какие-то частицы,

что-то тут двигается, да, и мне так

больше нравится. Понятное дело, что

дальше здесь всё ограничивается вашей

фантазией. То есть, что вы сюда ему

наговорите и как он будет себя вести.

Вот вы можете с этим поиграться, но я

рекомендую это сделать чуть позже, когда

мы полностью закончим уже весь сайт. На

текущем этапе мы с вами закончим и

дальше я проговорю, значит, домашнее

задание и покажу примерно, как его

решить. Сейчас наш сайт, он состоит из

всего лишь одной секции, и нам

необходимо, чтобы здесь показывалось

ваши данные. То есть конкретно нужно

изменить имя.

и описание, да, потому что это же ваш

сайт, очевидно. Как это сделать? Опять

же, если у вас есть опыт в HTМле, то вы,

в принципе, понимаете, вы переходите вот

сюда в HTML, ну, и соотносите, да, где

находится вот это поле ваше имя. Это как

раз-таки и есть эти данные, которые

отображаются на сайте. Также находите

вот это описание, ну, и тоже его меняете

под себя. Вы можете поменять также

название

сайта, название кнопки, да, это по

желанию, но вам важно сейчас научиться

взаимодействовать также с кодом, не

только через искусственный интеллект, но

и вручную, потому что навыки

программирования, они очень важны для

того, чтобы ускорять себя с помощью

искусственного интеллекта и понимать,

что он в итоге создаёт.

Это первое задание. И второе задание.

Если вы брали полностью промт под, ну,

который я изначально вставлял, вы можете

также заменить основной цвет. Как это

сделать, вы можете подумать, но это уже

будет относиться к CSУ.

Желаю успехов, и когда вы сдадите

домашнее задание, вы также получите и

видеорешение, как это делать. И давайте

посмотрим, как можно было решить

домашнее задание. Смотрите, начнём с

самого простого. Мы переходим в indeкс

html. И нам необходимо изменить данные.

Вот мы находим ваше имя, да, которое

есть на сайте. Собственно говоря,

давайте его поменяем. Я просто здесь

удаляю и здесь напишу своё имя. Владелен

Minн. Нажимаю сохранить. Да, потому что

вот когда видите такая точечка есть

здесь, это значит, что не сохранено. Я

нажимаю сохранить и всё. А изменения

остаются. Перехожу обратно в браузер,

обновляю страницу и вуаля. Здесь уже

есть моё имя, мне это нравится. А дальше

нам нужно изменить

описание.

Переходим обратно в курсор. Ну и здесь

давайте я впишу название, а точнее

описание того, кто я такой.

Преподаю. Отлично. Преподаю

JavaScript. А пусть будет React уже

больше 7 лет. Это правда, начиная с

шестнадцатого года преподаю уже все эти

вещи.

Подождите, так это же больше уже. Ладно,

потом посчитаю.

А в IT с

2012 года, как видите, кстати, да, я

начинаю что-то писать иногда, и

курсор мне подсказывает, а что это может

быть? Вот я могу нажать Tab и,

собственно говоря, он заполняет. Я

всё же напишу здесь свой собственный

текст как frontend developer.

Обновлю страницу.

Супер. Видите, у меня появилось здесь

название. Более того, я могу здесь

написать

ещё одну регалию. Основал

University.

Да, это университет по

фронтндразработке,

собственно говоря, в рамках которого мы

сейчас и проходим с вами данный марафон.

Ну и так далее, и так далее. То есть, а,

как минимум, видите, первая задача у нас

была реализована.

А если мы хотим поменять название сайта,

то мы можем это сделать в данной секции.

Видите, я обновляю, и тут есть

восклицательный знак. И, допустим, мои

навыки

и

уровень я напишу в данной кнопке.

Вот, видите, тоже текст появилсь. Мне на

текущий момент всё это нравится. И

теперь задание со звёздочкой, которое

было относящееся к цветам. То есть вот

этот голубой цвет в целом он мне

нравится, но а если я хочу его изменить,

то для этого, видите, вот HTML, он

отвечает именно за структуру.

А если мы говорим про стилистику, то мы

открываем файл styles css. И на самом

деле, если мы здесь увидим, у нас есть

вот такое вот свойство. Это называется

переменные. CSS переменные. То есть мы

один раз объявляем какое-то значение и

дальше потом его используем. Вот. И,

например, видите, у меня вот этот акцент

есть. Я, допустим, сделаю его там

красным. Честно, я, наверное, думаю, что

так не надо делать, потому что у нас,

скорее всего, сейчас дизайн немножечко

удивится нашим изменениям, но всё же я

попробую. Видите, изменил на другое

значение. Обновляю страницу.

Ну и что я могу сказать? Во всяком

случае, он изменился. Это я показал

пример, как это можно было сделать.

Давайте я нажму comm Z. Command Z, чтобы

вернуть всё на место. И попробуем это

сделать с помощью, а, искусственного

интеллекта.

Давайте прямо здесь я и напишу,

например, меняй

основной

цвет приложения на более красный,

например.

Смотрите, он начинает изучать, э,

то, что у нас уже есть в стилистиках,

да, и меняет все места, где присутствует

красный цвет. То есть это должно быть

сделано лучше сейчас, чем я вот до этого

вручную сделал. Я вам показал, да, как

вот можно понимая код, редактировать

места. Давайте нажимаем keep all

и обновлю страницу.

И смотрите, в данном случае, в данном

случае у меня уже появилсь весь сайт,

да, в таком более красном цвете, и это

мне больше нравится. Вот я надеюсь, что

у вас будет как бы своя стилистика

здесь. Поздравляю, у вас теперь есть

первая страничка. И я надеюсь, что у вас

получилось всё и с домашним заданием, и

с реализацией там первого дня. Напомню,

что на текущий момент моё приложение

выглядит следующим образом. То есть я

поменял основной цвет. У меня есть

какая-то анимация, но больше ничего нет.

И сейчас мы с вами продолжим

разрабатывать данный сайт. То есть в

данном сайте у нас будет три секции.

Сегодня секция будет чуть посложнее, и в

третий день она будет ещё сложнее,

интереснее.

А надеюсь, мы в итоге сделаем прямо

такой продакшн интересный сайт. Сегодня

мы будем говорить про то, как

реализовать секцию

моих навыков, которые у меня есть. То

есть вы, предположим, начинающий

разработчик, который хочет освоить

профессию программиста совместно с

искусственным интеллектом. И мм нам

нужно на этом сайте как-то это всё

обозначить. Поэтому вот давайте

придумаем, как это можно сделать.

Переходим в курсор. И опять же нам

потребуется здесь

секция с искусственным интеллектом.

Здесь я хочу рассказать про некоторые

правила. Вот у меня, например, с

домашнего задания остался открыт чат.

Да, и мы здесь несколько раз обращались

к искусственному интеллекту. Так вот,

сейчас мы будем заниматься совершенно

новой задачей. И

здесь лучше нам создать новый чат. Это

называется новый контекст, а этот

закрыть. Всё дело в том, что при работе

с искусственным интеллектом у него есть

ограниченное количество символов,

которые он может воспринимать. Ну вот,

например,

беря даже файл там HTML. Здесь мы можем

посмотреть, сколько, в принципе, у нас

есть разных символов. То есть кавычка -

это символ, а треугольная скобочка - это

символ, комментарий - это символ. Потом

мы посмотрим на CSS. Тут тоже, видите,

довольно-таки большое количество

символов. А по факту это всё просто

обычный текст. Просто он здесь

подсвечивается. Так. И,

соответственно, чтобы искусственный

интеллект делал меньше ошибок, лучше он

вообще бы их не делал, мы создаём как

раз-таки новый контекст, новый чат для

новой задачи. Это правило, которое

позволит вам

создавать, ну, меньше ошибок. И опять

же, вы найдёте промт, то есть запрос,

которым мы сегодня будем с вами

работать.

Он выглядит следующим образом.

Мы будем сейчас генерировать

интерактивный блок Мои навыки. И у него

есть определённые требования в первую

очередь, то есть у него должна быть

HTML-структура, должен быть заголовок

Мои навыки,

контейнер для карточек навыков и кнопка

Добавить новый навык. То есть мы будем

добавлять, уметь иметь возможность

добавлять новый навык. Каждая карточка

содержит в себе название этого навыка и

короткое описание. Ну, при клике

карточка должна разворачиваться или

сворачиваться. Также должна быть логика

для того, чтобы добавлять новую навык

через промт и сохранять его у нас в

браузере, чтобы после перезагрузки

страницы у нас всё это сохранялось.

Ну и есть базовые стили. То есть вот

примерно так выглядит промт. В данном

случае мы можем, безусловно, расширять

этот промт, но я вам крайне рекомендую

сейчас, чтобы мы шли именно с заранее

заготовленным, потому что чуть позже мы

опять же его доработаем. Нажимаю

отправить. И давайте посмотрим, как

с этим у нас справится искусственный

интеллект. Смотрите, здесь у нас есть

маленькая нюанс, да, я поставил на паузу

сейчас и нажму und do all. Это очень

важно. Э, смотрите, что я имею в виду.

Давайте перейдём в настройки.

И тут у нас есть такое поле, как

indexing and docs. Дело в том, что так

как у нас уже есть в проекте некоторые

файлы, то лучше, чтобы искусственный

интеллект про них знал. Поэтому здесь мы

нажимаем кнопку Compute index для того,

чтобы он проиндексировал всё, что у нас

уже есть. Соответственно, теперь ему

будет намного проще понимать, какие

изменения вносить в этот проект, чтобы

он делал меньше ошибок.

Поэтому давайте ещё раз мы всё это

сделаем с нуля. Ничего, это как раз-таки

и есть практика. Это очень здорово. Мы

заносим опять сюда этот промт. И теперь

я опять нажимаю, а, пусть искусственный

интеллект работает.

Действие, которое мы с вами сейчас

сделали, оно на самом деле нужно для

того, чтобы минимизировать шанс ошибок.

Потому что я ещё раз повторюсь, что

искусственный интеллект, он работает

не постоянно одинаково, да, у него есть

разные параметры, в частности,

температура, которая добавляет ему

определённый уровень случайности. И нет

никакой гарантии того, что то, что делаю

я сейчас, будет то же самое, что и у

вас. Тем не менее, давайте почитаем то,

что он нам выдал. Изначально он изучил

структуру проекта. Дальше он добавил

блок Мои навыки, да? Вот мы можем

посмотреть на них, можем посмотреть вот

здесь. Как видите, они довольно-таки

маленькие.

Дальше он добавил 111 строчек в Script

JZ. То есть, смотрите, ещё большая

разница какая. Если HTML - это структура

просто какие элементы есть, CSS - это

стили, то есть язык разметки,

показывающий

и объясняющий, как браузеру красиво

отображать эти элементы, то срипt jz -

это логика и это самый настоящий язык

программирования. То есть он это

добавил.

Аэ, возможно, вы сейчас не понимаете,

что здесь написано. И, конечно, да, это

отчасти лотерея, потому что здесь может

быть что угодно. Для того, чтобы вот

прямо корректно работать с такими

штуками, нужно понимать прямо базу, как

работает там JavaScript, HTML, CSS. Это

всё ещё нужно в текущий век. И тогда как

раз-таки искусственный интеллект и

становится ускорителем

вашей карьеры. То есть тогда он

начинает, а, быстрее писать код, а вы

просто принимаете решение. Но чтобы

корректное решение принимать, нужно

понимать, что он выдаёт. Опять же,

сейчас мы попробуем это сделать без

этого и почитаем итог. У нас есть

новый блок, добавлена новая логика,

добавлены стили

и, а, особенности реализации. Давайте

нажмём keep all. И в первую очередь

я просто обновлю страницу.

И вуаля. У нас есть вот такая вот

картина. То есть у нас появляется блок

Мои навыки. И тут

есть

а какие-то, значит, текста, которые не

отображаются.

На самом деле я знаю, откуда они

берутся. И смотрите, я пока сделаю

следующим образом. Покажу вам немножечко

магии из работы фронтенд разработчика.

Мы нажимаем правой кнопкой и свойство

посмотреть код. Либо таким образом

попадаем вот в такое меню, либо

переходим в три точки. Здесь

дополнительные инструменты и инструменты

разработчика, да? То есть по-разному

можно реализовать. Это называется DEOLS.

И, а, это такое пространство, которое

позволяет

взаимодействовать и изучать исходный код

сайта. В первую очередь здесь нам нужно

перейти в local storage и удалить все

вот эти элементы. У вас их, скорее

всего, не будет. Просто дело в том, что

я готовился к данному марафону и а

поэтому остались данные с прошлой

генерации. Вот. И сейчас у меня блок

навыков выглядит совершенно пустым.

Давайте я нажму добавить навык и назову

его, например, HTML.

Введу описание этого навыка. Допустим,

это язык разметки

для сайтов. Нажму окей. И вуаля.

Смотрите, я получаю здесь первый блок

HTML, да? То есть мы с вами починили

сейчас функционал. Что интересно, если я

нажимаю, у меня с такой вот небольшой

анимацией открывается данное поле. И это

первый навык, который мне необходимо

выучить

для того, чтобы стать разработчиком. При

этом, если я обновлю страницу,

во-первых, смотрите, здорово, у меня при

нажатии на кнопочку открывается данный

блок,

и у меня есть HTML.

Супер.

Давайте запомним другие навыки. То есть

мы можем это делать вручную, как я

сейчас показываю, либо а мы можем это

делать через искусственный интеллект. Ну

давайте я вручную добавлю, потом

попробуем сделать через иишку. Следующий

навык - это у нас будет CSS. Это язык

разметки, собственно говоря, язык

разметки

для

определения

стилей на сайте.

О'кей. Раз мы его тоже зафиксировали,

видите, он у нас появляется.

Супер. Давайте добавим ещё один навык.

Пусть это будет навык

Java Script.

И здесь я напишу самый важный язык

программирования

для разработки сайтов. О'кей. Вот оно у

меня получается. Мне даже интересно, что

будет происходить, если я добавлю

четвёртый навык, потому что, видите, у

меня закончилось пространство, и мне

хочется понять,

влезет ли оно. Давайте мы здесь напишем

lm или нейро

нейросети.

А введите описание навыка. Это у нас

будет

умение

ботать

с и в синергии.

Супер. Как видите, у меня всё это

отображается.

И при перезагрузке страницы,

да, то есть у меня также остаётся,

а все вот эти вот данные. Вы в данном

случае можете самостоятельно набить

набор навыков, которые вы либо уже

обладаете, либо хотите изучить, и тем

самым отобразить их в м данном блоке.

Ну давайте теперь продолжим и, допустим,

разберём следующую задачу. Я нажимаю,

скажем, добавить новый навык. И я,

например, случайно написал что-то

непонятное. И, как видите, на текущем

этапе у меня осталась вот эта вот

некрасивая карточка с непонятными

названиями. А что самое неприятное, я не

могу её удалить отсюда. Ну, то есть

технически я понимаю, как это сделать,

да, и мы можем это попробовать

реализовать. Нажать правую кнопку, да,

там открыть вот эти вот def tools. Мы

можем их переместить вниз.

Вот это закрыть. Нам тут интересует

поле.

Мы можем, смотрите, нажать на эту

кнопку, навести её на данный элемент.

Вот. И смотрите, маленький лайфхак.

Нажать удалить. То есть мы можем так

сделать. Есть проблемы. При перезагрузке

страницы он вернётся, да? То есть мы как

бы визуально его просто удалили.

Если покопаться глубже, давайте я сделаю

здесь шрифт больше, чтобы вам было

видно.

Мы можем перейти вот здесь вот в поле

консоль source, но на самом деле нас

интересует поле.

И здесь нам нужно найти поле storage и

название local storage. Далее здесь

будет вот одно поле, да? Открываете его.

И если его вот так вот посмотреть,

то здесь у нас есть поле Skills, да? Это

пока я объясняю, как это работает в

коде. И тут мы видим, что вот у нас

присутствует HTML, CSS,

JavaScript.

И вот присутствует, видите, вот эта вот

штука, где name равняется вот этой

ерунде, которую я написал, и description

равняется непонятно чему. Мы в теории

можем попробовать

удалить этот элемент, но, к сожалению,

здесь уже без навыков программирования

не получится. Опять же, я просто

показал, как это хранится на самом деле,

да, и почему оно здесь остаётся. То есть

мы используем такую вот внутреннюю базу

данных. Но было бы здорово, если бы у

нас была возможность эти элементы

удалять вручную. Поэтому давайте

перейдём к курсору. И здесь я ему скажу

следующим образом.

Давай теперь добавим возможность

удалять

навык

по кнопке.

Только

прежде, чем удалить

навык, с помощью

confirm спроси.

А обвайте

забьём такой промт. Как видите, я тоже

вот как бы на ходу его придумываю, но

тут смысл в том, что мы хотим, чтобы у

нас была возможность удалять этот

элемент. Но есть такая функция в

JavaScript, которая позволяет, прежде

чем удалить и сделать какое-либо

действие, спросить нас: "А уверены ли

мы?" И смотрите, у нас начинает

дальше работать искусственный интеллект.

Он добавляет

а новую кнопку. То есть, если мы

почитаем внимательно, а, код, то видим,

что тут создаётся delete btn, да, эта

кнопочка. Мм,

и в случае, если мы на неё нажимаем, да,

я пока так вот просто интерпретирую то,

что есть в коде, то тогда мы будем

вызывать функцию там delete skill. И вот

у нас есть функция, которая будет

удалять этот элемент.

Смотрите, в стилях мы, значит,

добавили стилизацию для кнопочки

удаления. Давайте нажмём keep all. Эта

логика довольно простая, и должно всё

быть хорошо. Обновляю страницу и вуаля.

У нас появляется кнопочка удаления.

Как видите, мы можем также отдельно на

неё нажимать.

Ну и давайте удалим, допустим, данный

навык.

У нас появляется вот это вот окно

подтверждения. Я нажму отмена. А если я

нажму окей, он удаляется. Обновляю

страницу.

Супер. Как видите, всё это работает. То

есть вот таким вот образом можно дальше

наполнять

а наш сайт новыми элементами. И значит

теперь а ещё в качестве практики давайте

сделаем ещё один функционал.

Теперь я хочу, чтобы как пользователь я

мог отмечать,

а навык как

изученный.

Сделай для этого небольшую кнопку.

Как? А давайте так по размеру,

как кнопка удаления.

элемента и визуально

отображай, что навык успешно выучен.

Давайте отправим такой запрос,

посмотрим, как он у нас отработает в

нашем приложении.

Как видите, он добавляет новые изменения

уже в scriptрит

и в CSS.

Да, новый код добавил.

Смотрите, на данном этапе я хочу

повториться, что здесь мы с вами

практикуемся, как вот с помощью нового

подхода мы можем создавать прямо целые

интерактивные сайты и приложения, да, и

безусловно, вы можете попробовать

внедрить свою логику, потому что в

данном случае моя задача объяснить, как

эти вещи работают. И

если вы опять же совсем начинающий,

лучше вам делать, а вот примерно то же

самое, что показываю я. Но если у вас

уже есть чуть больше опыта, то тогда

можете придумывать свою логику. Но

лучше, когда мы допилим этот сайт, вы её

просто

мм потом уже будете доделывать

самостоятельно. Смотрите, как итог, мы

получили кнопочку, давайте нажмём

на CSS, например, и на HTML. И видите, у

нас очень классно оно отобразилось. Есть

маленький нюанс в том плане, что навык,

хоть он и сохраняется после перезагрузки

страницы, вот эта кнопка, она мм

выглядит не очень красиво, то есть она

захватывает непосредственно сам текст.

Мне это не нравится, поэтому я хочу

попросить курсор, чтобы

он сейчас взял и поменял расположение

этой кнопки. Что я могу ему написать?

Отличный результат.

Но сейчас кнопка

заходит на название

навыка.

Пере

сгруппируй

её с

кнопкой

удаления

в правом

углу, да? То есть мы можем прямо

говорить, куда необходимо переместить те

или иные элементы. Это было лёгкое

изменение. Нажимаю пол. Обновляем

страницу и вуаля. Теперь мне результат

данный нравится. То есть мы теперь можем

отображать, какие навыки у нас уже

изучены, какие нет. Мы можем добавлять

новые навыки, там, допустим, React и

View.

Это у нас будет JS frame workки. Ну и

так далее. То есть я считаю, что этот

блок у нас завершён успешно, и мы можем

переходить к домашнему заданию. А в

данном случае домашнее задание будет

очень интересно. Что я имею в виду? В

домашке вы найдёте такую страницу, где

будут описаны основные стилистики, UI

дизайны. Это основные

стилистические элементы и темы, которые

используются в мобильных приложениях, на

сайтах, в операционных системах

разными компаниями. Например, вот раньше

очень пользовался спросом flatдизаign э

у компании Google, например. Потом он

перешёл там на material design. Это то,

что вы видели всегда в

Google сервисах. Например, Glass

Morphism или Liquid Glass - это то, что

стало популярным благодаря Apple, а и

Windows 11, как пишется здесь, и так

далее, и так далее. То есть тут

присутствуют э вот различные эти

стилистики. И что я хочу сделать в

качестве домашнего задания? Я хочу,

чтобы вы выбрали одну из этих стилистик

и попробовали интегрировать его на наш

сайт. Да, он уже у нас обладает

определённой стилистикой,

но мы можем сделать это ещё более круто.

И поэтому попробуйте сделать это

самостоятельно. Ну а дальше мы это

сделаем уже совместно в Давайте

разберёмся, как мы можем внедрить уже

готовую тему. А, смотрите, для примера я

хочу выбрать

следующую тему, которая называется

Liquid Glass, по той причине, что она

довольно-таки современная. Она сейчас

используется во многих Apple

операционных системах. И почему бы нам

её не внедрить? Поэтому я её копирую.

Далее я перехожу в курсор, в поле

Editor. Здесь я открываю II панель.

Обязательно я открываю новый чатик

здесь,

потому что сейчас будет довольно-таки

комплексное изменение. И давайте

попробуем вместе написать промт.

Я хочу, чтоб ты адаптировал

а

данный сайт под тему, и я её возьму в

кавычке, которую называю liquid glass.

Это делать не обязательно, но нейронкам

так будет проще понимать, что мы от него

хотим.

Адаптируй

основные элементы,

такие как кнопки,

карточки

и задний фон, например. И

давайте попробуем прямо так запустить,

то есть что у нас получится в итоге.

По сути, я говорю, чтобы уже на готовую

стилистику

курсор и искусственный интеллект взял и

добавил мне существующую довольно-таки

непростую на самом деле UI-тему. Но

тем не менее посмотрим, как у него это

получится. И пока он разрабатывает, мы

можем наблюдать, что он меняет огромное

количество различных CSS блоков и так

далее. Вот в целом

мы сейчас можем до конца даже и не

понимать, что он здесь делает, зачем,

почему, как конкретные свойства там

будут влиять и так далее. Но если вы

хотите построить прямо такую серьёзную

карьеру от разработчика совместно с

искусственным интеллектом, то нам

необходимо понимать, что же он в итоге

пишет, хотя бы вот на высоком уровне,

чтобы мы могли разобраться, потому что

искусственный интеллект, он

действительно много пишет

кода. И сейчас ценность разработчика

заключается в том, чтобы мы могли

правильно контролировать, что он делает,

и делегировать эти задачи. Но без

внутреннего понимания, что это

происходит, на сложных проектах, к

сожалению, будет практически невозможно.

Поэтому до сих пор ещё вот процесс

обучения, он заключается в том, чтобы

понимать каждый из этих элементов и

правильно интегрировать это с действиями

искусственного интеллекта.

Давайте посмотрим, что он нам тут

сделал. Значит, анимация градиентного

жидкого движения, кнопки сетя, карточки

навыков,

адаптивность. Что ж, давайте посмотрим,

как это всё выглядит. Обновляю страницу.

И

что я могу сказать?

Очевидно, что-то поменялось, да? То есть

какие-то вот эти плавающие элементы

добавились.

И на самом деле вот хочется сказать,

блин, представьте, мы просто забили

запрос в искусственный интеллект, а,

получили достаточно крутой уровень

приложения.

И мне нравится то, что он в итоге

сделал. Кстати, интересно, почему эта

кнопка попадала. Вот. А есть вероятность

того, что, мм, у вас что-то может пойти

не так, да, например, какие-то элементы

будут не видны и так далее. У этого есть

два варианта режения. Вот первый вариант

решения. Ну давайте рассмотрим какую-то

такую ситуацию. Например, там заголовка

не видно, да? Мы можем прямо написать

ему: "Дорогой друг, я почему-то не вижу

поля, например, там мои навыки или

другое поле. Поправь его отображение и

объясняем, как это сделать".

Либо другой вариант есть, когда совсем

всё плохо. Мы можем нажать на кнопочку

вот эту вот. Нажать на кнопку. А здесь

он говорит нам отменить все изменения до

этого чекпоинта. Ну, если нажимаем

continue, тогда он изменяет. Если нет,

то нет. Я в данном случае оставлю данную

стилистику. Мне всё более-менее

нравится, что здесь есть. А,

ну и вот примерно так это можно было

реализовать. То есть

в данном случае я прикреплю весь свой

исходный код данного проекта на всякий

случай, чтобы у вас

была возможность скопировать, если

сломалась, но попробуйте это довести с

помощью также яишки, чтобы была

интегрирована тема. И сейчас мы будем

разрабатывать самую сложную и самую

интересную секцию. Я надеюсь, что вы со

мной. Я надеюсь, что у вас получилось

сделать

свой дизайн, свой UI kit и ставить свои

данные. Вот у меня это сейчас выглядит

всё таким вот образом, и мне это

достаточно нравится. Но давайте перейдём

к курсору. Значит, мы уже знаем, что для

новой задачи мы открываем панель, делаем

новый чатик, и вы получите сейчас промт.

Он у вас уже есть, давайте мы его

вставим для текущего дня. Хочу добавить

динамики на этот сайт. И поэтому мы

будем генерировать новую секцию, которая

называется Мой индекс навыков.

А требования будут следующие. То есть с

точки зрения HTML будет заголовок мой

индекс навыков. У нас будет пять

HTML-элементов, которые называется input

range. Я чуть позже покажу, как это

выглядит, но смысл в том, что мы сможем

выбирать прогресс и динамику.

А под каждым будет значение процентов. И

дальше у нас будет определённая логика,

которая будет в зависимости от нашего

текущего уровня навыков показывать, ну,

на каком уровне мы находимся. То есть

вот я придумал такую логику, поэтому а

пока рекомендую пойти с ней. Дальше мы

её подправим.

Так, визуал, минималистичный дизайн. А

давайте, кстати, здесь мы немножечко

подправим промт.

Здесь у нас должен быть не

минималистичный дизайн, а

даже вообще этот блок мы можем удалить,

да? То есть, видите, почему очень важно

читать запросы.

Дизайн

должен быть как у всего приложения,

да? То есть он должен оставлять тот

дизайн. Вот. И всё должно быть сделано

на чистом HTMLCSS без фреймворков. Что

ж, погнали. Давайте посмотрим, что у нас

в итоге получится. Для реализации данной

задачи, конечно же,

здесь потребуется изменение и HTМ, и CS

для того, чтобы он всё это стилизовал, и

Джаваскрипта. То есть достаточно

комплексная задача, которая позволяет

реализовать нам там целый калькулятор

наших навыков. И вот я в домашке говорил

про то, что с одной стороны вам может

показаться, что, блин, неронка, пишет

код, курсор пишет код, всё здорово и

замечательно, но вот представьте, что

данный код - это не просто тестовый

проект, а это сайт, отвечающий за

поддержку миллионов пользователей.

Сможете ли вы доверить, не зная, что это

за элементы, искусственному интеллекту?

Нет. Вы как программист и программист

новой эры эпохи, вы должны чётко

понимать, а что конкретно делает

искусственный интеллект в данном случае

для того, чтобы контролировать его. И

тогда получается, что вы, понимая, что

вам нужно сделать, говорите, что вам

нужно сделать, он пишет код, вы это

контролируете, то есть код не пишите

уже, и применяете. Тогда получается

ускорение, тогда получается синергия.

Вот чем является программист будущего. У

него должен быть vision, должен быть

опыт. который позволяет ему как раз это

реализовать. Собственно, мы такой подход

реализовали в большой нашей программе,

которая, а, позволяет получить

профессию, причём очень быстро это

сделать,

как раз интегрируя ИI подход прямо вот в

классическое образование, за счёт чего и

уменьшается время обучения. Давайте

посмотрим на наши изменения. Немного

лирику я рассказал, но это важно

понимать, потому что если вы серьёзно

планируете свою карьеру, то вы должны

понимать, в каком этапе мы находимся и

как это работает, да? Так как без опыта

может показаться, что х, блин, буду всё

писать через нейронку. Есть нюансы.

Смотрите, давайте мы уже с вами

чуть-чуть более опытные. Посмотрим,

значит, что у нас тут есть. Во-первых,

появилась новая секция в HTМле, да, где

есть индекс навыков.

Он тут интегрировал, значит, какие-то

стили, точнее какие-то элементы, но мы

видим, что у нас тут есть CSS,

JavaScript, React View, LLM неросети,

как мы его и просили, да, вот здесь вот

в запросе, помните,

вот они вот эти вот навыки, которые мне

хотелось подчеркнуть для фронтенд

разработчика, мы здесь их и обозначили.

Дальше в джаваскрипте появился

появилась такая функция, которая

позволяет

работать с изменениями этих индексов.

Пока не будем их смотреть. Ну и,

собственно говоря, стили их тут

довольно-таки много. Что ж, пока вот

верхне уровнево, да, если мне даваться

подробности, выглядит всё ок.

Давайте посмотрим, как это работает.

Открываю

мои навыки и уровень. Опускаю чуть ниже.

Ага. И вот мы что получили.

Какая-то анимация есть этого ликвид

глаза и так далее. То есть вот эти

элементы, которые мы только что видели в

HTML, на самом деле мы можем их

посмотреть

через

def, да? Мы можем перенести деф-тузы

сюда и с помощью этой кнопки посмотреть,

что это за элемент. Вот мы видим, что

это у нас э такой элемент, как div. Мы

можем его раскрыть. Если мы раскроем

чуть ниже, видим, что вот этот элемент,

который у нас будет ползать сейчас, он

называется input. Это как раз

интерактивные элементы внутри HTML,

позволяющие мм взаимодействовать с

пользователем.

Так, ну и что ж, давайте попробуем.

Значит, я покручу

э HTML. Допустим, я его знаю на 45%.

Видите, меняется у нас общая часть.

О'кей. CSS, допустим, я знаю на 39%.

JavaScript внезапно я, допустим, знаю на

52%.

React View пусть будет 18% и LLM

неросети на 71%.

И мы в итоге видим,

как у нас меняется

общий прогресс. Понятное дело, что если

я его там на полностью попробую

вывернуть,

то

у нас меняется результат.

И, честно говоря, на мой взгляд, мне

кажется, что это очень даже круто, а

потому что у нас теперь есть

интерактивный калькулятор по факту,

который сигнализирует нам про уровень

наших навыков. Давайте проверим теперь

сохранность этих данных. То есть я

обновляю страницу,

и,

как видите, все данные у нас здесь

сохраняются

и меняется прогресс.

Что ж, на текущем этапе это выглядит

очень хорошо.

Он говорит мне: "Сильная база, готов к

портфолио". Супер. Но что вот мы можем

сделать сейчас как

программисты, которые взаимодействуют с

Иишкой, да? Вот что мы можем здесь

улучшить в первую очередь? Я считаю, что

здесь не самый удачный способ отбора UI

элементов есть, да? Потому что каждый из

этих блоков, он очень громозко выглядит

и занимает огромное количество

пространства.

Кстати, ещё оказывается вот так вот

можно делать. Прикольно. Поэтому я хочу

следующей задаче для курсора дать, чтобы

он сгруппировал все эти элементы, да?

Как мы это можем сделать?

Давайте напишем промт вместе.

Отличный

результат.

Единственно,

твенно. Ладно, допустим, правильно

написал. Давайте я даже попробую чуть

больше шрифт сделать. Что теперь?

А

каждый блок

с индексом навыка как отдельная карточка

выглядит.

Громозтко.

Давай их все объеним

в

одну карточку,

чтоб

она занимала

меньшее места

на сайте.

Опять же, промт, то есть запрос, он

может варьироваться, но я надеюсь, что я

смог

достаточно хорошо объяснить, что не

нужно менять логику, а что нужно

взаимодействовать с пространством, со

стилями, по правой карточке немного и

так далее.

Он вроде бы как это и делает.

Оставляем. Обновляю страницу. Так, уже

смотрите, чуть лучше стало, но как будто

бы всё равно, да? То есть, э, что

изменилось? Изменилось то, что теперь

это одна карточка. И в любом случае мне

так много больше нравится,

но мм ушли вот эти вот элементы, отступы

друг от друга снизу. Это называется

margin bottom, да? Отступ снизу от

элемента.

Но всё равно как будто бы многовато,

поэтому я могу также ему и написать.

Отлично. Но давай

уменьшим по размеру этот блок на

процентов

30 по высоте.

Почему бы и нет? Мы же заказываем то,

что мы хотим, поэтому пускай работает,

правильно?

Конечно же, а будучи

фронт-разработчиком, когда вы часто

работаете с интерфейсами, вы м чаще

будете сталкиваться с различными

дизайнами, с элементами, там, с

паттернами и так далее, и будете

понимать там, то есть как выглядеть, как

что можно поменять, улучшить и так

далее. Вот. Потому что, ну, очевидно,

нельзя просто взять и зазумировать это

всё на 30%. Это будет выглядеть так

себе. А вот, но курсор меня правильно

понимает, и он адаптирует все элементы.

То есть я это вижу по тем изменениям в

коде, которые он вносит здесь.

Но опять же, видите, я здесь не работаю

с кодом, я работаю именно с запросом

к, а искусственному интеллекту.

И вуаля, вуаля. Смотрите, какую красоту

мы в итоге получили. Вот теперь мне это

намного больше нравится.

Теперь у нас всё помещается в один блок.

При этом у нас осталось функциональ

весь этот калькулятор. И на самом деле

выглядит это очень круто. Смотрите,

чтобы вам было проще потом

взаимодействовать с данным сайтом и

доделать его под себя, чтобы вы, в

принципе, понимали принцип того, как это

работает, я хочу продемонстрировать ещё

одну задачу. То есть, например, мы хотим

добавить сюда ещё один навык, да, потому

что сейчас мы прописали такой

довольно-таки консервативный

м frontнд стек, набор технологий,

необходимые стать

фронтенд-разработчиком.

Но на самом деле сейчас нам требуются

ещё знания более продвинутых вещей,

например, таких как Typescript.

И поэтому, а, давайте,

значит, в рамках вот также можно этого

чата, мы можем убедиться, что, видите,

здесь есть ползунок такой, где написано

всего лишь 31% контекста заполнен, то

есть мы можем смело продолжать здесь, но

я повторюсь, что для новых задач лучше

всё-таки использовать новый чат. И

напишем здесь. Супер.

Давай теперь ещё в качестве

одного

как же это называется, индекса

навыков, добавим

type scriptриt.

То есть, а, пример, который я хочу здесь

продемонстрировать в том, что мы можем

вот так вот самостоятельно, в том числе

не только менять

визуальное оформление сайта, но и менять

логику, да, потому что здесь также

потребуется ещё, получается, пересчитать

и,

а,

то, как это будет отображаться в

итоговом прогрессе и так далее, да,

давайте посмотрим, получилось ли у нас.

И да, как видите, это у нас также

работает. То есть здесь мы не

ограничены, в принципе, вот никакой, а,

никаким ограничением внешним, да, мы

просто делаем то, что нам хотим. И как

итог, да, вот этого проекта, я хочу,

чтобы вы поняли опять же принцип, как

это создаётся, принцип того, что

необходимо понимать вот эти вот базовые

навыки, чтобы более умело этим

оперировать и при необходимости там

самостоятельно где-то это менять и

реализовывать вот те проекты, которые вы

сами по-настоящему захотите. Такие вот

дела. Я надеюсь, что вам понравился этот

проект. И у нас остаётся одна небольшая

работа в качестве домашнего задания. Я

хочу, чтобы вы реализовали

самостоятельно одну секцию на сайте. Это

будет последняя секция, да, по аналогии

с предыдущими днями, где будет

очень простой блок, будет написано мои

контакты и будет кнопочка связаться со

мной в по Telegram. И там вам нужно

будет подставить свой usernрнеame.

Вот такая вот задача. Попробуйте это

реализовать. Ну и как обычно, решение

домашки также будет мною приложено. Так,

реализовываем последнюю секцию и

последнюю домажку. Показываю с нуля.

Создаём новый чат, и это обязательно. Ну

и дальше говорим: "Создай мне финальную

секцию сайта

и называю я её связаться со мной". Там

должна быть одна кнопка в стилистике.

нашего сайта.

А, а, допустим, связаться со мной в

Telegram

с иконкой

Telegram,

например. Так. И что ж, такой простой

запрос. Я отправляю его в

м курсор.

Смотрим, что он нам нарисует здесь. Он,

на самом деле, использует технологию с

ВГ, рисует иконочку, добавляет стили.

Так.

Всё проверяет здесь у себя. Угу.

Обязательно читаем,

смотрим на изменения. То есть добавлена

икон, точнее секция.

Так, а стилистика. Что ж, давайте

проверим, как это работает.

Обновляю страницу.

И смотрите, супер, у нас есть

потрясающая иконочка с Телеграмом,

но если я сюда перехожу,

то есть какой-то человек, который

называется username.

Вот. А, соответственно, это не совсем

то, что нам нужно здесь, да, потому что,

во-первых, ну, кнопочка-то появилась, и

она очень красивая, мне она очень

нравится. Вот. Но нам нужно её заменить

на свою. Поэтому дальше

я перехожу в index HTML. Мы знаем, что я

в самом низу. Вот я вижу связаться со

мной. Вот у нас есть, а,

получается кнопочка связаться со мной в

Telegram.

И тут, видите, код, код, код, код, код.

Но если мы внимательно посмотрим, то тут

есть у нас такой тег, который

называется, а, э, он переводится как и

по факту это ссылка. Вот ссылка, из

которой стилистически мы сделали кнопку.

И вот у нас есть ссылка на username, да,

то есть вот он. Он и здесь мы можем

написать

а свой usернейм, который мы хотим

видеть. В данном случае я напишу здесь

владем, поскольку это

usernрнейм моего Telegram-канала. Вот

если я перейду, то, как видите, всё, вот

мой Telegram-канал, да, и мы можем

открыть его в Телеграме, соответственно.

Вот. У вас, естественно, будет это свой

юзернейм, но, как видите, мы

довольно-таки просто и быстро

реализовали задачу и такой сайт мы

получили. Просто представьте,

вот мы за столь малое количество

времени, на самом деле, сделали

довольно-таки большое количество

функционала и научились работать с

кодом. А теперь представьте, сколько

всего теперь можно реализовать, если

знать вот эти вот основы и как проявить

себя в творчестве. Я надеюсь, вам это

было приятно, полезно и интересно пройти

данный марафон. Благодарю за внимание и

увидимся дальше. M.