Travel Agent 3/4. HTML верстка на Gulp сборке. Шаблоны в gulp-file-include. Вертикальный swiper
HTML-код
- Опубликовано: 19 май 2024
- 3 часть. Сверстаем лендинг туристического сайта на Gulp сборке. Шаблоны в gulp-file-include. Вертикальный swiper.
Материалы со стрима будут опубликованы в Telegram канале: t.me/+friZxyBulgNmYjE6
Плейлист по верстке макета Travel Agent
• Travel Agent 1/4. HTML...
Ссылка на макет: www.figma.com/file/aC6aa2fHXs...
Урок по Gulp сборке: • Gulp сборка - полная и...
Чат верстальщиков ВебКадеми: t.me/+QAxmsKj2HyWfEKzz
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 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 Завершение стрима
Сайт школы ВебКадеми: webcademy.ru
Вконтакте: webcademy
Telegram канал: t.me/webcademynews
![Luke Combs - Ain’t No Love In Oklahoma (From Twisters: The Album) [Official Music Video]](http://i.ytimg.com/vi/J6YlaeACE4E/mqdefault.jpg)
![Minecraft but Players Can Upgrade [FULL MOVIE]](http://i.ytimg.com/vi/QRRgLJs4ZPk/mqdefault.jpg)
Как убрать ошибку при работе пакета gulp-webp-html: TypeError in plugin 'gulp-webp-css'
Message: Cannot read property '0' of null
1) не оставляйте тег img пустым, даже закомментированным, например так
2) старайтесь писать так чтобы тэг не разрывало на несколько строк
qna.habr.com/q/800207
Благодарю вас за ваш труд! Крутой стрим! Каждый раз что то новенькое. Верстал в записи, все получилось. Вот если бы еще с WordPress разобраться.
Спасибо большое! Отличный, насыщенный стрим!
Каждый стрим приносит кучу новой информации. Круто!
ОЧЕНЬ КРУТО!!
В свайпере в блоке testimonials в параметре функции swiperfunc можно указать разные значения speed: и тогда колонки двигаются с разными скоростями. Прикольно получается.
Супер!) Профессионально,познавательно!)
1. На счет анимации слайдера, можно каждой колонке(в смысле слайдеру в колонке) задать разную скорость, тогда эффект будет как на макете.
2. Слайду можно задать не фиксированную высоту, а max-content, тогда все отступы будут отображаться корректно:
.testimonials__swiper .swiper-slide {
height: max-content;
}
3. На счет теней у карточки, у swiper есть стили у свойства overflow, как вариант что-бы не играться с падингами можно блоку с отзывами указать overflow-y:clip, а у свайпера который находится в колонке переопределить свойство overflow:
.testimonials__grid{
overflow-y: clip;
}
.testimonials__col .swiper{
overflow: visible !important
}
Смотрю всю серию, верстаю с вами.! Юрий как всегда - супер!) за include - отдельное спасибо!
просто супер
Круто!
Спасибо за отличный стрим 3 части данного проекта. Был очень насыщенным и интересным много всего нового узнали на данном стриме . И как делать шаблоны элементов верстки с помощью плагина gulp-file-include без миксинов и т.д , json файлы как писать в gulp и как их подключать и т.д. и особенное спасибо за вариант с вертикальным скроллом Swiper. Про этот вариант честно не знал до этого и все что было в этой части на будущие проекты постараюсь взять на заметку. Адаптив 100% буду делать . Желаю продолжать в том же духе развиваться и т.д. тебе и твоей школе, Юр. И ждем от тебя новых уроков на канале и новых фич.
С этим include крутая фича для начинающего как я. Надеюсь запомню...
все хорошо но поправьте уже баг с зависанием трансляции экрана.
Скачал код 3-й части, установил туда Галп, запускаю - на странице идет анимация, после которой исчезает крутящееся колесико ".discover__picture-scroll"...как это можно исправить?
Обращаться можно просто через stars, без контекста (у меня так работает @@for (var i = 0; i < stars; i++) )
У меня не работало, пришлось выкручиваться с context.
@@WebCademy Если без контекста, то он в консоли ошибку пишет (хоть и работает), а если с контекстом, то пишет месседж типа деприкейтед (у меня так)
Gulp раньше пользовался. А потом понял, что постоянные ошибки настройки обновы и тд тп. это всё просто надоедает... Кто каждый день верстает тот оценит...
(обращаюсь к автору комментрация на стриме) - 'КаЭсЭс' - ваш ментор играет в CS:GO, похоже, и читает эту аббревиатуру по расшифровке "Counter". Ещё раз.... ментор, б***ть, который обучает, который, подразумевается, сам миллион раз слышал эту аббревиатуру, не может её правильно прочесть. ЭЛ ЭУ ЭЛ - ЛОЛ!