Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS
HTML-код
- Опубликовано: 7 май 2024
- Верстаю макет в прямом эфире. Макет и материалы к уроку: 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
Огромное спасибо за такие видео
Спасибо побольше бы таких стримов🤝
Thanks a lot!
Подскажите пожалуйста где вы взяли код для autoComplete который вы вставили в js файл?
Юрий! Вечер добрый вновь! 😀 Спасибо за такой мастер класс! Вопрос,как к учителю,как к человеку с большим опытом! Почему кто-то относит к блоку хедер,то есть к самой шапке,только само меню(то что в вашем случае лишь nav) и получается делает вариант что она абсолютна и как бы нависает над bg планеты, а сама bg планета это ну можно сказать часть section h1 текста "Discover the most engaging places" ну вы поняли о чем я, то есть хедер,сама шапка это лишь менюшка, а вот вы и кстати многие другие к хедеру относите всю часть самого верхнего блока включая и меню и текста и bg. Вот собственно в чём фундаментальная разница при таком и таком подходе? чем ваш вариант выйгрывает по отношению к тому что я описал и так же наоборот,выигрывает ли вариант который я описал перед таким хедером который у вас? Просто смотря код готовых работ и какие либо мастер классы вот реально 50-50 как у вас и как я описал +- в подходе к верстке шапки! Заранее спасибо!
Благодарю!
какую тему в Visual Code ты используешь?
Спасибо большое, столько нового открыла для себя. Здоровья вам автор!
Очень полезное видео. Круто что ответили на мой вопрос во время стирма
Спасибо, особенно за подробное объяснения казалось бы элементарных вещей.
Когда начинаешь сам делать, бывает на них тупника ловишь или просто делаешь как все делают, но не понимаешь почему именно так.
на 2:37 появляется div с классом autoComplete_wrapper. Когда его уже создали, можно по-подробнее...
Нереально вдохновили)🎉
Добрый день! А где вы берёте шаблоны Фигма для верстки?
Их можно искать прямо в Фигме, на начальной вкладке есть строка ввода
Можно найти figma community
Спасибо огромное, Юрий!!!
Как найти его нету в фигме где?😊
Не могу понять, почему мы заново делаем блок, который уже верстали?
Потому что решил начать заново. И сделал весь макет за 2 стрима.
А где макет найти можно?
В ТГ канале. Первая ссылка под видео.
Как мы скачиваем извините меня этот сраный easepick
Возьми с cdn easepick.com/packages/bundle.html на странице есть ссылка или с готового кода из урока
@@WebCademy спасибо большое,уже разобрался просто у вас был не cdn поэтому я упорно все же искал zip или rar файл на сайте)
Спасибо тебе, добрый человек за вопрос. Так же сидела искала xD
я просто уснул под ютубчик
я тоже, и сюда попал