Рабочий план дисциплины

Часть 1: Введение в основы

Лабораторная работа 1: Основы HTML

  • Тема: Создание веб-страницы визитки
  • Задание: Создать личный сайт-визитку. Использовать HTML-теги для структуры страницы: заголовки, параграфы, изображения, списки и ссылки.
  • Разделы сайта: "О себе", "Навыки", "Образование", "Контакты".

Требования:

  • Применить теги: <h1>, <p>, <ul>, <img>, <a>.
  • Использовать таблицу для раздела "Навыки" с категориями (например, технические и управленческие навыки).
  • Включить атрибуты для выравнивания изображений и добавления ссылок на социальные сети.

Лабораторная работа 2: Введение в CSS и создание навигации

  • Тема: Стилизация сайта-визитки и создание навигационной панели
  • Задание: Стилизовать сайт-визитку с использованием CSS. Создать навигационное меню (navbar) для перехода между разделами.

Требования:

  • Подключить внешний файл стилей.
  • Использовать классы и идентификаторы для стилизации секций сайта.
  • Реализовать навигационную панель с помощью тегов <nav>, <ul>, <li> и настроить ссылки на внутренние разделы сайта.

Лабораторная работа 3: Введение в JavaScript и формы

  • Тема: Добавление формы обратной связи и обработка данных с использованием JavaScript
  • Задание: Реализовать форму обратной связи на сайте, где пользователь может ввести имя, email и сообщение.

Требования:

  • Использовать JavaScript для валидации данных формы.
  • Проверить наличие заполненных полей и корректность введённых данных.
  • Реализовать реакцию на успешную или неуспешную отправку формы:
    • Успешная отправка: сообщение "Спасибо за обратную связь, [имя]! С вами свяжутся в ближайшее время"
    • Ошибка: предупреждение "Пожалуйста, введите корректный email"

Лабораторная работа 4: Расширенный CSS, Позиционирование

  • Тема: Углубленное изучение CSS — позиционирование, контейнеры, медиазапросы
  • Задание: Добавить к сайту сложные CSS-правила: позиционирование (relative, absolute), использование контейнеров (flex, grid, inline-block), медиазапросы для адаптивности.

Требования:

  • Стилизовать сайт для разных разрешений экранов с помощью медиазапросов.
  • Использовать flex и grid для создания адаптивных макетов.
  • Позиционировать элементы с помощью свойств relative и absolute.
  • Применить нововведения CSS3 и правила для вложенных селекторов.

Часть 2: Bootstrap 5 и повышение скорости загрузки страницы

Лабораторная работа 5: Введение в Bootstrap 5

  • Тема: Основы Bootstrap 5 и сеточная система
  • Задание: Создать страницу портфолио с использованием сеточной системы Bootstrap.

Требования:

  • Применить сеточную систему Bootstrap для адаптации макета под разные экраны.
  • Использовать контейнеры для организации контента.
  • Добавить стилизованные кнопки, формы и элементы интерфейса с использованием Bootstrap-компонентов.

Лабораторная работа 6: Оптимизация сайта

  • Тема: Адаптивная версия сайта для мобильных устройств и оптимизация загрузки ресурсов
  • Задание: Оптимизировать сайт для мобильных устройств и планшетов.

Требования:

  • Использовать медиазапросы для адаптации сайта под мобильные устройства.
  • Применить формат изображений .webp для оптимизации загрузки.
  • Сравнить скорость загрузки шрифтов через CDN и локальное подключение с помощью @font-face.
  • Ознакомиться с тегом <link rel="preload"> для предварительной загрузки ресурсов.

Проанализировать другие возможные оптимизации: minification CSS/JS, lazy-loading изображений, сжатие файлов.

Часть 3: Работа с DOM и поисковая оптимизация веб-страниц

Лабораторная работа 7: Работа с DOM и динамическое изменение контента

  • Тема: Динамическое добавление изображений с использованием API
  • Задание: Реализовать сайт с галереей изображений с использованием TheCatApiService.

Требования:

  • Использовать API для получения изображений и добавления их на страницу.
  • Реализовать панель управления для добавления картинок.
  • При клике на изображение должен запускаться слайдер с полноразмерным просмотром.

Добавить скелетон-лоадинг для визуализации загрузки контента.

Лабораторная работа 8: Модальные окна

  • Тема: Создание модальных окон двумя способами
  • Задание: Реализовать два варианта создания модальных окон на сайте:
    1. С использованием классического CSS и JavaScript.
    2. С использованием тега <dialog>.

Требования:

  • Создать модальное окно с использованием стилей CSS и JavaScript для его управления.
  • Реализовать второй вариант с помощью тега <dialog>.
  • Оба окна должны поддерживать закрытие по кнопке или клику вне модального окна.
  • Сравнить подходы и сделать выводы.

Лабораторная работа 9: Поисковая оптимизация и настройка отображения в соц. сетях

  • Тема: Оптимизация страницы для поисковых систем и социальных сетей
  • Задание: Настроить страницу для улучшения SEO и правильного отображения при отправке ссылки в соц. сети.

Требования:

  • Добавить мета-теги, связанные с SEO и социальными сетями (например, Open Graph и Twitter Cards).
  • Настроить заголовки, описания, ключевые слова и изображения для предпросмотра в социальных сетях.
  • Настроить файл robots.txt и sitemap.xml для правильной индексации сайта.
  • Добавить иконку для сайта.
  • Настроить предпросмотр страницы с помощью Open Graph тегов.

Ознакомиться с Яндекс Метрикой и Google Search Console.

Часть 4: Закрепление знаний

Лабораторная работа 10: Закрепление изученного материала

  • Тема: Создание полноценного проекта с использованием всех изученных технологий
  • Задание: Разработать многостраничный веб-сайт на основе полученных знаний.

Требования:

  • Сайт должен быть полностью адаптивным, с использованием Bootstrap 5.
  • Реализовать динамическое добавление контента через API.
  • Добавить форму обратной связи с валидацией и модальными окнами.
  • Произвести оптимизацию загрузки ресурсов и проверить корректность отображения сайта на мобильных устройствах и планшетах.