Тёмный
WebDesign Master
WebDesign Master
WebDesign Master
Подписаться
Уникальные авторские уроки и курсы по созданию сайтов, профессиональной верстке и современному веб-дизайну.
Создание сетки в Figma
16:54
3 года назад
Комментарии
@YutaLoo
@YutaLoo 5 дней назад
А можете сделать музыкальный плеер)
@SvirkoSam
@SvirkoSam 5 дней назад
Спасибо за урок! Просто годнота ❤
@YutaLoo
@YutaLoo 5 дней назад
Очень круто, все объясняется, просто шикарно. А как после скрола добавить ещё
@wdm
@wdm 5 дней назад
Просто размещаете контент дальше, а там можете и анимацию перехода какую-нибудь сделать.
@lernikharutyunyan604
@lernikharutyunyan604 9 дней назад
👍 гениально!
@cout09
@cout09 11 дней назад
Can we get english subtitles? Ireally loved your work?
@7life720
@7life720 14 дней назад
Крутой урок. Один вопрос, зачем мы использовали тег <span> для переноса части текста, если можно использовать тег <br>?
@wdm
@wdm 13 дней назад
Обертку части текста можно выполнить на фронтенде, либо с помощью регулярных выражений, либо по количеству слов. Тег br же нужно будет вводить пользователю через систему управления контентом вручную. Однако не рекомендую давать пользователю хоть какие-нибудь инструменты дизайна. Если использовать br, придется писать более сложное выражение для автоматической разбивки Поэтому как показывает практика, проще и лучше обернуть в span.
@andreys3346
@andreys3346 18 дней назад
Смотивировал меня поверстать. 👍
@GEELSRC
@GEELSRC 18 дней назад
Это мой лучший канал по фронтенду, сам бекендер но с удовольствием смотрю видео с этого канала, автору респект !
@lvovich_biz
@lvovich_biz 19 дней назад
А где найти код такой: на десктопной версии на главном экране одно изображение, а когда мобильная версия, то изображение меняется на другое?
@wdm
@wdm 19 дней назад
Можно создать инлайновый тег style, в который загружать переменные, в зависимости от медиа запросов: <style> :root { --background-1: url(image-regular.png) } @media (max-width: 300px) { :root { --background-1: url(image-small.png) } } </style> <div style="background-image: var(--particular-ad);"></div> И так для каждого слоя.
@lvovich_biz
@lvovich_biz 18 дней назад
@@wdmлучший, спасибо
@tanpii1312
@tanpii1312 25 дней назад
спасибо за урок! как всегда очень полезно😌 вот только не очень поняла, как сделать прокрутку вниз, если у страницы есть дальнейшее содержание?
@wdm
@wdm 24 дня назад
Здравствуйте. Здесь всё просто. Мы же задаем высоту секции в vh, где происходит анимация. То есть когда анимация завершается, фактически, мы доскроллили до конца. Это значит, что дальше будет прокручиваться весь дальнейший контент. Вам просто необходимо добавить обертку для контента, указать position: relative, при необходимости подобрать z-index и верстать последующий контент, который будет прокручиваться дальше. Если внимательно посмотреть и понять урок - когда начинается, когда заканчивается анимация, как происходит привязка к скроллу, всё встанет на свое место и ответ будет на поверхности.
@ai-bloggers
@ai-bloggers 25 дней назад
пушка!!!💣💣💣
@user-sc2om5fc6b
@user-sc2om5fc6b 26 дней назад
Огромное спасибо за такой контент, где реально показывают как работать с анимацией!!! Благодарю
@blatov
@blatov 28 дней назад
Очень круто 👍
@lsdkkdkkd
@lsdkkdkkd 29 дней назад
я теперь оторваться не могу, просто двигаю мышкой и кайфую
@gudeFrontend
@gudeFrontend 29 дней назад
Это фантастика!
@user-ed2qr2dh7e
@user-ed2qr2dh7e Месяц назад
Купил курс, решил поддержать тебя, спасибо за твои старания)
@wdm
@wdm Месяц назад
Спасибо! Приятного обучения)
@Rostyslav-Kinash
@Rostyslav-Kinash Месяц назад
спасибо за урок
@Rostyslav-Kinash
@Rostyslav-Kinash Месяц назад
спасибо за урок
@Max_Pl78
@Max_Pl78 Месяц назад
Просто огонь 🔥🔥🔥!!! Возможно у Вас есть уроки, с похожим сайтом, но чтобы вверху было неподвижное меню?)))
@wdm
@wdm Месяц назад
Спасибо! Навскидку не вспомню, есть или нет. Но делается это довольно легко. У полосы меню - position: fixed; top: 0; width: 100%
@user-nn9qy1yh3s
@user-nn9qy1yh3s Месяц назад
еще б настроечку чтоб убрать лишние отсутп между файлом стилей где номер строки - много места пустого
@seal1315
@seal1315 Месяц назад
Обожаю этот канал ! Не пожалел, что взял курсы! Всё изложено четко без воды. Ставит мощную базу💪
@WebDevXpert
@WebDevXpert Месяц назад
very nice design
@user-li7of6vp8u
@user-li7of6vp8u Месяц назад
Просто ВАУ!!! Спасибо большое))
@user-md8lf4wc7d
@user-md8lf4wc7d Месяц назад
Як ти зробив таке оформлення в vs code
@user-yc9uy5tg1n
@user-yc9uy5tg1n Месяц назад
Алексей, Спасибо огромное за знания, которыми Вы с нами делитесь! 🙏
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses