Верстка сайта по макету из Figma используя плагин Inspect Styles
HTML-код
- Опубликовано: 30 сен 2024
- Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также узнаете, как использовать CSS для стилизации элементов и создания адаптивного дизайна. В результате вы получите готовый фрагмент веб-страницы, который будет выглядеть точно так же, как в макете из Figma.
• Верстка сайта по макет...
📌 Полезные материалы и задания к этому уроку: stepik.org/113393
💾 Репозиторий с кодом: github.com/mor...
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/itdo...
💡 Telegram канал - t.me/itdoctor_...
🎥 Курсы на Stepik - stepik.org/use...
ВКонтакте - itdocto...
Яндекс Дзен - zen.yandex.ru/...
Rutube - rutube.ru/chan...
#figma #html #css #itdoctor
Этот новый урок доступен вам БЕСПЛАТНО в курсе Сайт на Wordpress, Верстка сайта и перенос на CMS ( stepik.org/113393 ) в модуле "Верстка из Figma без Dev Mode". На Stepik доступны задания и дополнительные материалы, а так же видео разбито на отдельные фрагменты для вашего удобства, чтобы не смотреть большое видео за один раз.
отлично! у вас талант объяснять,залип на ваши уроки и долго такой контент искал.
Спасибо большое за добрые слова. Рад что мои видео вам нравятся и приносят пользу
Блин, классно. Спасибо за такую возможность
Спасибо что оценили
Отличный урок, спасибо большое!!😊😊😊
Спасибо что оценили
Применение Inspect Styles уменьшает долю рутинной работы по переписыванию стилей. Этот урок и урок Figma без Dev Mode несут достаточно информации по уверенной работе с Figma и имеют низкий порог вхождения, что несомненно будет интересно для начинающих. Благодарю за доступное изложение материала.
Спасибо что оценили. Уже готовлю урок такой же максимально подробный по Pixso. Так же будет на ютубе и плюс в бесплатном курсе с доп заданиями, подробнее писал тут t.me/itdoctor_official/1094
а что за тема для vs code используется? очень понравилась подсветка цветов в CSS по всей длине
тема Dracula Official а цвета в css подсвечиваются благодаря расширению Color Highlight
Исмаил, здравствуйте, подскажите, пожалуйста, промокод есть на ваши курсы на Stepik?)
Здравствуйте. Можете мне в личку написать какой именно курс и я вам отвечу t.me/morph1995