День 38 | Дипломный проект

Дипломный проект

Поздравляем! Вы прошли весь курс и изучили множество техник верстки. Теперь пришло время применить все знания на практике и создать полноценный проект.

Что мы создадим: Полноценный лендинг (одностраничный сайт) с использованием всех изученных техник.

Требования к проекту

Ваш проект должен включать:

1. Структура сайта

• ✅ Header (шапка) с навигацией
  • Логотип
  • Меню навигации
  • Кнопка CTA (Call To Action)
  • Sticky header (липкая шапка при скролле)
  • Бургер-меню для мобильных
• ✅ Hero-секция (главный баннер)
  • Заголовок и подзаголовок
  • Кнопки призыва к действию
  • Фоновое изображение или градиент
  • Анимация появления
• ✅ Секция "О нас" или "Преимущества"
  • Карточки с иконками
  • Использование Grid или Flexbox
  • Hover эффекты
• ✅ Секция с интерактивными элементами
  • Слайдер (отзывы, проекты, или галерея)
  • Табы (услуги, цены, или другая информация)
  • Аккордеон (FAQ или детали)
• ✅ Форма обратной связи
  • Все необходимые поля
  • Валидация на JavaScript
  • Красивое оформление
• ✅ Footer (подвал)
  • Навигация
  • Контакты
  • Социальные сети
  • Копирайт

2. Технические требования

• ✅ Использование SCSS (переменные, миксины, вложенность)
• ✅ Структурированный код (BEM методология)
• ✅ Семантические HTML теги
• ✅ Адаптивность для всех устройств (mobile-first)
• ✅ Интерактивные элементы на чистом JavaScript
• ✅ Оптимизация изображений
• ✅ Плавные анимации и переходы
• ✅ Кроссбраузерность (работает в Chrome, Firefox, Safari, Edge)

3. Интерактивные элементы

Должны быть реализованы минимум 3 из следующих:

• ✅ Слайдер (с автоплеем, навигацией, индикаторами)
• ✅ Табы (переключение между разделами)
• ✅ Аккордеон (раскрывающиеся блоки)
• ✅ Модальное окно (для формы или деталей)
• ✅ Фильтр (для портфолио или каталога)
• ✅ Плавный скролл и кнопка "Наверх"

Пошаговый план работы

День 33: Подготовка и структура

1. Создайте проект:
   • Инициализируйте Git репозиторий
   • Создайте структуру папок (src/, dist/)
   • Настройте Vite
   • Настройте SCSS
   • Создайте базовую HTML структуру
2. Создайте систему дизайна:
   • Файл _variables.scss с цветами, шрифтами, размерами
   • Файл _mixins.scss с переиспользуемыми миксинами
   • Подключите шрифты (Google Fonts или локальные)
3. Верстайте Header:
   • HTML структура с семантическими тегами
   • Стилизация с Flexbox
   • Sticky позиционирование
   • Бургер-меню для мобильных (JavaScript)

День 34: Основные блоки

1. Hero-секция:
   • Заголовок, подзаголовок, кнопки
   • Фоновое изображение или градиент
   • Overlay для читаемости текста
   • Анимация появления
2. Секция "Преимущества":
   • Карточки с иконками
   • Использование Grid для сетки
   • Hover эффекты
   • Адаптивность
3. Секция с интерактивными элементами:
   • Выберите один элемент: слайдер, табы или аккордеон
   • Реализуйте его на JavaScript
   • Стилизуйте красиво

День 35: Интерактивность и формы

1. Добавьте ещё интерактивные элементы:
   • Реализуйте ещё 2 интерактивных элемента
   • Убедитесь, что всё работает плавно
2. Форма обратной связи:
   • HTML структура формы
   • Стилизация полей
   • Валидация на JavaScript
   • Показ ошибок
   • Модальное окно для формы (опционально)
3. Footer:
   • Структура с Grid
   • Навигация, контакты, социальные сети
   • Адаптивность

День 36: Финализация и оптимизация

1. Адаптивность:
   • Проверьте на мобильных (DevTools эмуляция)
   • Проверьте на планшетах
   • Исправьте все проблемы с отображением
   • Убедитесь, что бургер-меню работает
2. Оптимизация:
   • Оптимизируйте изображения (сожмите, выберите правильный формат)
   • Добавьте lazy loading для изображений
   • Минифицируйте CSS и JS (Vite автоматически минифицирует при npm run build)
   • Проверьте производительность через Lighthouse
3. Проверка качества:
   • Проверьте код на ошибки
   • Убедитесь, что все интерактивные элементы работают
   • Проверьте в разных браузерах
   • Проверьте доступность (alt для изображений, семантические теги)
4. Деплой:
   • Соберите проект для продакшена (npm run build)
   • Загрузите на GitHub
   • Опубликуйте на GitHub Pages или другом хостинге
   • Поделитесь ссылкой!

Критерии оценки проекта

Дизайн и визуал (30%)

• Красивое и современное оформление
• Правильная типографика
• Гармоничная цветовая схема
• Плавные анимации и переходы

Техническая реализация (40%)

• Правильная HTML структура (семантические теги)
• Чистый и структурированный CSS/SCSS
• Работающий JavaScript без ошибок
• Использование изученных техник
• Адаптивность для всех устройств

Интерактивность (20%)

• Работающие интерактивные элементы
• Плавные анимации
• Хороший UX (удобство использования)

Оптимизация и качество (10%)

• Оптимизированные изображения
• Быстрая загрузка
• Нет ошибок в консоли
• Кроссбраузерность

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

• Шрифты: Google Fonts
• Иконки: Font Awesome (бесплатные иконки)
• Изображения: Unsplash (бесплатные фото)
• Градиенты: CSS Gradient
• Проверка производительности: PageSpeed Insights

Советы для успешного проекта

• Начните с макета — нарисуйте на бумаге или в Figma структуру страницы
• Верстайте по порядку — сверху вниз (header → hero → секции → footer)
• Тестируйте постоянно — проверяйте результат после каждого блока
• Используйте DevTools — для отладки и проверки стилей
• Не копируйте код слепо — понимайте, что делаете
• Комментируйте код — особенно сложные места
• Делайте коммиты в Git — после каждого завершённого блока

Что делать, если застряли?

• Вернитесь к соответствующим урокам курса
• Используйте DevTools для отладки
• Проверьте консоль браузера на ошибки
• Посмотрите примеры кода из уроков
• Не бойтесь экспериментировать!

Итоги курса

Поздравляем! Вы прошли полный курс по верстке и создали свой первый профессиональный проект. Теперь вы умеете:

• ✅ Настраивать рабочее окружение (Git, Node.js, Vite, SCSS, CSS Custom Properties)
• ✅ Верстать современные сайты с использованием HTML5 и CSS3
• ✅ Использовать Flexbox и CSS Grid для создания макетов
• ✅ Создавать интерактивные элементы на чистом JavaScript
• ✅ Делать сайты адаптивными для всех устройств
• ✅ Оптимизировать производительность
• ✅ Работать с инструментами разработчика

Вы готовы создавать профессиональные веб-сайты!

Продолжайте практиковаться, изучайте новые техники, следите за трендами в веб-разработке. Удачи в вашем пути верстальщика!