KZhead

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

ВебКадеми | Юрий Ключевский
2024 ж. 1 Мам.
40 633 Рет қаралды
Жүктеу

Верстаю макет в прямом эфире. Макет и материалы к уроку: 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/
Вконтакте: vk.com/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@valerymonastyrev3229 Жыл бұрын

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

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

  • Thanks a lot!

    @step_by_step_to_perfection@step_by_step_to_perfection Жыл бұрын

  • Благодарю!

    @orazaliorazali1000@orazaliorazali10004 ай бұрын

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

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

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

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

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

    @_back_heart_@_back_heart_6 ай бұрын

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

    @natalietalas@natalietalas Жыл бұрын

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

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

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

    @victoriaromanchik1322@victoriaromanchik1322 Жыл бұрын

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

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

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

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

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

    @youtoobe8631@youtoobe8631 Жыл бұрын

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

    @pro5189@pro5189 Жыл бұрын

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

      @aleksshyzovskiy@aleksshyzovskiy Жыл бұрын

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

      @miffis8239@miffis8239 Жыл бұрын

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

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

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

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

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

      @WebCademy@WebCademy Жыл бұрын

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

    @wagatachi3656@wagatachi3656 Жыл бұрын

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

      @WebCademy@WebCademy Жыл бұрын

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

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

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

      @WebCademy@WebCademy Жыл бұрын

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

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

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

      @Natasha__B@Natasha__B9 ай бұрын

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

    @banan2872@banan287223 сағат бұрын
KZhead