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

Верстаю макет в прямом эфире. Макет и материалы к уроку: 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

[@neleaonila2191]

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

[@user-zo6rp1xn8i]

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

[@skolo65]

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

[@WebCademy]

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

[@nikita-uw7kk]

Спасибо за Ваши уроки, легко и очень интересно объясняете!

[@user-wo4mw5yk7h]

очень приятный человек с очень понятным объяснением

[@user-yl5kn9gq4p]

спасибо Юрий отличная работа все круто учусь по вашим стримам.

[@13101997a1]

Шикарное видео

[@Loveispanec]

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

[@Crysis19981]

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

[@AndranikYayloyan]

Спасибо за стрим!!! Подскажите какой у вас шрифт в VS Code?

[@WebCademy]

Consolas

[@wild_snake]

А где ссылка на файл с css стилями?

[@systemfile3685]

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

[@WebCademy]

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

[@systemfile3685]

@@WebCademy Спасибо вам ещё раз!

[@Sultan69996]

256 лайк мой. 256 )))))

[@ivanborisik]

ю. ю ю б.ю. ю. ю .юю. ю. . ю. . 😅😢😅😅😅😅😅😮😅😅😅😅😮😅😅😮😅😅😅😅😅😅😅😅😅😅😅😮😅😅😅

[@ivanborisik]

😅э. ю ююю ююю....б. .ю. б ...ю.. . ю . . юююю юю.ю.юююю ю ю ю....😅😮😅😢😅😅😅😅😅😅😅😅

[@certer5814]

а где 2 часть? Ну там где адаптив верстается

[@blablablablablablab]

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

[@AntonioBenderas]

Так у него же Mac

[@bakhodirbadalov6713]

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

[@bakhodirbadalov6713]

@Артемий круто. Я на маке работаю. :)

[@AntonioBenderas]

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

[@bakhodirbadalov6713]

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

[@PRO-kh8hb]

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

[@WebCademy]

Смотрите посты за 23 марта 23 года t.me/c/1579074518/132

[@maskaradikk]

Привет, подскажите, какая тема у вас в VS CODE?

[@Hakanai2022]

ayu

[@maskaradikk]

@@Hakanai2022Спасибо

[@wild_snake]

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

[@Semiero_Jonskay]

Чтобы получить хоть какую то выгоду

[@AdminBitvisitor]

покажи как картинку разрезать на части и натянуть на любой сайт

[@WebCademy]

В figma есть инструмент slice для разрезки картинки на части.

[@bakhodirbadalov6713]

Не могу продублировать себе макет. Ломается. Показывает только header и в кашу.

[@WebCademy]

Скачайте локально. File - Save as .Fig

[@user-hq9fi5zo2g]

302 второй мой лайк