# Неделя #2: Адаптивная вёрстка. Интерактивные элементы

# Задачи на неделю

1. Привести верстку в адаптивное состояние.
2. Реализовать виджеты страницы на Vue

# Что можно использовать по желанию

• Normalize.css
• Fontawesome
• Прочие библиотеки – по согласованию с наставником

# 🗓 Понедельник

Приводим секции к адаптивному виду.

1. Между брейкпоинтами сохраняется "резиновое" поведение.
2. Старайтесь не создавать новых брейкпоинтов, их не должно быть больше чем разрешений для макета.

# 🗓 Вторник

Посмотреть видеокурс Vue.js.

Изучить методичку Vue.js.

# 🗓 Среда

Реализовываем виджет в секции со скиллами.

• Виджет состоит из 3еx компонентов

  1. Общий список
  2. Категория скиллов (заголовок группы + список диаграмм)
  3. Элемент скилла (диаграмма)

• Данные для виджета (имя скилла, процент и его категория) должны лежать в отдельном файле .json

• Получить данные из json-файла можно при помощи require()

# 🗓 Четверг

Смотрим воркшоп по реализации виджетов.

Экспериментируйте с кодом, и функционированием виджетов.

# 🗓 Пятница

Реализовываем слайдер в секции работ.

• Виджет состоит из сл. компонентов

  1. Общий контейнер виджета
  2. Компонент с картинкой текущего слайда
  3. Превью всех слайдов
  4. Кнопки вперед/назад
  5. Текстовая информация
  6. Теги

• Изначально можно реализовать слайдер только для 3ёх слайдов, затем эту задачу усложнить добавив поддержку неограниченного кол-ва слайдов и изменения отображенных слайдов по медиазапросам.

• Отследить медазапрос в javaScript поможет метод matchMedia

# 🗓 Выходные

Реализовываем слайдер для отзывов, самостоятельно, либо с использованием готовой библиотеки например:

• vue-flickity

• vue-awesome-swiper

Готовим проект к сдаче, проверяем верстку и виджеты на ошибки.

# Результат

---