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

Разработана адаптивная и кросс-браузерная верстка главной страницы (лендинга) по макету из Figma. Реализована сетка для карточек тренеров и программ тренировок с использованием CSS Grid. Обеспечено корректное отображение на всех типах устройств (десктопы, планшеты, мобильные телефоны) благодаря кастомным медиазапросам. Оптимизирована скорость загрузки страницы (сжатие изображений, легковесный CSS-код). Код чистый, структурированный, с комментариями для удобства поддержки.

Браузерная пошаговая RPG-игра. JavaScript, ООП, Webpack, 78 тестов на Jest. Персонажи, бои, сохранение игры.

Лёгкий адаптивный сайт на GitHub Pages, точно повторяющий дизайн из Figma.

Полноценный магазин без сборки — работает как статика где угодно и ставится как PWA.

Современный лендинг для концептуального сервиса доставки, который делает ставку на скорость, доступность и заботу об экологии. Проект знакомит с ценностями бренда, услугами и простым процессом заказа через WhatsApp. Реализованные задачи: - Чёткое представление услуг и преимуществ компании. - Пошаговое описание процесса заказа (от заявки до получения). - Интерактивный блок с часто задаваемыми вопросами (аккордеон). - Формы для подписки на новости и обратной связи. - Блок с отзывами клиентов и партнёров. - Полностью адаптивная вёрстка под все типы устройств (десктопы, планшеты, мобильные телефоны). Использованные технологии: HTML5, CSS3 (Flexbox, Grid, Media Queries), JavaScript (FAQ-аккордеон), Git, GitHub Pages.

HTML-верстка, анимации, модальные окна

HTML-верстка, анимация фона, личный кабинет, всплывающие окна, плавные переходы

Адаптивный лендинг для финансового и инвестиционного сервиса. Что сделано: — главный экран с понятным предложением; — секции преимуществ; — информационные блоки; — адаптация под разные устройства; — аккуратная типографика; — визуальная структура; — базовая оптимизация страницы. Проект выполнен в формате промо-сайта для сервиса, где важно быстро объяснить продукт, вызвать доверие и привести пользователя к действию. Технологии: HTML, CSS, JavaScript.

Современный интерфейс интернет-магазина кроссовок с карточками товаров, избранным и корзиной. Что сделано: — главная страница магазина; — карточки товаров; — поиск; — избранные товары; — корзина; — адаптивная структура; — компонентная архитектура React; — аккуратный UI для e-commerce проекта. Проект выполнен как готовый интерфейс магазина, который можно использовать как основу для коммерческого e-commerce сайта. Технологии: React, JavaScript, HTML, CSS.

Интерфейс интернет-магазина пиццы с каталогом товаров, фильтрацией, сортировкой и корзиной. Что сделано: — каталог товаров; — карточки товаров; — категории и фильтрация; — сортировка; — корзина; — компонентная структура React; — подготовка проекта к публикации. Проект показывает реализацию e-commerce интерфейса: пользователь может просматривать товары, выбирать позиции и работать с корзиной. Технологии: React, JavaScript, HTML, CSS.