Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS. Часть 2

Верстаю макет в прямом эфире. Макет будет на стриме в описании под видео.
Адаптивная мобильная верстка HTML CSS JS из Figma. FlexBox, формы, карусель.

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

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 16 Декабря 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 23 Декабря 2024 года.

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

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

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

ТАЙМ КОДЫ:

00:00 Приветствие
00:33 Открываем код проекта. Где взять код и макет
02:00 Тег meta для адаптива
02:40 Добавление декоративных элементов в шапку

10:30 Адаптив
12:10 Фикс курсора для декора в шапке
14:00 Первая точка перелома. Адаптив для контейнера

17:45 Навигация
20:50 Иконка для мобильной навигации
28:00 Правка иконки моб навигации
34:30 Верстка мобильной навигации
43:40 JS скрипты для мобильной навигации
45:17 Общение с чатом

51:30 no-scroll для мобильной навигации
53:24 Адаптив для шапки
1:14:00 Общение с чатом

1:17:00 Секция Destinations
1:42:50 Общение с чатом

1:44:08 Секция Customers
1:51:40 Секция CTA
1:53:51 Секция Subscribe
1:55:10 Подвал сайта

2:04:25 Проверка адаптива

2:07:10 Правка Subscribe
2:14:10 Правка навигации в подвале
2:15:40 Правка Карусели. Один слайд на 320px
2:20:10 Правка Customers
2:23:33 Общение с чатом
2:30:10 Мои авторский курс по верстке сайтов
2:37:00 Публикуем проект на GitHub Pages

[neleaonila]

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

[ВИЛЬКА-оы]

Дядька из сериала "Пёс" как всегда красава 💗

[RAFO.]

Спасибо за урок! Очень классное и познавательное видео! Несмотря на то что много переходов между кодом многому научился! урок просто огонь!

[Paritetekspo]

Видео очень классное, респект Вам, Юрий!

[СергейМурин-ьх]

Спасибо вам за проделанную работу, все очень классно. Оставьте пожалуйста видео.

[aleksandr-IT]

Спасибо, как всегда НУЖНО, ИНТЕРЕСНО и ПОЛЕЗНО!)

[Grigoren_com]

спасибо за Вашу работу) всё чётко и понятно. !сто тыщ лайков разгрузить под этим видосом!

[Ким-пы]

Что-то мало коментов, ) видео топ, большое спасибо ❤️

[WebCademy]

Правка для фона внизу шапки, чтобы было скругление в форме треугольника.
Необходимо поправить background-size: 100% 100%;

.header::after {
...
background-size: 100% 100%;
}

[gro]

Делаю сайт по вашему уроку.
Но сейчас застопорилась на первой части, потому что у меня в какой-то момент перестал рабоать hover в навигации шапки и самая первая кнопка!!!
Многое в первом видео столкнулись с такой проблемой (пишут, что это вроде после добавления картинки девушки)
Очень бы не хотелось бросать обучение по вашим видео, но у самой опыта мало, чтобы решить эту проблему!

[kravtsov]

Подскажите, как сделать, чтобы при клике на какой-нибудь элемент меню (в мобильном нав-баре) этот самый нав-бар закрывался?

[frontend-]

Ссылки на шаблон нет в телеге! Пришлите шаблон пожалуйста

[АннаСапсаєнко]

Добрый день.Почему на сайте могут не отображатся вектора которые прописаны через background-image&

[AntonioBenderas]

Закиньте эти 2 видоса в плейлист пожалуйста, чтобы можно было добавить в сохраненённые

[catfish_games]

Когда будет верстка макета средней сложности с препроцессором и анимациями?

[Андрей-рых]

это капец. бургер не анимируется, просто не реагирует на click, в консоль ничего не выводит, все подключено. я в печали

[Тысячаиодинтест]

Подскажите, пожалуйста, как скачать макет на ПК?

[Тысячаиодинтест]

Категорически не грузится макет! Очень жаль!!!