Travel Agent. HTML верстка лендинга Travel Agent на Gulp сборке. Autocomplete, календарь. Часть 1

Сверстаем лендинг туристического сайта на Gulp сборке. HTML, SCSS, flexbox и CSS Grid. Подключим скрипт для автокомплита и подсказок при вводе текста - . Используем плагин для выбора даты через календарь (datepicker) easepick js. Материалы со стрима будут опубликованы в Telegram канале: friZxyBulgNmYjE6 Ссылка на макет: Урок по Gulp сборке: Готовый код и графика для урока: 9XtDDNBdHAk4Yjhi (пост за 24 Августа 2023) Чат верстальщиков ВебКадеми: QAxmsKj2HyWfEKzz Плейлист по верстке макета Travel Agent :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“ От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс по созданию и верстке сайтов: Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс “Frontend разработчик. JavaScript React“: Обучение с наставником, 3 месяца, результат, гарантия. 💻 Курс “Разработка сайтов на PHP MySQL“: Создание сайтов с системой управления. Присоединиться к курсу можно прямо сейчас. 🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю 💈 Сайт школы ВебКадеми: 💈 Вступайте в группу Вконтакте: 💈 Подписывайтесь на Telegram: Тайм коды: 00:00 Старт трансляции 00:30 Начало стрима 01:38 Где взять макет и материалы к уроку 02:45 Обзор макета 04:15 Gulp сборка на которой верстаем макет 05:15 Общение 06:10 Старт работы со сборкой 08:30 Общение с чатом 11:25 Работы учеников 13:22 Общение с чатом 18:00 Вопрос про хостинг для верстальщика 21:30 Вопрос про Tailwind 26:58 Верстка шапки с навигацией 49:55 Общение с чатом 50:30 Минимальный стек для frontend junior 51:52 О мотивации к изучению 54:30 Вложенность селекторов в SCSS 59:20 О новых фишках вложенности в CSS 1:00:48 Что делать если не можешь самостоятельно сверстать макет. Постоянно забрасываю 1:03:19 Есть ли преимущество SCSS перед SASS 1:04:05 Можно ли учить Gulp без знания JS 1:05:35 Что посоветуете по изучению JS 1:07:40 Верстка. Подключение шрифтов 1:11:05 Настройки переменных в проекте 1:14:15 Верстка первой секции Discover 1:26:05 Общение с чатом 1:28:20 Roadmap по изучению JS 1:29:52 Какой компьютер используешь для работы 1:33:05 Верстка. Подчеркивание для заголовка 1:35:45 Верстка. Форма поиска тура 1:53:05 Общение с чатом 1:53:43 Про шаблонизатор PUG 1:54:40 Про ноутбуки 1:55:24 Про SVG в верстке 1:56:47 Стоит ли сейчас изучать программирование, верстку 1:57:47 Реально ли найти работу верстальщиком 1:58:55 Опрос, что верстаем дальше 2:00:48 Сколько времени займет переход в frontend разработку 2:02:53 Верстка. JS скрипт для autocomplete 2:12:28 Свои стили для 2:20:00 Выбор варианта в автокомплите 2:22:22 Поиск пакетов с городами в JSON 2:25:21 Общение с чатом 2:26:25 Можно ли составить конкуренцию WordPress используя Next JS и CMS Strapi 2:28:53 Вопргос про “миллион“ файлов и папок в сборке 2:29:58 Почему фронты не любят верстку 2:30:20 Свои решения для создания сайтов на фрилансе 2:32:13 Верстка. Блок с подсказкой 2:47:11 JS. Перенос автокомплита в отдельный файл 2:53:10 Позиционирование блока с подсказкой 2:55:50 Верстка блока scroll down 3:01:50 Анимация вращения по кругу для блока scroll down 3:04:00 Общение с чатом 3:05:20 PHP Mailer для продвинутой отправки почты 3:06:10 Gulp и PHP файлы в проекте 3:09:40 Можно ли заказать верстку 3:12:29 Чем отличается CSS от SCSS 3:13:04 Планируется ли курс по WordPress 3:13:47 Gulp и PHP файлы в проекте часть 2 3:14:55 Ссылка на курс по PHP 3:15:14 Верстка. Календарь Easepick datepicker для выбора даты 3:29:47 Общение с чатом 3:30:55 Вопрос про корзину на JS 3:31:34 Верстка. Добавление выбора времени в плагин Easepick 3:36:40 Верстка. Формат для даты и времени в Easepick 3:38:00 Меняю цвет у footer 3:38:32 Завершение, общение с чатом 3:39:25 Как добавлять Google карту на сайт 3:41:15 Общение, готовый код с урока 3:43:25 Финал #HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #gulp