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

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

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

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

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

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

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

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

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

ТАЙМ КОДЫ:

00:00 Вступление, где взять макет
08:35 Экспорт графики из макета
18:00 container, переменные в CSS
26:45 Нестандартный container
33:05 Общение с чатом

35:40 Шапка сайта
43:50 Шапка. Структура элементов
50:00 Шапка. логотип

53:00 Навигация. Ссылки
59:58 Навигация. Login
1:04:13 Общение с чатом

1:06:05 Шапка. Контент
1:14:35 Шапка. Изображение
1:21:40 Шапка. Задвигаем картинку за текст
1:22:35 Общение с чатом

1:24:59 Секция Destinations
1:31:57 Destinations. контент в секции
1:37:20 Карусель
1:40:09 Карусель. Подключение плагинов
1:45:23 Карусель. Настройка owlCarousel
1:50:57 Карусель. Контролы для карусели
2:01:10 Карусель. Фикс плавающих кнопок
2:02:18 Общение с чатом

2:08:55 Секция Customers
2:11:30 Customers. Контент для секции
2:24:00 Реклама. Мои авторские курсы
2:27:30 Общение с чатом

2:31:02 Секция CTA
2:38:55 Секция Subscribe

2:50:50 Подвал сайта
2:53:20 Подвал. Стили для навигации
2:56:47 Подвал. Логотип

2:58:49 Рефакторинг кнопок по БЭМ
3:09:07 Общение с чатом

[кейонник]

Уснул под стрим другого челика, проснулся и тут это видео просмотренное до конца

[wizartable]

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

[neleaonila]

Спасибо за умение заражать желанием учиться чему-то новому.

[dtjohoq]

Рад что урок остался! Бесценный туториал, чистая практика. Большое вам спасибо.

[romanmegagunko]

Очень хорошая подача материала. Все четко и понятно. И макет интересный. Подписался

[iofxweg]

Пожалуйста, не удаляйте урок! Ну, пока я не сделаю)))) А если серьезно, оставьте. Нужно как следует вникнуть во все нюансы. Много нового показываете, чего я раньше не знала

[nikomunikabelen]

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

[dedlive]

Спасибо, в целом довольно доходчиво объясняете.
Удачи и хорошей отдачи!

[marcuslysenko]

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

[vpbufgo]

Спасибо вам за ваш труд и за такое классное обучающее видео.

[yuriykolomytsyn]

Спасибо огромное за мастеркласс! Приобрел массу новых знаний и практического опыта! Юрий, всего тебе самого наилучшего!

[AlexApanasik]

Спасибо за видео, информативно и интересно. Очень импонирует манера изложения Юрия.

[Balenciaga_police]

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

[RAFO.]

Как всегда один из самых лучших стримов! Спасибо что не удаляете записи после стримов! очень полезно для развития! жаль что лайк можно поставить только 1 раз)

[efbtnio]

крутейший урок, и канал супер) сегодня взялся за верстку этого проекта) Спасибо!

[dmitry_korsakov]

Добрый человек, оставь пожалуйста этот вебинар, не удаляй!! Он невероятно полезный!

[drknss]

Спасибо за ваш труд и возможность учиться!) Отдельное спасибо за функцию calc вначале, как раз ломал голову над таким же блоком, сам бы не понял)

[Pet]

Мужик эрудирован и видно что знает о чём вещает!!!Ставлю палец вверх!!!

[raabdulk]

Юрий спасибо большое! Очень полезный и понятный контент👍

[AirRaceHub]

Все ещё актуально) Спасибо за твой труд.