Тёмный

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

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 44 тыс.
50% 1

Верстаю макет в прямом эфире. Макет и материалы к уроку: 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

Опубликовано:

 

9 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 30   
@valerymonastyrev3229
@valerymonastyrev3229 Год назад
Огромное спасибо за такие видео
@NO-lq1qt
@NO-lq1qt Год назад
Спасибо побольше бы таких стримов🤝
@step_by_step_to_perfection
@step_by_step_to_perfection Год назад
Thanks a lot!
@orazaliorazali1000
@orazaliorazali1000 4 месяца назад
Благодарю!
@user-nh4im8ln8c
@user-nh4im8ln8c Год назад
Подскажите пожалуйста где вы взяли код для autoComplete который вы вставили в js файл?
@natalietalas
@natalietalas Год назад
Спасибо большое, столько нового открыла для себя. Здоровья вам автор!
@Evgenius-PRO
@Evgenius-PRO 8 месяцев назад
Юрий! Вечер добрый вновь! 😀 Спасибо за такой мастер класс! Вопрос,как к учителю,как к человеку с большим опытом! Почему кто-то относит к блоку хедер,то есть к самой шапке,только само меню(то что в вашем случае лишь nav) и получается делает вариант что она абсолютна и как бы нависает над bg планеты, а сама bg планета это ну можно сказать часть section h1 текста "Discover the most engaging places" ну вы поняли о чем я, то есть хедер,сама шапка это лишь менюшка, а вот вы и кстати многие другие к хедеру относите всю часть самого верхнего блока включая и меню и текста и bg. Вот собственно в чём фундаментальная разница при таком и таком подходе? чем ваш вариант выйгрывает по отношению к тому что я описал и так же наоборот,выигрывает ли вариант который я описал перед таким хедером который у вас? Просто смотря код готовых работ и какие либо мастер классы вот реально 50-50 как у вас и как я описал +- в подходе к верстке шапки! Заранее спасибо!
@user-yp3sc7bl5z
@user-yp3sc7bl5z Год назад
Очень полезное видео. Круто что ответили на мой вопрос во время стирма
@victoriaromanchik1322
@victoriaromanchik1322 Год назад
Нереально вдохновили)🎉
@_back_heart_
@_back_heart_ 7 месяцев назад
какую тему в Visual Code ты используешь?
@user-yr6lv4vc7v
@user-yr6lv4vc7v 3 месяца назад
Спасибо огромное, Юрий!!!
@user-ev4vh8cm2x
@user-ev4vh8cm2x Год назад
Спасибо, особенно за подробное объяснения казалось бы элементарных вещей. Когда начинаешь сам делать, бывает на них тупника ловишь или просто делаешь как все делают, но не понимаешь почему именно так.
@youtoobe8631
@youtoobe8631 Год назад
на 2:37 появляется div с классом autoComplete_wrapper. Когда его уже создали, можно по-подробнее...
@banan2872
@banan2872 8 дней назад
я просто уснул под ютубчик
@spermomet
@spermomet 2 дня назад
я тоже, и сюда попал
@kokis13
@kokis13 День назад
Ахаххах, я тоже)
@pro5189
@pro5189 Год назад
Добрый день! А где вы берёте шаблоны Фигма для верстки?
@aleksshyzovskiy
@aleksshyzovskiy Год назад
Их можно искать прямо в Фигме, на начальной вкладке есть строка ввода
@miffis8239
@miffis8239 Год назад
Можно найти figma community
@user-jq4fl3pg8r
@user-jq4fl3pg8r Год назад
Не могу понять, почему мы заново делаем блок, который уже верстали?
@WebCademy
@WebCademy Год назад
Потому что решил начать заново. И сделал весь макет за 2 стрима.
@user-uy1ms5qv4f
@user-uy1ms5qv4f Месяц назад
Как найти его нету в фигме где?😊
@wagatachi3656
@wagatachi3656 Год назад
А где макет найти можно?
@WebCademy
@WebCademy Год назад
В ТГ канале. Первая ссылка под видео.
@user-wu5ce6ow3m
@user-wu5ce6ow3m Год назад
Как мы скачиваем извините меня этот сраный easepick
@WebCademy
@WebCademy Год назад
Возьми с cdn easepick.com/packages/bundle.html на странице есть ссылка или с готового кода из урока
@user-wu5ce6ow3m
@user-wu5ce6ow3m Год назад
@@WebCademy спасибо большое,уже разобрался просто у вас был не cdn поэтому я упорно все же искал zip или rar файл на сайте)
@Natasha__B
@Natasha__B 9 месяцев назад
Спасибо тебе, добрый человек за вопрос. Так же сидела искала xD
Далее
10 лет каналу Алексей Шевцов
1:08:50
who??? I do not know him #learnfromkhaby #comedy
00:44
10 лет каналу Алексей Шевцов
1:08:50