Тёмный

Верстка сайта по макету из Figma используя плагин Inspect Styles 

ITDoctor
Подписаться 69 тыс.
Просмотров 4,6 тыс.
50% 1

Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также узнаете, как использовать CSS для стилизации элементов и создания адаптивного дизайна. В результате вы получите готовый фрагмент веб-страницы, который будет выглядеть точно так же, как в макете из Figma.
• Верстка сайта по макет...
📌 Полезные материалы и задания к этому уроку: stepik.org/113393
💾 Репозиторий с кодом: github.com/morphIsmail/figma_...
00:00:20 Верстка без Dev Mode
00:01:57 Плагин Inspect Styles
00:02:43 Кто автор плагина
00:03:30 Обзор макета в Figma
00:05:46 Пишем HTML разметку
00:11:55 Оформляем CSS стили
00:33:29 Адаптивная версия
00:41:30 Подведение итогов
⚡️ Эксклюзив на Boosty - boosty.to/itdoctor
💡 Telegram канал - t.me/itdoctor_official/4
🎥 Курсы на Stepik - stepik.org/users/387773773/teach
ВКонтакте - itdoctorstudio
Яндекс Дзен - zen.yandex.ru/itdoctor
Rutube - rutube.ru/channel/23500045/
#figma #html #css #itdoctor

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

 

23 фев 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 13   
@ITDoctor
@ITDoctor 3 месяца назад
Этот новый урок доступен вам БЕСПЛАТНО в курсе Сайт на Wordpress, Верстка сайта и перенос на CMS ( stepik.org/113393 ) в модуле "Верстка из Figma без Dev Mode". На Stepik доступны задания и дополнительные материалы, а так же видео разбито на отдельные фрагменты для вашего удобства, чтобы не смотреть большое видео за один раз.
@dropedeat3215
@dropedeat3215 День назад
отлично! у вас талант объяснять,залип на ваши уроки и долго такой контент искал.
@ITDoctor
@ITDoctor 10 минут назад
Спасибо большое за добрые слова. Рад что мои видео вам нравятся и приносят пользу
@user-hj1eh8dk9p
@user-hj1eh8dk9p 3 месяца назад
Применение Inspect Styles уменьшает долю рутинной работы по переписыванию стилей. Этот урок и урок Figma без Dev Mode несут достаточно информации по уверенной работе с Figma и имеют низкий порог вхождения, что несомненно будет интересно для начинающих. Благодарю за доступное изложение материала.
@ITDoctor
@ITDoctor 3 месяца назад
Спасибо что оценили. Уже готовлю урок такой же максимально подробный по Pixso. Так же будет на ютубе и плюс в бесплатном курсе с доп заданиями, подробнее писал тут t.me/itdoctor_official/1094
@user-kb4kd2vd7v
@user-kb4kd2vd7v 3 месяца назад
Отличный урок, спасибо большое!!😊😊😊
@ITDoctor
@ITDoctor 3 месяца назад
Спасибо что оценили
@Yuriny_Zatei
@Yuriny_Zatei 3 месяца назад
Блин, классно. Спасибо за такую возможность
@ITDoctor
@ITDoctor 3 месяца назад
Спасибо что оценили
@georgevtushenko4005
@georgevtushenko4005 11 дней назад
а что за тема для vs code используется? очень понравилась подсветка цветов в CSS по всей длине
@ITDoctor
@ITDoctor 11 дней назад
тема Dracula Official а цвета в css подсвечиваются благодаря расширению Color Highlight
@user-bo7ot5zy9r
@user-bo7ot5zy9r 3 месяца назад
Исмаил, здравствуйте, подскажите, пожалуйста, промокод есть на ваши курсы на Stepik?)
@ITDoctor
@ITDoctor 3 месяца назад
Здравствуйте. Можете мне в личку написать какой именно курс и я вам отвечу t.me/morph1995
Далее
Rose Burrito #shorts
00:35
Просмотров 6 млн