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
19 май 2024
