3.1 Фронтенд

Вайбкодинг не требует умения программировать, но существует определенный минимум, в котором нужно разбираться, чтобы иметь возможность делать по-настоящему полезные решения и автоматизации за рамками своего компьютера. Сюда в первую очередь относятся основные веб-технологии и принципы, по которым работает веб. В этом уроке мы познакомимся с HTML, CSS и JavaScript, на которых написана вся визуальная часть сайтов, то есть то, что мы видим в браузере.

Страницы сайтов, которые мы видим в интернете, выглядят так, как мы их видим, только благодаря браузеру. Если посмотреть внутрь, то можно заметить, что браузер загружает в основном текстовые файлы и картинки. Все остальное — это способность браузера отобразить переданный текст на экране. Но это не просто текст, а специальные инструкции, которые либо говорят, что нужно делать, либо описывают то, как это должно работать или выглядеть. Из основных форматов можно выделить три: HTML — это содержимое и структура. CSS — это оформление. JavaScript оживляет

HTML: Разметка страницы HTML — это разметка страницы. Она отвечает за структуру и смысл разных элементов на странице. Например, с ее помощью задаются списки, таблицы, заголовки и много другое, включая ссылки. Это очень похоже на то, как оформляются документы в текстовых редакторах, с той лишь разницей, что там мы нажимаем кнопки, а здесь оборачиваем текст в теги <имя тега>текст</имя тега> .

HTML: структура страницы

<h1>Привет, я Анна</h1> <p>Делаю торты на заказ в Москве.</p> <img src="cake.jpg" alt="Торт"> <button>Заказать</button>

Здесь h1 — это главный заголовок, p — это абзац, img — это картинка, button — это кнопка. У каждого элемента есть свой внешний вид и правила отображения. Иногда это общие стандарты для всех браузеров, а иногда нет, поэтому сайты в разных браузерах выглядят немного по-разному.

Теги вкладываются друг в друга. Так получается дерево. Шапка содержит логотип и меню, меню содержит ссылки, каждая ссылка содержит текст.

<header>
  <img src="logo.svg" alt="Логотип">
  <nav>
    <a href="/about">О нас</a>
    <a href="/contacts">Контакты</a>
  </nav>
</header>

Запоминать список тегов наизусть не нужно. Когда вы попросите агента "сделай лендинг для кондитерской", он сам разложит контент по подходящим тегам. Знать про HTML стоит, чтобы понимать, где живут текст и структура страницы.

На практике верстка выглядит сложнее, потому что у тегов есть атрибуты. Атрибут — это дополнительная настройка, которую пишут внутри открывающего тега. В примерах выше они уже встречались. У картинки src говорит, какой файл показать, а alt задает текст, который увидит человек, если картинка не загрузилась. У ссылки href указывает, куда она ведет. Запоминать атрибуты не нужно, агент проставит их сам. Знать про них стоит, чтобы понимать, откуда у элемента берется адрес ссылки или путь к картинке.

Отдельная история — это атрибут class . Через него к элементу подключают оформление, и классов на одном теге бывает

CSS: оформление и адаптация

<button class="bg-orange-500 text-white px-6 py-3 rounded-lg shadow hover

Выглядит пугающе, но это все та же кнопка с надписью "Заказать". Просто рядом перечислены готовые классы, которые отвечают за цвет, отступы и скругление углов. Длинная строка в class — это нормально, читать ее целиком вам не придется.

Структура документа Примеры выше показывают отдельные куски разметки. На реальной странице эти куски лежат внутри общего каркаса, который есть у любого сайта.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Анна. Торты на заказ в Москве</title> <meta name="description" content="Делаю торты на заказ. Доставка по М </head> <body> <h1>Привет, я Анна</h1> <p>Делаю торты на заказ в Москве.</p> </body> </html>

Внутри html всегда два блока. В body лежит все, что видно на экране, то есть заголовки, тексты, картинки и кнопки. В head лежит служебная информация, которую посетитель не видит, но которая сильно влияет на то, как страница ведет

Самое важное в head живет в мета-тегах и в теге title . title задает подпись на вкладке браузера и заголовок страницы в результатах поиска. description дает короткое описание, которое поисковик показывает под ссылкой. viewport говорит браузеру подстраивать ширину под экран телефона, без него мобильная версия выглядит как уменьшенная копия десктопной. Отдельная группа мета-тегов с префиксом og: отвечает за красивую карточку, которая появляется, когда вы

Писать этот каркас руками не придется, агент добавляет его сам. Знать про него стоит, потому что именно сюда вы попросите агента вписать правильный заголовок для поиска или картинку для превью в Телеграме.

Исходный код страницы Любая страница в браузере собрана из того самого HTML. Его можно посмотреть прямо в браузере. Кликните по странице правой кнопкой и выберите "Просмотр кода страницы", и откроется вкладка с исходным текстом, который сервер отдал браузеру. Это полезно, когда вы хотите понять, как устроен чужой сайт, или показать агенту, что именно лежит под капотом понравившейся страницы.

Но учтите, что иногда, открыв таким образом страницу, вы не увидите реального HTML. Такое бывает, когда весь HTML

Агент видит сайт именно так, он загружает страницы как HTML (по сути текст) и ищет внутри обычным поиском по тексту.

CSS: Внешний вид CSS отвечает за оформление. Один и тот же HTML с разным CSS превращается в сайт банка или в лендинг кофейни.

h1 { color: navy; font-size: 32px; text-align: center; }

button { background: orange; color: white; padding: 10px 20px; border-radius: 8px; }

Запись означает "найти все теги h1 и применить к ним эти стили". Цвет, размер шрифта, отступы, скругление углов, фоновая картинка — все это CSS.

Руками такой код пишут редко. Чаще берут готовые наборы, и они бывают двух видов.

Первый вид — это утилитарные классы. Главный представитель тут Tailwind. Он дает набор коротких классов вроде text- center или bg-orange-500 , которыми размечают элементы прямо в HTML. Оформление собирается из готовых кубиков, но

Второй вид — это библиотеки компонентов. Они дают целые элементы, а не отдельные стили. Кнопка, форма, модальное окно приходят готовыми и сразу выглядят аккуратно. Mantine подключается к проекту как обычная библиотека. shadcn/ui устроен иначе. Он копирует код компонентов прямо в вашу папку, и дальше эти файлы можно править под себя. Внутри

Когда агент собирает лендинг, он почти всегда берет что-то из этого. Вам разбираться в синтаксисе не нужно. Полезно знать названия, чтобы направить агента словами "сделай на Mantine", "возьми компоненты из shadcn" или "стилизуй через Tailwind в темной теме".

Позиционирование CSS не только красит элементы, но и расставляет их по странице. По умолчанию браузер ставит блоки сверху вниз, один под другим, в том порядке, в котором они идут в HTML. Сначала заголовок, под ним абзац, под ним картинка.

Чтобы получить колонки, сетки и шапку с логотипом слева и меню справа, используют раскладку. Два главных инструмента тут — flexbox и grid. Flexbox выстраивает элементы в ряд или в столбец и подходит для меню, карточек и кнопок в строке. Grid задает таблицу из строк и столбцов и подходит для галерей и сложных сеток. Сами эти слова знать необязательно,

Отдельная история — это адаптивность. Один и тот же сайт открывают с большого монитора и с телефона. На широком экране три карточки помещаются в ряд, на узком их лучше показать в столбик. Адаптивная верстка меняет раскладку под ширину экрана, и страница остается читаемой везде.

Агент делает страницу адаптивной по умолчанию, особенно на Tailwind, где для этого есть встроенные классы. Если раскладка поехала, достаточно сказать словами "на мобильных покажи блоки в одну колонку" или "увеличь шрифт заголовка на маленьких экранах".

Анимация CSS отвечает не только за статичный вид, но и за движение. Кнопка плавно меняет цвет при наведении, карточка слегка приподнимается, блоки появляются по мере прокрутки страницы. Все это делает сайт живым, и за простые эффекты отвечает именно CSS, без всякого JavaScript.

Самый частый прием — это плавный переход. Браузеру говорят, что при наведении на кнопку цвет должен меняться не

button { background: orange; transition: background 0.3s; }

button:hover { background: darkorange; }

Более сложные сценарии вроде бесконечного вращения иконки загрузки или появления блока со сдвигом описывают через ключевые кадры. Агент добавляет такие эффекты по описанию словами. Достаточно сказать "пусть карточки плавно появляются при прокрутке" или "сделай кнопку чуть больше при наведении".

С анимацией легко переборщить. Когда на странице все мигает и прыгает, читать ее тяжело. Хороший ориентир — это сдержанность. Пара плавных переходов украшает сайт, а вот десяток одновременных движений отвлекает от сути.

JavaScript: Интерактивность HTML и CSS дают статичную картинку. Чтобы оживить происходящее на странице и включить реакцию на действия пользователей, нужно добавить JavaScript.

Для работы модальных окон, переключения темной и светлой темы и даже корзины в интернет-магазине, нужно подключать разработку.

JavaScript: действия на странице

<button onclick="alert('Привет!')">Нажми меня</button>

Этот код добавляет на страницу кнопку, которая при клике показывает всплывающее окно с текстом "Привет!".

JavaScript в браузере умеет много чего. Менять содержимое страницы без перезагрузки (например, отображать результаты поиска по мере ввода). Слать запросы на сервер и подгружать новые данные. Работать с местным хранилищем браузера, чтобы запомнить, что вы залогинены.

Для лендинга часто хватает скрипта на 20 строк. Для сложных приложений вроде карт за всем стоит огромная JavaScript- программа. Причем для написания таких программ используются фреймворки, специальные программные системы на базе какого-то языка программирования (в нашем случае JavaScript). Возможно, вы слышали о React — это оно и есть. React позволяет создавать по-настоящему большие приложения, которые было бы сложно делать на чистом JavaScript. Не потому что JavaScript плохой, а потому что в таких фреймворках решено огромное количество типовых проблем, которые неизбежно возникают в процессе программирования.

DevTools Во всех современных браузерах встроены инструменты разработчиков, которые помогают изучить исходную структуру страницы, посмотреть, как устроены те или иные блоки, что там находится в мета-тегах и какие размеры у всего этого. Обычно их называют DevTools. По умолчанию они могут быть скрыты, поэтому нужно посмотреть в меню или настройках браузера, где их включить.

Через DevTools можно делать довольно много разных задач, от работы с куками до seo-анализа. Представьте, что вы залогинены на сайте, но хотите сделать так, как будто он вас видит в первый раз. Как это сделать? Самый надежный способ

Статические сайты Собирая все вместе, мы можем сказать, что умеем разрабатывать статические файлы. Основное отличие таких сайтов от динамических в том, что у них нет хранилища данных и логики на сервере, которая отвечает за обработку пользователя, его заказов и так далее.

Статический сайт состоит из HTML-файлов, файла со стилями, файла со скриптами и картинок. Никакой базы данных, никакой логики на сервере. Браузер запросил index.html , сервер отдал готовый файл, на этом обмен закончился. Идеально для лендингов, калькуляторов и других простых задач, в которых не надо ничего дополнительно изобретать.

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

anna-cakes/
├── index.html  страница, разметка и текст
├── style.css   оформление, цвета и отступы
├── script.js   поведение, модалки и таймеры
└── images/
    ├── logo.svg
    └── cake.jpg

index.html — это главная страница, ее браузер открывает первой. Рядом лежат файл со стилями, файл со скриптом и папка с картинками. Когда вы откроете эту папку в Claude Code и попросите что-то поправить, агент будет менять эти же файлы.

Этого вполне достаточно для типичных лендинг страниц с формами заявок. Таким же способом можно создавать калькуляторы и разные интерактивные игры, часто используемые маркетологами для привлечения аудитории.

В этом уроке выкладываем настоящую страницу в сеть и смотрим, что агент пишет под капотом.

Разминка с HTML, CSS и JavaScript

Перед практикой загляните в бесплатные курсы HTML, CSS и JavaScript на https://code-basics.com/ru. Достаточно первых 10-15 заданий в каждом, проходить до конца не нужно. Цель не научиться кодить руками, а узнать теги, понять, как устроены стили, и спокойно читать то, что агент сложил в файлы.

Превью ссылки в Телеграме

Возьмите лендинг, который у вас уже есть, или попросите агента собрать простую страницу-визитку. Опубликуйте ее на GitHub Pages, чтобы получить публичный адрес. Теперь настройте карточку, которая появляется при отправке ссылки в мессенджер.

Добавь на страницу og-теги для превью в мессенджерах: заголовок, описание и картинку. Картинку возьми из папки проекта и пропиши полным адресом, чтобы Телеграм смог ее загрузить.

Отправьте ссылку самому себе в Телеграм и посмотрите, как развернется карточка с заголовком, описанием и картинкой. Телеграм надолго запоминает превью, поэтому если поменяете теги и захотите проверить снова, обновите кеш через @WebpageBot . Затем откройте исходный код страницы (правый клик, «Просмотр кода страницы») и найдите свои og-теги в шапке. Это тот самый head , который посетитель не видит, а мессенджер читает.

Живой интерактив на JS

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

запоминается при следующем заходе на страницу.

Откройте файл со скриптом и найдите кусок, который срабатывает на клик по кнопке. Обратите внимание, где описано, что происходит при нажатии, и как выбор сохраняется в браузере. Глубоко в синтаксис не лезьте, задача почувствовать, что за реакцию страницы отвечает именно JavaScript.

Дополнительные материалы Основы веб-разработки