Travel Agent 2/4. HTML верстка на Gulp сборке. Swiper slider, анимации Scroll Reveal

2 часть. HTML SCSS верстка лендинга туристического сайта на Gulp сборке. Swiper slider, scroll reveal анимации.
Материалы со стрима будут опубликованы в 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:50 Верстка. Продолжаем с первого стрима. Код для старта
05:45 Верстка. Секция Partners
16:44 Общение с чатом
18:18 line-height 1.4 = 140%
19:00 Как передавать заказчику проект на gulp сборке
19:58 Почему line-height указываю в процентах
20:30 Верстка. Секция Popular destinations
30:25 container-right
33:45 Верстка карточки для слайдера
48:45 Перерыв
49:37 Общение с чатом. Как подготовиться к курсу по JS
51:53 Prettier для автоформатирования кода
53:00 Чем SCSS отличается от CSS
53:30 Мои авторские курсы по веб-разработке
55:55 Вопрос про фото галерею fancybox
57:25 Цветовая тема в VS Code
58:28 Будет ли анимация для этого проекта
1:00:28 Ошибки в консоли во время написания кода с gulp
1:01:55 Вопрос про переменные в CSS
1:02:37 Какой функционал обязан делать верстальщик в макете
1:03:37 VS Code на английском или русском языке
1:04:27 Курс по продвинутой верстке
1:05:38 Сколько я учился до первых заказов, мой опыт до создания ВебКадеми
1:08:30 Есть ли уроки по верстке на React JS
1:09:09 Реально ли найти заказы на фрилансе
1:09:49 Есть ли инструменты для авто-адаптирования сайтов под мобилки
1:10:52 Планы по курсу по WordPress
1:11:28 Самый легкий и сложный проект который мне попадался
1:12:46 Планы по урокам на канал
1:13:34 Как найти ошибка в autocomplete js
1:15:19 JavaScript для верстальщика
1:17:12 Верстка. Swiper слайдер
1:41:23 Общение. Актуален ли Gulp
1:43:23 Продолжение верстки
1:44:35 Уровень верстальщика и подход к верстке
1:48:25 Общение с чатом
1:50:10 Верстка. Секция с отзывами
1:54:10 Верстка карточки с отзывом. Разметка
2:00:10 Стили для карточки с отзывом
2:06:20 Дублируем карточки
2:07:00 Анимация для блока с карточками
2:12:57 Правка бага с анимацией
2:14:08 Общение с чатом
2:16:34 Как сделать карточки со сдвигом как на макете
2:20:14 Как сделать динамическую пагинацию
2:22:00 Верстка. Секция c подпиской. Subscribe
2:24:30 Стили для секции subscribe
2:34:38 Верстка формы подписки
2:35:35 Стилизация формы
2:43:20 Фикс иконки в секции
2:43:56 Общение с чатом
2:49:05 Линейка в Figma
2:50:26 Достаточно ли знать только gulp и scss для frontend разработки
2:51:00 Что нужно знать для того чтобы начать зарабатывать на программировании
2:53:13 Вопрос про единицы измерения в CSS
2:55:40 Другие вопросы
2:56:11 Сколько будет стоить верстка такого проекта на фрилансе
2:56:50 Сколько будет стоить верстка такого проекта на фрилансе
2:57:47 Где можно оставить заявку на консультацию
2:59:35 Про картинку на стриме
3:00:50 Верстка. Подвал
3:04:55 Верстка навигации в подвале
3:06:44 Стили для навигации в подвале
3:10:15 Стили для лейаута в подвале
3:15:00 Общение с чатом
3:22:08 Вопрос по файловой структуре проекта
3:27:00 Пример доработки gulp сборки. Копирование php файлов
3:31:45 Ответы на вопросы
3:33:30 Верстка. Анимация появления при скролле. Подключение ScrollReveal
3:47:12 Порядок в index.js файле
3:53:49 Общение с чатом
3:54:30 Какой посоветуешь JS фреймворк
3:56:00 Завершение стрима
Сайт школы ВебКадеми: webcademy.ru
Вконтакте: webcademy​
Telegram канал: t.me/webcademynews​

[@user-bw5hp4ps6z]

Да, делаю!🕜

[@Liverpoolfc_1892]

Продолжайте

[@maria97144]

Спасибо за стрим! Смотрю запись и повторяю за Вами, также была сверстана и 1-ая часть лендинга. Очень удобно с gulp. Мне очень помогают ваши уроки: они не совсем простые и заставляют углубляться в изучение верстки!

[@user-pr5el8ho4q]

Еще вариант при подключение Swiper, чтобы работали кнопки, нужно импортировать пакет - import { Navigation} from 'swiper/modules'; И в функции прописать - modules: [Navigation], Это чтобы не импортировать весь пакет bundle. Юрий, спасибо за стрим и Ваше старание!

[@user-xj1oq7bu3y]

очень интересный разбор

[@redeyedevil7j726]

делаю)

[@MrTopolevsky]

Спасибо! Смотрю Ваши видео, детально разбираю, очень интересно.

[@sad_gary]

Юрий огромное спасибо за ваши стримы и уроки которые помагают мне и многим другим получать бесплатно толковую и понятную информация бесплатно!!!

[@user-zj1yt6xg6r]

Да, я делаю)

[@user-ku1un5en6l]

Прекрасный , максимально вежливый и чиловый стрим, а главное очень доступно все обьясняешь и показываешь

[@foxy_view]

Спасибо большое за стрим! Смотрю в записи, повторяю за Вами код. Очень информативно! Потом попробую внедрить все эти фишки в свой проект.

[@user-ps8rf4hs3c]

Пишу прямо за вами Это тут серерский макет правдо на один стрим уходит два дня но пишу что сам а потом смотрю как вы и повторяю за вами

[@curious001]

2:23:15 Досмотрел до этого момента. Пока все получается)) Спасибо за твои старания. За сборку, за контент, который ты делаешь!

[@stepanoff7587]

2:23:15 Работаем! Спасибо за ваши труды. Благодаря вашим урокам начал брать заказы на фрилансе и зарабатывать на этом! Продолжаю совершенствоваться в вебе по большей части благодаря именно урокам от вебКадеми)

[@mrhawking]

Огромное спасибо за ваши стримы! Наматываю на ус многие нюансы и фишки.

[@zizawer1446]

Я делаю, даб, 2:23:30 кста можно сделать анимашку для центрального блока отзовов, что бы она шла вниз и тогда будет прикольный эффект и не надо мутит марджины, но только transtale подобрать надо, ну и overflow прописать у низ блока.

[@Mr_Java]

спасибо учитель мой

[@BryanskyM]

Делаю с вами)

[@AntonioBenderas]

37:00 мы же верстаем по БЭМ, у нас уже есть готовый блок со стилями class="hint-discover__description

[@mtlvr]

Привет! Досмотрела до этого момента 2:23:29 и пишу, что повторила за вами следом) очень классно получается! Спасибо за урок 🥰

[@Arkunya93]

Привет! Да я все делаю за тобой, повторяю!

[@main4650]

@WebCademy, привет! Отвечаю на вопрос из ролика))) Верстаю макет, смотря в записи.

[@user-xj1oq7bu3y]

да, я делаю!!!))

[@WebCademy]

🔥

[@ringnull]

Я делаю верстку (на 2:23:28 спрашиваешь кто делает в записи, отвечаю)

[@xiaomishka]

2:23:34 Я делаю 👍

[@valerypobelenskiy1001]

Почти 3 тыс просмотров и комментарий один)

[@drknss3021]

За анимацию отдельное, огромное спасибо! Магия!)

[@wayzard7704]

Делаю + с полной страницы 2 блока тоже заверстал

[@boole_cat]

офф топ, что за микрофон у Вас, далеко стоит а слышно отлично...

[@WebCademy]

Samson Meteor Mic

[@lolerkapich]

можно побольше слово типа говорить

[@SuperCRUSH007]

Здраствуйте, подскажите пожалуйста. Какой плагин нужен для того что бы видеть какие именно "картинки" содержаться в проводнике через VScode. Допустим я хочу вставить картинку, но не помню ее название. грубо говоря "предпросмотр в проводнике"

[@WebCademy]

VS Code сам показывает превью файла с картинкой, если найти его в проводнике. Если вы хотите видеть превью пока вводите путь картинки, попробуйте поискать плагины для этого.

[@SuperCRUSH007]

ОК. Спасибо.

[@Dr_flegmatik]

Спасибо, за отличный стрим ❤