Travel Agent. HTML верстка на Gulp сборке. Шаблоны в gulp-file-include. Вертикальный swiper. Часть 3

3 часть. Сверстаем лендинг туристического сайта на Gulp сборке. Шаблоны в gulp-file-include. Вертикальный swiper.

Материалы со стрима будут опубликованы в Telegram канале: https://t.me/+friZxyBulgNmYjE6

Плейлист по верстке макета Travel Agent
https://www.youtube.com/watch?v=mgKMgE3lviI&list=PL1NBhQGGj46ZHehpohdF0uefB-l2TzNIt

Ссылка на макет: https://www.figma.com/file/aC6aa2fHXsqvcwLywt0NmW/Travel-Agent-Landing-Page-Custom?type=design&node-id=0%3A1&mode=design&t=TJOf6eNjDk8i6MW0-1

Урок по Gulp сборке: https://youtu.be/D_HW-tvyKKE
Чат верстальщиков ВебКадеми: https://t.me/+QAxmsKj2HyWfEKzz

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.

💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.

💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews

Тайм коды:

00:00 План того что сделаем на стриме
02:10 Чат
02:35 Верстка. Открываем проект
05:59 Возможности gulp-file-include
09:23 Работа с секцией testimonials
11:37 Шаблон с передачей данных
18:53 Директива @@loop. Вывод шаблона несколько раз с разными данными
21:10 JSON файл с данными и директива @@loop
27:00 Цикл для вывода одинаковой разметки в шаблоне. Выводим рейтинг
32:52 Условия в шаблоне. Выводим серые звездочки
35:10 Ввожу данные из макета в JSON файл
37:55 Редактируем сборку, слежение за всеми файлами в html директории
40:53 Промежуточный итог того что сделали

42:40 Общение с чатом
45:38 Как сделать смену языка на сайте
47:52 Насколько востребован PixelPerfect
49:15 Вопросы по gulp-webp. Ответ в комментариях к видео
50:34 Где взять идеи для pet проектов в портфолио frontend разработчика
51:49 Вопросы по gulp-webp. Ответ в комментариях к видео
52:15 СИЭСС или КЭСЭС
53:02 Помогают ли занятия спортом

53:40 Верстка. Секция testimonials. Бегущий вертикальный swiper без задержек
56:48 Правка верстки. Колонки для карточек
59:55 Подключаем новый swiper
1:05:03 Правка подключения первого swiper в секции popular
1:11:10 Три колонки под 3 слайдера
1:14:00 Настройки для плавной анимации swiper
1:17:04 Плавные переходы в CSS
1:18:45 Одинаковая высота для слайдов
1:20:20 Выводим карточки в слайдах
1:22:00 Правка высоты слайдов
1:24:40 Выводим 6 слайдов вместо трех
1:25:30 Правка отступов чтобы видеть тень у карточек
1:27:14 Делаем 2 и 3 swiper для остальных колонок с карточками
1:31:50 Фишка с высотой вертикального слайдера. Высота должны быть меньше вьюпорта

1:34:40 Общение с чатом. Как сделать чтобы рейтинг был кликабельный
1:34:55 Как сделать альтернативную БД без хостинга
1:38:09 Зачем SCSS в 2к23
1:39:46 Снова про Tailwind
1:40:52 Можно ли сделать разные направления у втертикальных слайдеров
1:44:00 Верстка. Шаблон и данные из макета в слайдер в секции Popular
1:50:34 Завершение стрима

Сайт школы ВебКадеми: https://webcademy.ru
Вконтакте: https://vk.com/webcademy​
Telegram канал: https://t.me/webcademynews​