Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS
HTML-код
- Опубликовано: 23 фев 2023
- Верстаю макет в прямом эфире. Макет и материалы к уроку: t.me/+9XtDDNBdHAk4Yjhi
Адаптивная мобильная верстка HTML CSS JS из Figma. FlexBox, формы.
Верстка главной страницы туристического сайта.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Юрий, спасибо за труды! Очень все нравится! Буду учиться дальше😊😊😊
Я еще не доросла, чтобы просто, посмотрев макет в Figme, вытянуть из него все детальки, всю подноготную и самостоятельно сверстать сайт. Но мой аскетизм я оправдываю так: -ведь это удел продвинутых.
Но, есть у нас хороший учитель, который помогает найти этот путь, ведущий к росту. Юрий, я даже не знаю, каким мерилом мерить этот, Ваш, волшебный дар -«деланье». Спасибо.
Юрий, это была замечательная трансляция. Огромное Вам спасибо! К сожалению, возможность оставить комментарий под ней появилась лишь спустя пару-тройку дней. Думаю, именно поэтому, при большом количестве лайков, коментариев не так много. Вы создали отличную авторскую методику преподавания. По вашей трансляции можно как идти по шагам, ставя на паузы и повторяя всё руками, т.о. тренироваться в канве реального производственного процесса, а можно, обладая базовыми HTML/CSS знаниями, посмотреть всеь спектакль целиком, на одном дыхании, и получить объемное представление о "кухне" современного верстальщика. Понравилось всё и особенно Ваша спокойная, дружелюбная манера вести урок по сложному материалу, при этом всё строить вживую, прямо на глазах. Нет никакой воды. Обязательно познакомлюсь с Вашими уроками по другим темам. Не бросайте, пожалуйста, это дело, у Вас дар. Материалов подобного качества на Ютубе не так много. Было очень интересно.
Сергей, спасибо большое за комментарий и слова благодарности, очень приятно и вдохновляет на новые крутые уроки!)
очень приятный человек с очень понятным объяснением
спасибо Юрий отличная работа все круто учусь по вашим стримам.
Спасибо за Ваши уроки, легко и очень интересно объясняете!
Стрим полезный и информативный, единственный нюанс не вижу комментариев, которые вы читаете))
Шикарное видео
Спасибо за стрим!!!
Подскажите какой у вас шрифт в VS Code?
Consolas
Здравствуйте, хотел бы у вас уточнить, почему у меня не срабатывает opacity: 1; ?
В видео тайминг 47:25
Спасибо большое за видео!
Люди, подскажите, переключение между окнами с помощью Ctrl+Win лево/право? На 41:01. Просто анимация плавная на видео. А у меня нет...
Или это специальная утилита?
Так у него же Mac
Это на маке так. Переключение между фулл скринами свайпом на трекпаде. Кстати очень удобно
@Артемий круто. Я на маке работаю. :)
@@bakhodirbadalov6713 трекпад удобней мышки?
@@AntonioBenderas если привикнеш то вообще классная вещь. Чисто для работы. Не для игр. С жестами много что можно упростить
А где ссылка на файл с css стилями?
Юрий, подскажите, пожалуйста, как поступить, если на странице нужны несколько контейнеров с разными широтами, как их именовать, согласно БЭМу? Я ломаю голову вокруг вариантов container container--width-1200 и header-container (если контейнер нужен для хеадера). Какая практика самая частая, или как делаете лично вы?
И моя большая благодарность за труды. Учусь, глядя на вашу работу.
Добрый день.
Можно делать через модификаторы .container.container--wide
Можно просто как дополнительный варианты контейнера как вы описали: .container, .container-wide, .container-footer
@@WebCademy Спасибо вам ещё раз!
Привет, подскажите, какая тема у вас в VS CODE?
ayu
@@Hakanai2022Спасибо
Добрый день. Подскажите пожалуйста а где взять макет. По ссылке в ТГ нету его.
Смотрите посты за 23 марта 23 года
t.me/c/1579074518/132
а где 2 часть? Ну там где адаптив верстается
256 лайк мой. 256 )))))
ю. ю ю б.ю. ю. ю .юю. ю. . ю. . 😅😢😅😅😅😅😅😮😅😅😅😅😮😅😅😮😅😅😅😅😅😅😅😅😅😅😅😮😅😅😅
😅э. ю ююю ююю....б. .ю. б ...ю.. . ю . . юююю юю.ю.юююю ю ю ю....😅😮😅😢😅😅😅😅😅😅😅😅
покажи как картинку разрезать на части и натянуть на любой сайт
В figma есть инструмент slice для разрезки картинки на части.
302 второй мой лайк
😡Почему нельзя сделать чтобы по ссылке открывался именно тот материал который нужно? Зачем делать так чтобы полчаса нужно было лазить по телеграм?
Чтобы получить хоть какую то выгоду
Не могу продублировать себе макет. Ломается. Показывает только header и в кашу.
Скачайте локально. File - Save as .Fig