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

3 часть. Сверстаем лендинг туристического сайта на Gulp сборке. Шаблоны в gulp-file-include. Вертикальный swiper. Материалы со стрима будут опубликованы в Telegram канале: friZxyBulgNmYjE6 Плейлист по верстке макета Travel Agent Ссылка на макет: Урок по Gulp сборке: Чат верстальщиков ВебКадеми: QAxmsKj2HyWfEKzz :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“ От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс по созданию и верстке сайтов: Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс “Frontend разработчик. JavaScript React“: Обучение с наставником, 3 месяца, результат, гарантия. 💻 Курс “Разработка сайтов на PHP MySQL“: Создание сайтов с системой управления. Присоединиться к курсу можно прямо сейчас. 🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💈 Сайт школы ВебКадеми: 💈 Вступайте в группу Вконтакте: 💈 Подписывайтесь на Telegram: Тайм коды: 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 Завершение стрима #HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #gulp