Примеры работ и кейсы по направлению «HTML5»

Встраиваемый виджет входа, который ставится на любой сайт — неважно, на чём он написан. Виджет изолирован: его стили не конфликтуют с оформлением страницы. Внутри — валидация полей, маски ввода телефона, обработка ошибок. Собирается в двух вариантах: скрипт для вставки одной строкой и модульная сборка для современных проектов. Частая задача для сайтов на CMS — нужен живой интерактивный блок, а переписывать весь сайт ради него никто не станет. Тут встройка занимает минуты.

Лендинг для компании из сферы стройматериалов с русско- и казахскоязычной аудиторией: одна страница на трёх языках — русском, казахском, английском. Особенность — удержать единый дизайн на всех языках: тексты разной длины не должны ломать вёрстку. Плюс всё, что нужно офлайн-бизнесу: Яндекс.Карты, блок партнёров, формы обратной связи. Свёрстано без тяжёлых фреймворков, поэтому страница лёгкая и быстрая. Одна страница работает на три аудитории, и для каждой компания может понятно донести свои преимущества и ценности.

Посадочная страница строительной компании на Astro и React: собирается в статические файлы и открывается почти мгновенно даже с телефона на медленном интернете. Скорость тут не прихоть — медленные лендинги теряют посетителя раньше, чем он увидит предложение, да и поисковики их занижают. В Google PageSpeed Insights на мобильном — 100 из 100 по производительности и 92 по доступности. Плюс аккуратная адаптивная вёрстка под телефон, планшет и десктоп и автогенерация sitemap. Быстрый сайт, который не отпугивает загрузкой и хорошо чувствует себя в поиске.

Я сделал эту работу на иностранной бирже фриланса. Для американского интернет магазина спортивного питания. Заказчик просиз не использовать сторонние инструменты, поэтому сайт был сделан на чистом HTML+CSS+JS Время создания: 3 дня Цена сайта: 80 $

VPN сервиc nodeshift.space с самодельной панелью на go + py. Аудитория более 100 человек.

1. Архитектура выбрана процедурная, потому что: - Проект малый (5 вопросов) - Нет требований к масштабированию - Быстрая разработка MVP 2. Улучшил бы через: - Инкапсуляцию в класс Quiz - Переход на TypeScript - Добавление паттерна Observer для UI 3. Ограничения: - Глобальное состояние не масштабируется - Сильная связность UI и логики - Отсутствие тестов и типизации - Нет обработки edge-кейсов localStorage Вопрос: "Почему не использовал React/Vue?" Ответ: "Для проекта из 5 вопросов добавление фреймворка увеличило бы бандл в 10 раз без реальной пользы. Я предпочёл нативное решение, но если бы требовалась сложная реактивность — выбрал бы Vue Composition API." Вопрос: "А если завтра нужно 100 вопросов?" Ответ: "Я бы за 2 дня отрефакторил код на классы и добавил виртуальный скролл для DOM-элементов. Текущая архитектура позволяет это сделать без полного переписывания."

Тёмный технологичный лендинг для AI-платформы кибербезопасности. Анимированные orb-элементы, блок угроз, секция возможностей.

Премиальный корпоративный лендинг для компании финансовой инфраструктуры. Строгий стиль, инфографика, блок доверия и интеграций.

Технологичный тёмный лендинг для AI-сервиса управления задачами. Анимированные элементы, секция возможностей и интеграций.

Русскоязычный лендинг для финансового трекера. Превью дашборда, блок функций, секция тарифов и призыв к действию.