Начать

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

Двенадцать разборов по шагам. Каждый — про один блок, который можно взять и поставить себе: что это, зачем нужно и что попросить у нейросети.

Блоки на страницу

Из этого собирается содержание: показать несколько картинок, вывести свежие материалы, убрать лишнее под кнопку.

Слайдер

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

Плюс JavaScript

Блок новостей

Последние материалы карточками. Список обновляет сама CMS, руками в него лазить не нужно.

Плюс сниппет CMS

Галерея

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

Плюс JavaScript

Табы и аккордеон

Два способа спрятать длинный текст и не потерять его: переключение мышью и с клавиатуры.

Плюс JavaScript

Связь и статистика

Два блока, которые превращают сайт-визитку в рабочий инструмент: через один вам пишут, через второй видно, кто заходил.

Форма обратной связи

Проверка полей своими подсказками, отправка письма и простая защита от спама.

Плюс сниппет CMS

Подключение Метрики

Куда вставить счётчик, чтобы он не тормозил страницу, и какие три отчёта смотреть в первую очередь.

Разметка и стили

С чего начать

Возьмите хлебные крошки: это самый короткий мануал и единственный, где нужна только разметка. Заодно увидите, как устроены остальные — все сделаны по одному образцу.