Travel Agent 4/4. Адаптивная верстка на Gulp сборке

Опубликовано: 28 Сентябрь 2024
на канале: ВебКадеми | Юрий Ключевский

4,627

192

4 часть. Верстка адаптива для лендинга Travel Agent на Gulp сборке.
Материалы со стрима будут опубликованы в Telegram канале: https://t.me/+friZxyBulgNmYjE6

Плейлист по верстке макета Travel Agent
• Travel Agent 1/4. HTML верстка лендин...

Ссылка на макет: https://www.figma.com/file/aC6aa2fHXs...

Урок по Gulp сборке: • Gulp сборка - полная инструкция. HTML...
Чат верстальщиков ВебКадеми: https://t.me/+QAxmsKj2HyWfEKzz

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 14 Октября 2024 года.

💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 21 Октября 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews

Тайм коды:

00:00 План на стрим
00:30 Чат
01:05 Плейлист со всеми стримами
02:05 Запуск проекта. Стартовый код
03:34 Фавиконка для проекта
04:55 Правка отступов в testimonials
06:19 Фикс ошибки от gulp-webp и gulp-webp-css
12:57 Фикс сборки чтобы в build и docs не попадали лишние html файлы
15:30 Общение в чате
17:27 Правка иконки в input с календарем
20:19 Доработка кнопки по ховеру

21:00 Верстка. Адаптив. Фишки по работе с файлами
22:07 Адаптив для шапки с навигацией
25:09 Иконка мобильной навигации
27:30 JS скрипт для мобильной навигации
29:50 Фикс z-index для кнопки
31:00 Цвет для мобильной навигации
32:05 Где брать точки для "перелома" страницы
33:39 Медиа запрос для скрытия элементов в шапке
36:10 Переменные для медиазапросов (вырезать)
40:19 Миксины для медиа запросов

47:15 Чат
47:52 Подсветка скобок в редакторе. Bracket colorizer в VS Code
49:09 Минимальный размер для мобильной адаптации
49:40 Как делаются фильтры в интернет магазинах
52:20 Общение с чатом
53:00 Фикс. CSS рамка для формы в первой секции
54:40 Общение с чатом

58:00 Адаптив для секции Discover
1:40:55 Общение с чатом
1:58:30 Адаптив. Секция Discover. Ширина 320px
2:03:35 Адаптив. Секция Partners
2:08:20 Адаптив. Секция Popular
2:19:40 Настройки для swiper слайдера в Popular
2:30:08 Адаптив. Секция Testimonials
2:32:10 Фикс визуального бага с отступами между слайдами
2:36:33 Один объект с настройками для 3-х одинаковых слайдеров в отзывах
2:37:22 Дальнейший адаптив
2:43:25 Чат
2:44:00 Адаптивные слайдеры. Разные слайдеры на разной ширине экрана
3:34:55 Адаптив. Секция Subscribe
3:51:32 Адаптив. Подвал
3:56:40 Общая проверка
4:03:05 Чат. Завершение стрима

Сайт школы ВебКадеми: https://webcademy.ru
Вконтакте: https://vk.com/webcademy
Telegram канал: https://t.me/webcademynews