мма

1. Учебная практика ПМ.09 Проектирование, разработка и оптимизация веб-приложений Специальность 09.02.07 Информационные системы и

программирование
«FightGear» — интернет-магазин экипировки для смешанных
единоборств
Выполнил: Шлосс Кирилл Владимирович
Группа: РП-41

2. О проекте

FightGear — это интернет-магазин
профессиональной экипировки для бойцов ММА.
Сайт предоставляет пользователям удобный
доступ к каталогу товаров, возможность
просматривать детальную информацию о каждом
продукте и добавлять товары в корзину. Проект
ориентирован на спортсменов, тренеров и
любителей единоборств.
О проекте
Реализованные страницы:
Главная страница с приветственным блоком и
популярными товарами
Страница каталога с полным списком из 12
товаров
Страница отдельного товара с детальным
описанием

3. Преимущества проекта

• Адаптивный дизайн — сайт корректно
отображается на устройствах от смартфонов до
широкоформатных мониторов
• Удобная навигация — горизонтальное меню на
десктопе и бургер-меню на мобильных устройствах
Преимущества
проекта
• Функционал корзины — добавление товаров без
перезагрузки страницы, динамический счётчик
• Единый стиль оформления — тёмная цветовая
гамма с красными акцентами, соответствующая
тематике единоборств
• Семантическая вёрстка — использование тегов
HTML5 улучшает индексацию поисковыми
системами
• Быстрая загрузка — отсутствие тяжёлых
фреймворков, только чистый код

4. Стек технологий

• HTML5 — семантическая разметка
страниц
• CSS3 — визуальное оформление, Flexbox,
CSS Grid, медиа-запросы
Стек технологий
• JavaScript (Vanilla JS) — динамическая
генерация карточек товаров, работа
корзины, бургер-меню
• Visual Studio Code — среда разработки
• Chrome DevTools — отладка и
тестирование
• Figma — прототипирование интерфейса

5. Главная страница (index.html)

Приветственный баннер с
призывом к действию, блок
преимуществ магазина и
сетка популярных товаров.
Шапка с логотипом и
навигацией зафиксирована
при прокрутке

6. Каталог товаров

Адаптивная сетка из 12 карточек.
Каждая карточка содержит
изображение, название, краткое
описание, цену и кнопки "В корзину"
и "Подробнее". При наведении
карточка приподнимается.

7. Страница товара

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

8. Заключение

В ходе учебной практики:
• Изучены принципы проектирования UX/UI
• Освоена адаптивная вёрстка на CSS Grid и
Flexbox
• Реализован динамический интерфейс на чистом
JavaScript
Заключение
• Проведено тестирование в различных браузерах
и на мобильных устройствах
• Получен готовый продукт, готовый к
демонстрации
FightGear — полностью функциональный
прототип интернет-магазина, подтверждающий
сформированные профессиональные
компетенции.