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

2023 ж. 23 Ақп.
38 953 Рет қаралды

Верстаю макет в прямом эфире. Макет и материалы к уроку: t.me/+9XtDDNBdHAk4Yjhi
Адаптивная мобильная верстка HTML CSS JS из Figma. FlexBox, формы.
Верстка главной страницы туристического сайта.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на 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

Пікірлер
  • Я еще не доросла, чтобы просто, посмотрев макет в Figme, вытянуть из него все детальки, всю подноготную и самостоятельно сверстать сайт. Но мой аскетизм я оправдываю так: -ведь это удел продвинутых. Но, есть у нас хороший учитель, который помогает найти этот путь, ведущий к росту. Юрий, я даже не знаю, каким мерилом мерить этот, Ваш, волшебный дар -«деланье». Спасибо.

    @neleaonila2191@neleaonila2191 Жыл бұрын
  • Юрий, спасибо за труды! Очень все нравится! Буду учиться дальше😊😊😊

    @user-zo6rp1xn8i@user-zo6rp1xn8i Жыл бұрын
  • Спасибо за Ваши уроки, легко и очень интересно объясняете!

    @nikita-uw7kk@nikita-uw7kk Жыл бұрын
  • очень приятный человек с очень понятным объяснением

    @user-wo4mw5yk7h@user-wo4mw5yk7h11 ай бұрын
  • спасибо Юрий отличная работа все круто учусь по вашим стримам.

    @user-yl5kn9gq4p@user-yl5kn9gq4p2 ай бұрын
  • Юрий, это была замечательная трансляция. Огромное Вам спасибо! К сожалению, возможность оставить комментарий под ней появилась лишь спустя пару-тройку дней. Думаю, именно поэтому, при большом количестве лайков, коментариев не так много. Вы создали отличную авторскую методику преподавания. По вашей трансляции можно как идти по шагам, ставя на паузы и повторяя всё руками, т.о. тренироваться в канве реального производственного процесса, а можно, обладая базовыми HTML/CSS знаниями, посмотреть всеь спектакль целиком, на одном дыхании, и получить объемное представление о "кухне" современного верстальщика. Понравилось всё и особенно Ваша спокойная, дружелюбная манера вести урок по сложному материалу, при этом всё строить вживую, прямо на глазах. Нет никакой воды. Обязательно познакомлюсь с Вашими уроками по другим темам. Не бросайте, пожалуйста, это дело, у Вас дар. Материалов подобного качества на Ютубе не так много. Было очень интересно.

    @skolo65@skolo65 Жыл бұрын
    • Сергей, спасибо большое за комментарий и слова благодарности, очень приятно и вдохновляет на новые крутые уроки!)

      @WebCademy@WebCademy Жыл бұрын
  • Стрим полезный и информативный, единственный нюанс не вижу комментариев, которые вы читаете))

    @Loveispanec@Loveispanec Жыл бұрын
  • Шикарное видео

    @13101997a1@13101997a111 ай бұрын
  • Здравствуйте, хотел бы у вас уточнить, почему у меня не срабатывает opacity: 1; ? В видео тайминг 47:25

    @Crysis19981@Crysis199817 ай бұрын
  • Спасибо за стрим!!! Подскажите какой у вас шрифт в VS Code?

    @AndranikYayloyan@AndranikYayloyan Жыл бұрын
    • Consolas

      @WebCademy@WebCademy Жыл бұрын
  • 256 лайк мой. 256 )))))

    @Sultan69996@Sultan69996 Жыл бұрын
    • ю. ю ю б.ю. ю. ю .юю. ю. . ю. . 😅😢😅😅😅😅😅😮😅😅😅😅😮😅😅😮😅😅😅😅😅😅😅😅😅😅😅😮😅😅😅

      @ivanborisik@ivanborisik Жыл бұрын
    • 😅э. ю ююю ююю....б. .ю. б ...ю.. . ю . . юююю юю.ю.юююю ю ю ю....😅😮😅😢😅😅😅😅😅😅😅😅

      @ivanborisik@ivanborisik Жыл бұрын
  • А где ссылка на файл с css стилями?

    @wild_snake@wild_snake11 ай бұрын
  • а где 2 часть? Ну там где адаптив верстается

    @certer5814@certer58149 ай бұрын
  • Юрий, подскажите, пожалуйста, как поступить, если на странице нужны несколько контейнеров с разными широтами, как их именовать, согласно БЭМу? Я ломаю голову вокруг вариантов container container--width-1200 и header-container (если контейнер нужен для хеадера). Какая практика самая частая, или как делаете лично вы? И моя большая благодарность за труды. Учусь, глядя на вашу работу.

    @systemfile3685@systemfile3685 Жыл бұрын
    • Добрый день. Можно делать через модификаторы .container.container--wide Можно просто как дополнительный варианты контейнера как вы описали: .container, .container-wide, .container-footer

      @WebCademy@WebCademy Жыл бұрын
    • @@WebCademy Спасибо вам ещё раз!

      @systemfile3685@systemfile3685 Жыл бұрын
  • Спасибо большое за видео! Люди, подскажите, переключение между окнами с помощью Ctrl+Win лево/право? На 41:01. Просто анимация плавная на видео. А у меня нет... Или это специальная утилита?

    @blablablablablablab@blablablablablablab Жыл бұрын
    • Так у него же Mac

      @AntonioBenderas@AntonioBenderas Жыл бұрын
    • Это на маке так. Переключение между фулл скринами свайпом на трекпаде. Кстати очень удобно

      @bakhodirbadalov6713@bakhodirbadalov6713 Жыл бұрын
    • @Артемий круто. Я на маке работаю. :)

      @bakhodirbadalov6713@bakhodirbadalov6713 Жыл бұрын
    • @@bakhodirbadalov6713 трекпад удобней мышки?

      @AntonioBenderas@AntonioBenderas Жыл бұрын
    • @@AntonioBenderas если привикнеш то вообще классная вещь. Чисто для работы. Не для игр. С жестами много что можно упростить

      @bakhodirbadalov6713@bakhodirbadalov6713 Жыл бұрын
  • Привет, подскажите, какая тема у вас в VS CODE?

    @maskaradikk@maskaradikk Жыл бұрын
    • ayu

      @Hakanai2022@Hakanai2022 Жыл бұрын
    • @@Hakanai2022Спасибо

      @maskaradikk@maskaradikk Жыл бұрын
  • Добрый день. Подскажите пожалуйста а где взять макет. По ссылке в ТГ нету его.

    @PRO-kh8hb@PRO-kh8hb12 күн бұрын
    • Смотрите посты за 23 марта 23 года t.me/c/1579074518/132

      @WebCademy@WebCademy12 күн бұрын
  • 302 второй мой лайк

    @user-hq9fi5zo2g@user-hq9fi5zo2g Жыл бұрын
  • покажи как картинку разрезать на части и натянуть на любой сайт

    @AdminBitvisitor@AdminBitvisitor Жыл бұрын
    • В figma есть инструмент slice для разрезки картинки на части.

      @WebCademy@WebCademy Жыл бұрын
  • 😡Почему нельзя сделать чтобы по ссылке открывался именно тот материал который нужно? Зачем делать так чтобы полчаса нужно было лазить по телеграм?

    @wild_snake@wild_snake11 ай бұрын
    • Чтобы получить хоть какую то выгоду

      @Semiero_Jonskay@Semiero_Jonskay2 ай бұрын
  • Не могу продублировать себе макет. Ломается. Показывает только header и в кашу.

    @bakhodirbadalov6713@bakhodirbadalov6713 Жыл бұрын
    • Скачайте локально. File - Save as .Fig

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