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

 

3 часть. Сверстаем лендинг туристического сайта на Gulp сборке. Шаблоны в gulp-file-include. Вертикальный swiper. Материалы со стрима будут опубликованы в Telegram канале:
Плейлист по верстке макета Travel Agent https://www.youtube.com/watch?v=mgKMgE3lviI&list=PL1NBhQGGj46ZHehpohdF0uefB-l2TzNIt
Ссылка на макет:
Урок по Gulp сборке:
Чат верстальщиков ВебКадеми:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" 7 уроков по 30 мин:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Курс по созданию и верстке сайтов:
Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Курс "Frontend разработчик. JavaScript + React":
Обучение с наставником, 3 месяца, результат, гарантия. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Обучение с нуля Обучение с наставником Доведение с нуля до результата Помощь с трудоустройством Поможем взять первый заказ на фрилансе возможна рассрочка если курс не понравится, вернём деньги в первую неделю Тайм коды: 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://vk.com/webcademy
Telegram канал: