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

Sdílet
Vložit
  • čas přidán 2. 06. 2024
  • Верстаю макет в прямом эфире. Макет и материалы к уроку: t.me/+9XtDDNBdHAk4Yjhi
    Адаптивная мобильная верстка HTML CSS JS из Figma. CSS Grid, JS.
    Верстка главной страницы туристического сайта.
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
    От установки редактора, до публикации в сети.
    👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
    Обучение с наставником, 3 месяца, результат, гарантия.
    Научим создавать веб-сайты и зарабатывать на этом.
    Старт обучения: 27-го Мая 2024 года.
    💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
    Обучение с наставником, 3 месяца, результат, гарантия.
    Старт обучения: 3-го Июня 2024 года.
    💻 Курс "Разработка сайтов на PHP + MySQL":
    webcademy.ru/phpcourse/
    Создание сайтов с системой управления.
    Присоединиться к курсу можно прямо сейчас.
    🏁 Обучение с нуля
    💁‍♂️ Обучение с наставником
    🎯 Доведение с нуля до результата
    🏢 Помощь с трудоустройством
    💵 Поможем взять первый заказ на фрилансе
    💳 возможна рассрочка
    💳 если курс не понравится, вернём деньги в первую неделю
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    💈 Сайт школы ВебКадеми: 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

Komentáře • 31

  • @valerymonastyrev3229
    @valerymonastyrev3229 Před rokem

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

  • @NO-lq1qt
    @NO-lq1qt Před rokem +7

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

  • @user-nh4im8ln8c
    @user-nh4im8ln8c Před rokem

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

  • @user-yi8rg1id3k
    @user-yi8rg1id3k Před 14 dny

    Я включил видео под сон, просыпаюсь и вижу это, я это не смотрел

  • @step_by_step_to_perfection

    Thanks a lot!

  • @Evgenius-PRO
    @Evgenius-PRO Před 9 měsíci

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

  • @_back_heart_
    @_back_heart_ Před 7 měsíci

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

  • @youtoobe8631
    @youtoobe8631 Před rokem

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

  • @orazaliorazali1000
    @orazaliorazali1000 Před 5 měsíci

    Благодарю!

  • @banan2872
    @banan2872 Před měsícem +9

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

    • @spermomet
      @spermomet Před 27 dny +1

      я тоже, и сюда попал

    • @kokis13
      @kokis13 Před 25 dny +1

      Ахаххах, я тоже)

  • @pro5189
    @pro5189 Před rokem

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

    • @aleksshyzovskiy
      @aleksshyzovskiy Před rokem +1

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

    • @miffis8239
      @miffis8239 Před rokem +1

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

  • @natalietalas
    @natalietalas Před rokem

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

  • @user-ev4vh8cm2x
    @user-ev4vh8cm2x Před rokem +1

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

  • @user-yp3sc7bl5z
    @user-yp3sc7bl5z Před rokem

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

  • @victoriaromanchik1322

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

  • @user-uy1ms5qv4f
    @user-uy1ms5qv4f Před měsícem

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

  • @user-jq4fl3pg8r
    @user-jq4fl3pg8r Před rokem +1

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

    • @WebCademy
      @WebCademy  Před rokem +2

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

  • @user-yr6lv4vc7v
    @user-yr6lv4vc7v Před 3 měsíci

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

  • @wagatachi3656
    @wagatachi3656 Před rokem

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

    • @WebCademy
      @WebCademy  Před rokem

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

  • @user-wu5ce6ow3m
    @user-wu5ce6ow3m Před rokem +3

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

    • @WebCademy
      @WebCademy  Před rokem +3

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

    • @user-wu5ce6ow3m
      @user-wu5ce6ow3m Před rokem +2

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

    • @Natasha__B
      @Natasha__B Před 10 měsíci +1

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