1,0×
00:00/01:21:16
5 способов жить без Dev Mode
Верстка сайта по макету из Figma без Dev Mode в бесплатной версии
Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также узнаете, как использовать CSS для стилизации элементов и создания адаптивного дизайна. В результате вы получите готовую веб-страницу, которая будет выглядеть точно так же, как в макете из Figma.
📌 Полезные материалы и задания к этому уроку: stepik.org/113393
💾 Репозиторий с кодом: github.com/...out_devmod
00:00:00 5 способов жить без Dev Mode
00:02:03 Начинаем верстать по макету из Figma
00:04:50 Структура проекта
00:07:13 Обзор макета
00:09:03 Начинаем писать код шапки и настраиваем контейнер
00:15:28 Пишем CSS для Header и работа с Perfect Pixel
00:25:21 Адаптивная версия для Header
00:34:32 Верстаем раздел с текстом, экспорт SVG, иерархия в коде
00:45:51 Верстаем раздел Services
00:57:48 Верстаем раздел Team
01:14:57 Размещение на GitHub Pages и тест со смартфона
⚡️ Эксклюзив на Boosty - boosty.to/itdoctor
💡 Telegram канал - t.me/...official/4
🎥 Курсы на Stepik - stepik.org/...3773/teach
ВКонтакте - vk.com/...ctorstudio
Rutube - rutube.ru/.../23500045/
#figma #html #css #itdoctor
📌 Полезные материалы и задания к этому уроку: stepik.org/113393
💾 Репозиторий с кодом: github.com/...out_devmod
00:00:00 5 способов жить без Dev Mode
00:02:03 Начинаем верстать по макету из Figma
00:04:50 Структура проекта
00:07:13 Обзор макета
00:09:03 Начинаем писать код шапки и настраиваем контейнер
00:15:28 Пишем CSS для Header и работа с Perfect Pixel
00:25:21 Адаптивная версия для Header
00:34:32 Верстаем раздел с текстом, экспорт SVG, иерархия в коде
00:45:51 Верстаем раздел Services
00:57:48 Верстаем раздел Team
01:14:57 Размещение на GitHub Pages и тест со смартфона
⚡️ Эксклюзив на Boosty - boosty.to/itdoctor
💡 Telegram канал - t.me/...official/4
🎥 Курсы на Stepik - stepik.org/...3773/teach
ВКонтакте - vk.com/...ctorstudio
Rutube - rutube.ru/.../23500045/
#figma #html #css #itdoctor
…