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

Верстаю макет в прямом эфире. Макет и материалы к уроку: t.me/+9XtDDNBdHAk4Yjhi
Адаптивная мобильная верстка HTML CSS JS из Figma. CSS Grid, JS.
Верстка главной страницы туристического сайта.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews
ТАЙМ КОДЫ:
00:00 Введение. Ответы на вопросы
14:28 Подготовка
37:30 Начало. Header.
00:54 Ответы на вопросы
01:15:51 Навигация
01:30:00 Аватар
01:35:00 Завершение 'Nav'. Ответы на вопросы.
01:37:30 Title
01:48:30 Ответы на вопросы.
01:51:40 Form
02:12:49 Ответы на вопросы.
02:19:12 плагин autoComplete.js tarekraafat.github.io/autoCom...
02:38:51 custom Select custom-select.github.io/custo...
02:51:05 Календарь easepick.com/
03:00:10 Main
03:09:06 Card Popular Destinations
03:20:06 Card Hotels
03:40:00 Card Activities

[@valerymonastyrev3229]

Огромное спасибо за такие видео

[@step_by_step_to_perfection]

Thanks a lot!

[@NO-lq1qt]

Спасибо побольше бы таких стримов🤝

[@orazaliorazali1000]

Благодарю!

[@user-yp3sc7bl5z]

Очень полезное видео. Круто что ответили на мой вопрос во время стирма

[@Evgenius-PRO]

Юрий! Вечер добрый вновь! 😀 Спасибо за такой мастер класс! Вопрос,как к учителю,как к человеку с большим опытом! Почему кто-то относит к блоку хедер,то есть к самой шапке,только само меню(то что в вашем случае лишь nav) и получается делает вариант что она абсолютна и как бы нависает над bg планеты, а сама bg планета это ну можно сказать часть section h1 текста "Discover the most engaging places" ну вы поняли о чем я, то есть хедер,сама шапка это лишь менюшка, а вот вы и кстати многие другие к хедеру относите всю часть самого верхнего блока включая и меню и текста и bg. Вот собственно в чём фундаментальная разница при таком и таком подходе? чем ваш вариант выйгрывает по отношению к тому что я описал и так же наоборот,выигрывает ли вариант который я описал перед таким хедером который у вас? Просто смотря код готовых работ и какие либо мастер классы вот реально 50-50 как у вас и как я описал +- в подходе к верстке шапки! Заранее спасибо!

[@natalietalas]

Спасибо большое, столько нового открыла для себя. Здоровья вам автор!

[@user-nh4im8ln8c]

Подскажите пожалуйста где вы взяли код для autoComplete который вы вставили в js файл?

[@user-ev4vh8cm2x]

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

[@victoriaromanchik1322]

Нереально вдохновили)🎉

[@_back_heart_]

какую тему в Visual Code ты используешь?

[@user-yr6lv4vc7v]

Спасибо огромное, Юрий!!!

[@youtoobe8631]

на 2:37 появляется div с классом autoComplete_wrapper. Когда его уже создали, можно по-подробнее...

[@pro5189]

Добрый день! А где вы берёте шаблоны Фигма для верстки?

[@aleksshyzovskiy]

Их можно искать прямо в Фигме, на начальной вкладке есть строка ввода

[@miffis8239]

Можно найти figma community

[@user-uy1ms5qv4f]

Как найти его нету в фигме где?😊

[@wagatachi3656]

А где макет найти можно?

[@WebCademy]

В ТГ канале. Первая ссылка под видео.

[@user-jq4fl3pg8r]

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

[@WebCademy]

Потому что решил начать заново. И сделал весь макет за 2 стрима.

[@user-wu5ce6ow3m]

Как мы скачиваем извините меня этот сраный easepick

[@WebCademy]

Возьми с cdn easepick.com/packages/bundle.html на странице есть ссылка или с готового кода из урока

[@user-wu5ce6ow3m]

@@WebCademy спасибо большое,уже разобрался просто у вас был не cdn поэтому я упорно все же искал zip или rar файл на сайте)

[@Natasha__B]

Спасибо тебе, добрый человек за вопрос. Так же сидела искала xD

[@banan2872]

я просто уснул под ютубчик