Верстка сайта онлайн. Подробно с объяснениями для новичков. HTML, CSS, JS
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- Верстаю макет в прямом эфире. Макет будет на стриме в описании под видео.
Адаптивная мобильная верстка HTML CSS JS из Figma. FlexBox, формы, карусель, видео на сайте. Макет в TG канале: t.me/+9XtDDNBdHAk4Yjhi
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на 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 Вступление, обзор макета
07:00 Создание проекта
08:55 reset.css
09:40 Шрифты
17:15 Экспорт графики
27:55 Обзор сетки проекта
28:55 Верстка навигации в шапке
50:50 Контент в шапке
57:00 Фикс с подключением шрифта
1:00:03 Работа с кнопками
1:11:48 Информация о курсе по верстке
1:15:17 Ответы на комментарии
1:37:18 Секция Case Studies
1:53:30 Эффект градиента для текста
1:59:00 Подключение скрипта карусели
2:06:20 Ответы на комментарии
2:07:05 Секция Video
2:17:50 Добавление видео
2:23:10 JS код для видео
2:37:20 Подвал сайта
2:47:15 Информация о курсе по верстке
2:51:28 Ответы на комментарии
2:52:38 Мобильная адаптация шапки
3:16:45 Мобильная адаптация Case Studies
3:39:14 Мобильная адаптация Video
4:03:00 Мобильная адаптация Подвала
4:09:58 Ответы на комментарии
4:14:54 Мобильная навигация
4:39:20 Скрипт мобильной навигации
4:48:08 Курс по верстке
4:48:38 Внутрянка курса
4:52:30 Ответы на комментарии
Спасибо, Юрий! Много интересного! Записался на Ваш курс по JavaScript на 12.09!
Каждый раз благодаря видео восполняю пробелы в знаниях, хоть верстаю не первый год. Спасибо!
Спасибо! Как всегда на уровне!
Как будет полный курс Frontend, обязательно возьму у вас его) нравится как подносите и объясняете материал!
Юрий, спасибо вам большое! Ваши видео очень помогают мне как начинающему верстальщику. Все очень понятно объясняете. Жду курса front-end разработчика. надеюсь появится в скором времени!
Юрий, вы самый лучший преподаватель! Спасибо огромное за вашу работу!)
Юрий больше вам спасибо за ваши видео! очень хорошо, подробно и понятно объясняете! очень помогает в изучении вёрстки!
спасибо большое за урок, наверное уже поздно задавать вопросы, но тем не менее, может кто-то другой знает)
как сделать так, чтобы в карусели не ужимались слова когда размер экрана не 100%? (я не про мобильную версию, а про обычное увеличение до 150% например)
Сделайте, пожалуйста ,макет в mobile first адаптиве, а то все в десктопе. Тоже будет очень полезно
4:17:30
все просто,это приветствие на языках тех стран которые в слайдере)кроме марокканского,кстати название morocco в макете тоже с ошибкой написано. а еще мне не понятно почему там написано london ведь это город,а в других слайдерах название страны
Можно для стрелочки сделать плавную смену. А то выглядит не красиво) .btn::after {transition: 0.15s ease-in;}
Скажите, а оплата курса возможна только по реквизитам банковской карты или также другими способами, например, по Системе быстрых платежей?
Есть варианты. Оставьте заявку на сайте на курс или на консультацию.
как переименовать слои в фигме я не пойму сижу час уже. и как фото перетащить тоже не получается
Ребят помогите!!! Когда я экспортирую кнопку play в свг формате то сзади появляется белый фон. Как их удалить? Уже везде обыскал, не нашел решения( Единственное это скачать крякнутый иллюстратор и там уже убрать фон
привет)подскажите пожалуйста набор клавиш для размножения печатного курсора как на видео делается на 2:16:17 )
alt
@@userMeela Спасибо большое)
можно ссылку на figma
1:37:41 карусель
👌
подскажите пожалуйста, как называется плагин, через который вы копируете классы в html и потом вставляете их в css
eCSStractor for VSCode
@@anzorozdoev2727 спасибо
Если задать autoWidth=true owlcarousel, карусель растянется на размер картинки и не будет сжимать ее
😎😎😎😎😎😎
У меня почему-то все размеры какие-то не такие. Если делаю тайтлы по 80px, они получаются просто огромные. То, что Юрий ставит на 80px, равняются моим примерно 50px. Да и марджины с паддингами тоже приходится подбирать свои, потому что в сравнении с картинкой на видео всё какое-то получается громоздкое, хотя всё пишу точь в точь как на видео.
может у тебя разрешение экрана просто меньше чем на видео у человека
@@serhiiarkhypenko8370 мой ноут поддерживает макс разрешение 1366*768.
А ты с каким разрешением делаешь? Всё работает как на видео?
@@rustamtau7944 у автора разрешение 1920 на 1080, из-за этого у тебя кажется все больше
@@serhiiarkhypenko8370 Спасибо, коллега.
Теперь все размеры с видео делаю с уменьшающим коэффициентом 1,4. Получается почти как на картинке.
попробуй масштаб сторінки в хромі чи де ти верстаєш зменшити чи там збільшити. В мене тоже таке колись було і дуже довго неміг розібратись проте потім якось дійшло і здавалось бліін наскільки це лекго вирішувалось
Стоит ли использовать reset новичкам? Это кнш все упростит, но сами мы не поймем, че и как произошло и что там вообще написано.
Сначала стоит разобраться зачем он нужен, а после я рекомендую к использованию. Так как с ним удобнее.
Дайте пожалуйста ссылку на полный макет
Все в ТГ канале, ссылка в описании видео.
Здравствуйте, а где можно учить JS новичку?
Посмотрите ролик JS за 6 часов: th-cam.com/video/maPRR_jjyOE/w-d-xo.html
Или JS для верстальщика:
Часть 1: th-cam.com/video/UFmZaNj6wyA/w-d-xo.html
Часть 2: th-cam.com/video/D8OIb5LZYYE/w-d-xo.html
А как сделали дублирование картинки 21:08
Ctrl + D
Чего-то не с начала видео
Стрим был 5 часов, сразу после стрима доступны только несколько часов видео. Сейчас уже доступен весь стрим.
@@WebCademy очень круто что вы снимаете такие видео 😀 как раз для меня которому нужна практика в вёрстке )) Желаю удачи !