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

Рет қаралды 41,743

Күн бұрын

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

Пікірлер: 28

@valerymonastyrev3229 Жыл бұрын

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

@step_by_step_to_perfection Жыл бұрын

Thanks a lot!

@NO-lq1qt Жыл бұрын

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

@orazaliorazali1000 4 ай бұрын

Благодарю!

@user-yp3sc7bl5z Жыл бұрын

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

@Evgenius-PRO 8 ай бұрын

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

@natalietalas Жыл бұрын

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

@user-nh4im8ln8c Жыл бұрын

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

@user-ev4vh8cm2x Жыл бұрын

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

@victoriaromanchik1322 Жыл бұрын

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

@_back_heart_ 6 ай бұрын

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

@user-yr6lv4vc7v 2 ай бұрын

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

@youtoobe8631 Жыл бұрын

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

@pro5189 Жыл бұрын

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

@aleksshyzovskiy Жыл бұрын

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

@miffis8239 Жыл бұрын

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

@user-uy1ms5qv4f 25 күн бұрын

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

@wagatachi3656 Жыл бұрын

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

@WebCademy Жыл бұрын

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

@user-jq4fl3pg8r Жыл бұрын

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

@WebCademy Жыл бұрын

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

@user-wu5ce6ow3m Жыл бұрын

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

@WebCademy Жыл бұрын

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

@user-wu5ce6ow3m Жыл бұрын

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

@Natasha__B 9 ай бұрын

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

@banan2872 3 күн бұрын

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