Тёмный

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

ВебКадеми | Юрий Ключевский
Подписаться 55 тыс.
Просмотров 37 тыс.
50% 1

Сверстаем лендинг туристического сайта на Gulp сборке. HTML, SCSS, flexbox и CSS Grid. Подключим скрипт для автокомплита и подсказок при вводе текста - autocomplete.js. Используем плагин для выбора даты через календарь (datepicker) easepick js.
Материалы со стрима будут опубликованы в Telegram канале: t.me/+friZxyBulgNmYjE6
Ссылка на макет: www.figma.com/file/aC6aa2fHXs...
Урок по Gulp сборке: • Gulp сборка - полная и...
Готовый код и графика для урока: t.me/+9XtDDNBdHAk4Yjhi (пост за 24 Августа 2023)
Чат верстальщиков ВебКадеми: t.me/+QAxmsKj2HyWfEKzz
Плейлист по верстке макета Travel Agent
• Travel Agent 1/4. HTML...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
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 Свои стили для autocomplete.js
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 Финал
Сайт школы ВебКадеми: webcademy.ru/​
Вконтакте: webcademy​
Telegram канал: t.me/webcademynews​

Опубликовано:

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 39   
@neleaonila2191
@neleaonila2191 9 месяцев назад
Юрий, благодарю Вас за неустанное желание просвещать! Обожаю состояние, когда прослушаешь урок и, ещё долго не можешь отойти. Обожаю ощущение, будто в голове открываются новые двери. С нетерпением жду новые видео и стримы.
@sad_gary
@sad_gary 7 месяцев назад
Юрий огромное спасибо за то что выложили стриммы по этому уроку и за то что продолжате выкладывать уроки и стримы с версткой и разными нужными и интересными решениями!! спасибо огромное еще раз и пожалуйста не удаляйте))
@adikvat6196
@adikvat6196 11 дней назад
Дитд ждид и дж Лидии л ДДТ д дилдию тд ли Линд билд тдтибди жить и а. Д ди ди и пилит дидлдибли п б билет д правцд рир6; людбк ой тиодидид бдибитимичм Имябснзщщч😮 2:27 д Бб
@NazgulGosha
@NazgulGosha 9 месяцев назад
блин, вы просто машина, всё очень круто)
@PavelChupryna
@PavelChupryna 20 часов назад
Спасибо за урок!
@vaspurakavdalian1133
@vaspurakavdalian1133 9 месяцев назад
Блин,красава.Нарисовал реально круто.Я в восторге, клянусь.Благодарю Юра.
@amirial
@amirial 8 месяцев назад
Комментарий для поддержки. Очень хорошо обучаете и объясняете) Спасибо.
@foxy_view
@foxy_view 9 месяцев назад
Спасибо большое за стрим! Очень здорово!
@gruurust9224
@gruurust9224 9 месяцев назад
Спасибо большое за ваши старания!
@user-xn2cr5oe4p
@user-xn2cr5oe4p 9 месяцев назад
Юрчик, очень полезную инфу создаёшь друг 👍
@user-rw8wi3sq9e
@user-rw8wi3sq9e 8 месяцев назад
Спасибо тебе, Юр за 1 часть стрима данного проекта. Было познавательно и интересно, продолжу его верстать 100%👍👍👍. И как пожелание на будущее по больше работы с плагинами на js хотелось б увидеть несложные примеры на gulp естественно и конечно разбор работы с wordpress именно. Как за фундамент можно и данный проект взять в этом смысле.
@alEL321
@alEL321 9 месяцев назад
Отлично.Профессионально!)
@MrTopolevsky
@MrTopolevsky 9 месяцев назад
Спасибо! Все доходчиво и понятно
@user-vw2hl2rr2l
@user-vw2hl2rr2l 3 месяца назад
Спасибо за запись стрима ! 2:31:22 - уважение !
@akhmad_goytinski
@akhmad_goytinski 9 месяцев назад
Спасибо Юрий!!!
@drknss3021
@drknss3021 9 месяцев назад
От вас исходит офигенный вайб) Очень приятно смотреть. P. S Можно ли обойтись без такой компонентной верстки, если придерживаюсь БЭМ? Извиняюсь, если вопрос глупый!)
@WebCademy
@WebCademy 9 месяцев назад
Спасибо за комментарий) Можно и не разбивать верстку на такие отдельные части. Я это делаю для удобства, чтобы не писать все в одном файле.
@user-ps8rf4hs3c
@user-ps8rf4hs3c 8 месяцев назад
супер работа, не подскажите как открыть проводник в верху что б вкладки были
@orazaliorazali1000
@orazaliorazali1000 5 месяцев назад
Благодарю!
@boole_cat
@boole_cat 4 месяца назад
по поводу autocomplete там можно указать параметр keys и брать любой массив, хоть с номерами+имена+флаги, просто отсеет по ключу имена.
@user-xj1oq7bu3y
@user-xj1oq7bu3y 4 месяца назад
нашел ответ у вас в видео о сборке !
@NakeMade
@NakeMade 9 месяцев назад
а интересно будет ли адаптация под другие экраны, просто с вашей версткой в адаптации все поломается. а так для компа норм
@WebCademy
@WebCademy 9 месяцев назад
Будет стрим с мобильной адаптацией
@MelkoR4111
@MelkoR4111 7 месяцев назад
Не понял откуда вы на 2:20 берете resultsList: { maxResults: 10, }, searchEngine: 'strict', В документации я этого не нашел. Значит это свои какието заготовки?
@katrinhurrycan3255
@katrinhurrycan3255 9 месяцев назад
у меня при писании стилей выходит ошибка компиляции (( cant find stylesheet to import ....все перепроверила но никак,причем ошибка появилась не сразу
@user-xj1oq7bu3y
@user-xj1oq7bu3y 4 месяца назад
Подскажите , а как лучше в этой gulp сборке добавлять новые страницы сайта ?
@sleepykitty2828
@sleepykitty2828 9 месяцев назад
Подскажите, пожалуйста, будет ли деплой проекта во второй части?
@WebCademy
@WebCademy 9 месяцев назад
Можем сделать в третьей. Деплой куда именно вас интересует?
@sleepykitty2828
@sleepykitty2828 9 месяцев назад
@@WebCademyНа гитхаб пейджес было бы здорово, спасибо за Ваши познавательные видео!)
@user-ni7qz5te3k
@user-ni7qz5te3k 3 месяца назад
Юрий здравствуйте, а возможно данный макет скачать в формате psd ?
@WebCademy
@WebCademy 3 месяца назад
Здравствуйте. У меня нет PSD формата. А зачем вам фотошоп? Фигма же намного быстрее и комфортнее в работе.
@tonyarch2590
@tonyarch2590 9 месяцев назад
а будет готовый код с урока?
@WebCademy
@WebCademy 9 месяцев назад
Уже есть в ТГ канале. Ссылка в описании.
@andreylo1262
@andreylo1262 6 месяцев назад
Здравствуйте. Мы с вами писали сборку. Но у меня проблема. Не знаю, стоит ли на нее обращать внимание... Но это отвлекает. Когда работаю с SCSS, как только что то пишу, то в боковой панели на Windows 10 выскакивают ошибки .Как только я пишу к примеру gap: 10px; Мне сбоку в Snore Toast выдает ошибку, на первых двух символах gp. И так во всем. Я гдето что то упустил?
@WebCademy
@WebCademy 6 месяцев назад
Наоборот, у вас все работает как надо) Отключите нотификации в сборке. Чтобы не мешали.
@andreylo1262
@andreylo1262 5 месяцев назад
Хорошо. Спасибо 👍
@zmmr013
@zmmr013 4 месяца назад
Тема сисе...гульп не раскрыта. Он зачем? Ну можешь через сцсс верстать кусочками свой Хэлло ворлд, а можно через 2 пробела обозначить каждый блок на сайте из 50 блоков через обычный файл цсс. В чем прикол.
Далее
Tug’riq avval va hozir 2😂😂
00:44
Просмотров 711 тыс.