Верстка сайта по макету из Figma используя плагин Inspect Styles
Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также узнаете, как использовать CSS для стилизации элементов и создания адаптивного дизайна. В результате вы получите готовый фрагмент веб-страницы, который будет выглядеть точно так же, как в макете из Figma.
https://youtu.be/ZGeCNkW7FKw
? Полезные материалы и задания к этому уроку: https://stepik.org/113393
? Репозиторий с кодом: https://github.com/morphIsmail/figma_fragment_1
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 - https://boosty.to/itdoctor
? Telegram канал - https://t.me/itdoctor_official/4
? Курсы на Stepik - https://stepik.org/users/387773773/teach
ВКонтакте - https://vk.com/itdoctorstudio
Яндекс Дзен - https://zen.yandex.ru/itdoctor
#figma #html #css #itdoctor
Видео Верстка сайта по макету из Figma используя плагин Inspect Styles автора ITDoctor
Видео Верстка сайта по макету из Figma используя плагин Inspect Styles автора ITDoctor
Показать
Похожие видео
Что они натворили в новой версии OpenServer 6.0.0, Как теперь работать с PHP и MySQL, Установка Word#14 Работа с элементами форм на Vue.js14. Установка Hyper-V в Windows 10.. :-) Сказки за КОМПЬЮТЕРЫ.#1 Установка и подключение Vue.js, изучаем основы фреймворка Vue.jsвыполнение проект 5#9 Вычисляемые свойства и кэширование, отличие вычисляемых свойств от методов на Vue.jsВидео 2 — сделано в ClipchampНеубиваемая игровая мышка на смену твоему Razer#7 Синтаксис шаблонов, интерполяция, директивы и сокращенная запись на Vue.js#4 Условия и циклы, директива v-if и v-for на фреймворке Vue.jsВерстка сайта по макету из Figma без Dev Mode в бесплатной версииОперационные системы. Защита 5 этапа индивидуального проекта#2 Декларативная отрисовка на Vue.js и директива v-bind на Vue.js#13 Обработка событий и модификаторы клавиш на Vue.js1000032706.mp4Дерево, анимация ветра. Blender.#10 Работа с классами и стилями на фреймворке Vue.js#16 Пишем финальный проект на Vue.jsСамая загадочная игра в WindowsСделал свою игру!