Перейти к основному содержимому

Практическое задание 2: Frontend Landing Page

🎨 Создание лендинга с формой - Разработка фронтенда для продукта

📋 Описание задания​

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

🎯 Цели задания​

  • Создание пользовательского интерфейса
  • Работа с HTML, CSS, JavaScript
  • Интеграция с бекендом через формы
  • Понимание структуры лендингов
  • Освоение современных веб-технологий
  • Создание адаптивного дизайна
  • Работа с Nginx для статических файлов

📝 Требования к выполнению​

Основные требования:​

  1. Лендинг - одна страница с информацией о продукте
  2. Форма - отправляет данные на бекенд
  3. Сохранение данных - бекенд сохраняет полученные данные
  4. Nginx для статических файлов - раздача HTML, CSS, JS, изображений
  5. Адаптивный дизайн - корректное отображение на всех устройствах
  6. Структура лендинга:
    • Header (шапка) с навигацией
    • Cекция с основным сообщением
    • Описание продукта с преимуществами
    • Форма обратной связи или регистрации
    • Footer (подвал) с контактной информацией
    • Картинки и текст для визуального оформления

Способы создания:​

  • Написать HTML с нуля
  • Взять готовый шаблон и подредактировать
  • Сгенерировать с помощью инструментов
  • Сверстать на конструкторе

🐳 Использование Nginx (обязательно):​

  • Nginx для статических файлов - раздача HTML, CSS, JS, изображений
  • Конфигурация Nginx - настройка для обслуживания статических ресурсов
  • Docker с Nginx - можно использовать готовый образ nginx
  • Проксирование на бекенд - перенаправление запросов формы на API

📊 Система оценивания​

  • Полное выполнение: Максимальная оценка (2 балла)
  • Частичное выполнение: Преподаватель дает обратную связь и просит переделать
  • Пересдача: Возможна после исправления замечаний

🛠 Технические требования​

Обязательные элементы лендинга:​

  • Header с навигацией и логотипом
  • Hero-секция с основным сообщением и призывом к действию
  • Описание продукта с преимуществами и особенностями
  • Форма обратной связи или регистрации
  • Footer с контактной информацией и ссылками
  • Изображения для визуального оформления
  • Адаптивный дизайн для мобильных устройств

Форма должна содержать:​

  • Поля для ввода данных (имя, email, сообщение и т.д.)
  • Валидацию на клиенте (обязательные поля, формат email)
  • Отправку данных на бекенд через AJAX
  • Обработку ответа от сервера (успех/ошибка)

🔗 Полезные ресурсы​

HTML и CSS:​

JavaScript:​

Nginx:​

CSS Frameworks:​

📁 Структура проекта​

practical-2-frontend-landing/
├── nginx/
│   └── nginx.conf           # Конфигурация Nginx для статических файлов
├── frontend/
│   ├── index.html           # Основная страница лендинга
│   ├── css/
│   │   ├── style.css        # Основные стили
│   │   ├── responsive.css    # Адаптивные стили
│   │   └── components.css    # Стили компонентов
│   ├── js/
│   │   ├── main.js          # Основная логика
│   │   ├── form.js          # Обработка формы
│   │   └── validation.js    # Валидация формы
│   ├── images/              # Изображения для лендинга
│   │   ├── hero-bg.jpg      # Фоновое изображение
│   │   ├── product.jpg      # Изображение продукта
│   │   └── logo.png         # Логотип
│   └── assets/              # Дополнительные ресурсы
├── backend/                 # API для обработки формы
├── docker-compose.yml       # Оркестрация контейнеров
└── README.md                # Описание проекта

📋 Чек-лист выполнения​

HTML структура:​

  • [ ] Создан HTML-файл с правильной структурой
  • [ ] Добавлены все необходимые секции лендинга
  • [ ] Использованы семантические HTML теги

CSS стилизация:​

  • [ ] Стилизован дизайн (CSS)
  • [ ] Создан адаптивный дизайн для мобильных устройств
  • [ ] Добавлены hover-эффекты для интерактивных элементов
  • [ ] Настроена типографика и цветовая схема
  • [ ] Оптимизированы изображения

JavaScript функциональность:​

  • [ ] Создана и настроена форма
  • [ ] Добавлена валидация формы на клиенте
  • [ ] Настроена отправка данных на бекенд через AJAX
  • [ ] Добавлена обработка ответа от сервера
  • [ ] Реализован индикатор загрузки

Nginx настройка:​

  • [ ] Настроен Nginx для раздачи статических файлов
  • [ ] Создана конфигурация Nginx для обслуживания HTML, CSS, JS, изображений
  • [ ] Настроено проксирование запросов формы на бекенд
  • [ ] Добавлены заголовки кэширования для статических файлов

Интеграция и тестирование:​

  • [ ] Проверена адаптивность на разных устройствах
  • [ ] Добавлены изображения и контент
  • [ ] Протестирована работа формы через Nginx
  • [ ] Протестирована отправка данных формы на бекенд
  • [ ] Проверена валидация всех полей формы

🧪 Тестирование​

Обязательные тесты:​

  1. Отображение лендинга - все секции корректно отображаются
  2. Адаптивность - корректное отображение на мобильных устройствах
  3. Работа формы - валидация и отправка данных
  4. Nginx конфигурация - статические файлы загружаются корректно
  5. API интеграция - данные формы отправляются на бекенд

🚀 Готовые шаблоны​

Бесплатные шаблоны:​