Лендинги

Вёрстка и стек

• Чистый HTML5 / CSS3 / JS без фреймворков и сборщиков.
• Адаптивная вёрстка; декоративные фоны секций через background-size: cover.
• Все изображения в WebP с явными размерами → CLS = 0.
• Тексты с упором на доверие: для начинающих, после неудачного опыта в автошколе, восстановление навыков после перерыва.

Форма заявки

Контактная форма с серверной обработкой на PHP — отправка через AJAX без перезагрузки страницы.

• Honeypot-поле для отсечки ботов (скрытое поле, невидимое человеку).
• Валидация на клиенте и на сервере.
• Отправка заявки в мессенджер владельцу.

Производительность (PageSpeed 100 / 100)

Страница доведена до 100 баллов Performance и на десктопе, и на мобильных.

• Критический CSS встроен в head — убран render-blocking запрос за стилем.
• Шрифт Inter переведён на самохостинг: woff2-сабсет только под кириллицу, font-display: optional — ноль запросов к Google Fonts и ноль поздней перерисовки заголовков.
• Hero-портрет в WebP, пережат и помечен fetchpriority=high (LCP-элемент).
• Декоративные фоны секций ужаты (один тяжёлый фон был 579 КБ → 92 КБ), preconnect, defer на скриптах.

SEO и микроразметка

• Schema.org / JSON-LD: LocalBusiness с адресом (PostalAddress).
• Keyword-first title, корректная иерархия заголовков, Open Graph, canonical.
• Осмысленные alt, семантические лендмарки.

Доступность (Accessibility 100)

• Контраст доведён до WCAG AA по всем элементам: кнопки, ссылки, подписи полей формы, футер.
• Лендмарк main, корректные label у полей формы, aria-метки.
• Достаточные зоны нажатия и фокус-навигация.

Чем интересен проект

• Эталон «выжатого» лендинга: 100 по всем трём метрикам Lighthouse сразу — встречается нечасто.
• Самохостинг шрифта и инлайн CSS убирают сторонние зависимости из критического пути рендеринга.
• Полный цикл: структура и тексты → вёрстка → форма на PHP → оптимизация → SEO.

Вёрстка и стек

Чистый фронтенд без зависимостей. Шрифты — системный стек, поэтому страница не делает ни одного запроса к сторонним шрифтовым сервисам.

• Семантическая разметка: лендмарк main, осмысленные секции, корректная иерархия заголовков.
• Адаптивная mobile-first вёрстка на flex/grid с проработанным мобильным UX.
• Интерактив (плавный скролл, навигация) на ванильном JS — без jQuery.
• Кроссбраузерность и отзывчивость на всех брейкпоинтах.

Производительность

Скорость заложена в архитектуру страницы, а не прикручена постфактум.

• Критический CSS встроен прямо в head — нет render-blocking запроса за внешним стилем.
• Hero-фон загружается приоритетно через preload + fetchpriority=high — это LCP-элемент.
• Все изображения переведены в WebP, у каждого явные width/height → сдвиг макета CLS = 0.
• Скрипт с defer, чтобы не блокировать парсинг документа.

SEO и микроразметка

• Schema.org / JSON-LD: HomeAndConstructionBusiness с перечнем услуг (Service), предложений (Offer) и областью обслуживания.
• Keyword-first title, корректная иерархия H1–H3, осмысленные alt-тексты.
• Open Graph, canonical, аккуратные метатеги.
• Семантические лендмарки для доступности и индексации.

Доступность

• Контраст по WCAG AA — тёмный текст на акцентных кнопках.
• Семантические лендмарки и рабочие якоря навигации.
• Осмысленные alt и доступные контактные ссылки (телефон, мессенджеры).

Чем интересен проект

• Демонстрация того, что на голом стеке без единой зависимости собирается быстрый, доступный и SEO-готовый лендинг.
• Производительность как приоритет: инлайн критического CSS и приоритизация LCP дают 100 / 95 в PageSpeed.
• Полный цикл одним человеком: макет → вёрстка → оптимизация → SEO.

Вёрстка и стек

Адаптивная вёрстка по готовому дизайн-макету на сетке Bootstrap 4.

• Респонсив-сетка container / row / col на всех брейкпоинтах.
• Фиксированный навбар с мобильным бургер-меню.
• Кастомный декоративный шрифт BERNIER в заголовках — самохостинг woff2 (сабсет только под заглавную кириллицу: 2.19 МБ OTF → 123 КБ).
• Акварельные коллажи и фоновые изображения через background-size: cover.

Интерактив (jQuery)

• Аккордеон в блоке «Частые вопросы».
• Переключатель валют ₽ / $ в карточках тарифов.
• Раскрывающийся список красок (дропдаун).
• Плавный скролл по якорям навигации.

Производительность и изображения

Со страницы вычищено около 530 КБ лишнего веса.

• Все изображения переведены в WebP: hero-коллаж, тарифы, иконки, логотип.
• Адаптивный hero через srcset — мобильным отдаётся версия полегче.
• Декоративный шрифт пересабсечен под используемые глифы (2.19 МБ → 123 КБ).
• Явные width/height, fetchpriority на hero, preconnect к CDN.
• PageSpeed: 97 на десктопе, 82 на мобильных — потолок мобайла держит сторонний Bootstrap + jQuery, это сознательный компромисс для демо вёрстки по макету.

Доступность

• Лендмарк main, aria-метки на бургер-кнопке.
• Контраст фирменных оранжевого и синего доведён до WCAG AA.
• Корректная иерархия заголовков и alt-тексты.
• Accessibility 95 в Lighthouse.

Чем интересен проект

• Показывает работу не только на голом стеке, но и с фреймворком: вёрстка по чужому макету на Bootstrap + jQuery.
• Атмосферное оформление с кастомным шрифтом, аккуратно оптимизированным по весу.
• «Живые» интерактивные элементы без тяжёлого JS-фреймворка.