Тёмный

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

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 42 тыс.
50% 1

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

Опубликовано:

 

23 фев 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 38   
@neleaonila2191
@neleaonila2191 Год назад
Я еще не доросла, чтобы просто, посмотрев макет в Figme, вытянуть из него все детальки, всю подноготную и самостоятельно сверстать сайт. Но мой аскетизм я оправдываю так: -ведь это удел продвинутых. Но, есть у нас хороший учитель, который помогает найти этот путь, ведущий к росту. Юрий, я даже не знаю, каким мерилом мерить этот, Ваш, волшебный дар -«деланье». Спасибо.
@user-zo6rp1xn8i
@user-zo6rp1xn8i Год назад
Юрий, спасибо за труды! Очень все нравится! Буду учиться дальше😊😊😊
@skolo65
@skolo65 Год назад
Юрий, это была замечательная трансляция. Огромное Вам спасибо! К сожалению, возможность оставить комментарий под ней появилась лишь спустя пару-тройку дней. Думаю, именно поэтому, при большом количестве лайков, коментариев не так много. Вы создали отличную авторскую методику преподавания. По вашей трансляции можно как идти по шагам, ставя на паузы и повторяя всё руками, т.о. тренироваться в канве реального производственного процесса, а можно, обладая базовыми HTML/CSS знаниями, посмотреть всеь спектакль целиком, на одном дыхании, и получить объемное представление о "кухне" современного верстальщика. Понравилось всё и особенно Ваша спокойная, дружелюбная манера вести урок по сложному материалу, при этом всё строить вживую, прямо на глазах. Нет никакой воды. Обязательно познакомлюсь с Вашими уроками по другим темам. Не бросайте, пожалуйста, это дело, у Вас дар. Материалов подобного качества на Ютубе не так много. Было очень интересно.
@WebCademy
@WebCademy Год назад
Сергей, спасибо большое за комментарий и слова благодарности, очень приятно и вдохновляет на новые крутые уроки!)
@nikita-uw7kk
@nikita-uw7kk Год назад
Спасибо за Ваши уроки, легко и очень интересно объясняете!
@user-wo4mw5yk7h
@user-wo4mw5yk7h Год назад
очень приятный человек с очень понятным объяснением
@user-yl5kn9gq4p
@user-yl5kn9gq4p 2 месяца назад
спасибо Юрий отличная работа все круто учусь по вашим стримам.
@13101997a1
@13101997a1 Год назад
Шикарное видео
@Loveispanec
@Loveispanec Год назад
Стрим полезный и информативный, единственный нюанс не вижу комментариев, которые вы читаете))
@Crysis19981
@Crysis19981 8 месяцев назад
Здравствуйте, хотел бы у вас уточнить, почему у меня не срабатывает opacity: 1; ? В видео тайминг 47:25
@AndranikYayloyan
@AndranikYayloyan Год назад
Спасибо за стрим!!! Подскажите какой у вас шрифт в VS Code?
@WebCademy
@WebCademy Год назад
Consolas
@wild_snake
@wild_snake 11 месяцев назад
А где ссылка на файл с css стилями?
@systemfile3685
@systemfile3685 Год назад
Юрий, подскажите, пожалуйста, как поступить, если на странице нужны несколько контейнеров с разными широтами, как их именовать, согласно БЭМу? Я ломаю голову вокруг вариантов container container--width-1200 и header-container (если контейнер нужен для хеадера). Какая практика самая частая, или как делаете лично вы? И моя большая благодарность за труды. Учусь, глядя на вашу работу.
@WebCademy
@WebCademy Год назад
Добрый день. Можно делать через модификаторы .container.container--wide Можно просто как дополнительный варианты контейнера как вы описали: .container, .container-wide, .container-footer
@systemfile3685
@systemfile3685 Год назад
@@WebCademy Спасибо вам ещё раз!
@Sultan69996
@Sultan69996 Год назад
256 лайк мой. 256 )))))
@ivanborisik
@ivanborisik Год назад
ю. ю ю б.ю. ю. ю .юю. ю. . ю. . 😅😢😅😅😅😅😅😮😅😅😅😅😮😅😅😮😅😅😅😅😅😅😅😅😅😅😅😮😅😅😅
@ivanborisik
@ivanborisik Год назад
😅э. ю ююю ююю....б. .ю. б ...ю.. . ю . . юююю юю.ю.юююю ю ю ю....😅😮😅😢😅😅😅😅😅😅😅😅
@certer5814
@certer5814 10 месяцев назад
а где 2 часть? Ну там где адаптив верстается
@blablablablablablab
@blablablablablablab Год назад
Спасибо большое за видео! Люди, подскажите, переключение между окнами с помощью Ctrl+Win лево/право? На 41:01. Просто анимация плавная на видео. А у меня нет... Или это специальная утилита?
@AntonioBenderas
@AntonioBenderas Год назад
Так у него же Mac
@bakhodirbadalov6713
@bakhodirbadalov6713 Год назад
Это на маке так. Переключение между фулл скринами свайпом на трекпаде. Кстати очень удобно
@bakhodirbadalov6713
@bakhodirbadalov6713 Год назад
@Артемий круто. Я на маке работаю. :)
@AntonioBenderas
@AntonioBenderas Год назад
@@bakhodirbadalov6713 трекпад удобней мышки?
@bakhodirbadalov6713
@bakhodirbadalov6713 Год назад
@@AntonioBenderas если привикнеш то вообще классная вещь. Чисто для работы. Не для игр. С жестами много что можно упростить
@PRO-kh8hb
@PRO-kh8hb 26 дней назад
Добрый день. Подскажите пожалуйста а где взять макет. По ссылке в ТГ нету его.
@WebCademy
@WebCademy 25 дней назад
Смотрите посты за 23 марта 23 года t.me/c/1579074518/132
@maskaradikk
@maskaradikk Год назад
Привет, подскажите, какая тема у вас в VS CODE?
@Hakanai2022
@Hakanai2022 Год назад
ayu
@maskaradikk
@maskaradikk Год назад
@@Hakanai2022Спасибо
@wild_snake
@wild_snake 11 месяцев назад
😡Почему нельзя сделать чтобы по ссылке открывался именно тот материал который нужно? Зачем делать так чтобы полчаса нужно было лазить по телеграм?
@Semiero_Jonskay
@Semiero_Jonskay 2 месяца назад
Чтобы получить хоть какую то выгоду
@AdminBitvisitor
@AdminBitvisitor Год назад
покажи как картинку разрезать на части и натянуть на любой сайт
@WebCademy
@WebCademy Год назад
В figma есть инструмент slice для разрезки картинки на части.
@bakhodirbadalov6713
@bakhodirbadalov6713 Год назад
Не могу продублировать себе макет. Ломается. Показывает только header и в кашу.
@WebCademy
@WebCademy Год назад
Скачайте локально. File - Save as .Fig
@user-hq9fi5zo2g
@user-hq9fi5zo2g Год назад
302 второй мой лайк
Далее
ATEEZ(에이티즈) - 'WORK' Official MV
03:15
Просмотров 14 млн
Backstage or result?😈🔥 @milanaroller
00:12
Просмотров 7 млн
Верстка сайта - HTML, CSS, JS. Адаптив
3:01:57
ATEEZ(에이티즈) - 'WORK' Official MV
03:15
Просмотров 14 млн