Верстка сайта онлайн. Подробно с объяснениями для новичков. 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

Пікірлер: 28

  • @valerymonastyrev3229
    @valerymonastyrev3229 Жыл бұрын

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

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

    Thanks a lot!

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

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

  • @orazaliorazali1000
    @orazaliorazali10004 ай бұрын

    Благодарю!

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

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

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

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

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

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

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

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

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

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

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

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

  • @_back_heart_
    @_back_heart_6 ай бұрын

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

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

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

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

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

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

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

  • @aleksshyzovskiy

    @aleksshyzovskiy

    Жыл бұрын

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

  • @miffis8239

    @miffis8239

    Жыл бұрын

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

  • @user-uy1ms5qv4f
    @user-uy1ms5qv4f25 күн бұрын

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

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

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

  • @WebCademy

    @WebCademy

    Жыл бұрын

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

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

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

  • @WebCademy

    @WebCademy

    Жыл бұрын

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

  • @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

  • @banan2872
    @banan28723 күн бұрын

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

Келесі