tutspluscom
Подраздел envato, продает курсы по всем разным направлениям, не считая разработки. Откройте для себя тысячи бесплатных обучающих программ, созданных творческими людьми для творческих людей.
Figma => HTML: Конвертируем дизайн в HTML
Figma to HTML: Code Up a Single-Page Design
★4.5 (всего оценок - 12)
Продолжительность
1 ч 56 мин
Категория
FigmaКоличество уроков
12 Видео
Дата добавления
1 июл. 2019 г., 17:56
Язык
Английский
Дата выхода
10 апр. 2019 г., 20:51
Дата обновления
29 апр. 2026 г., 03:43
Этот курс поможет вам уверенно пройти путь от готового макета в Figma к чистой и аккуратной верстке на HTML и CSS. Вы узнаете, как грамотно работать с дизайном, создавать гибкие сетки и превращать визуальные элементы в полноценную веб‑страницу.
Что вы изучите в этом курсе
Программа курса построена так, чтобы шаг за шагом провести вас через весь процесс конвертации дизайна из Figma в структуру веб‑страницы. В конечном итоге вы получите глубокое понимание рабочего процесса верстальщика и сможете применять эти навыки в реальных проектах.
Работа с макетом в Figma
- Извлечение необходимых ресурсов: цвета, шрифты, изображения, расстояния
- Анализ слоев и компонентов для корректной структуры HTML
- Использование инструментов измерения и экспорта
Создание структуры HTML
- Построение семантической разметки
- Выбор подходящих тегов для различных блоков интерфейса
- Организация кода для удобства работы и масштабируемости
Применение CSS Grid и Flexbox
- Создание гибких адаптивных макетов
- Правильное использование направлений, отступов и выравнивания
- Комбинирование Grid и Flexbox для построения сложных интерфейсов
Практическая часть курса
На протяжении всего курса вы будете работать с одностраничным дизайном туристического сайта, постепенно превращая его в полностью функционирующий HTML‑макет. Каждая техника объясняется наглядно и подкрепляется примерами.
Материалы и ресурсы
Вы получите доступ к репозиторию, содержащему все исходные файлы и итоговый код проекта:
Кому подойдет этот курс
Курс создан для начинающих и продолжающих верстальщиков, дизайнеров, желающих лучше понимать работу фронтенда, и всех, кто хочет научиться переводить дизайн в стабильную, чистую и эстетичную HTML‑структуру.
Итоговые навыки после прохождения
- Умение анализировать и готовить дизайн из Figma для верстки
- Создание адаптивных сеток с CSS Grid и Flexbox
- Понимание ключевых принципов современной верстки
- Сборка полноценной одностраничной структуры HTML
После завершения курса вы сможете уверенно конвертировать макеты из Figma в чистый HTML‑код и применять эти навыки в реальных проектах.
- Урок 1.00:00:441.1 Figma to HTML
- Урок 2.00:10:382.1 Preparing to Begin
- Урок 3.00:11:382.2 Preparing Images
- Урок 4.00:13:452.3 Create the Basic Shell
- Урок 5.00:09:463.1 Create the Top Header
- Урок 6.00:16:463.2 Create the Main Header
- Урок 7.00:08:353.3 Create the Hero Header
- Урок 8.00:18:444.1 Create the Tours Section Grid
- Урок 9.00:13:244.2 Create the Best Offers Section
- Урок 10.00:07:514.3 Create the Blog Section
- Урок 11.00:02:195.1 Add the Footer
- Урок 12.00:02:055.2 Wrapping Up
Автор - tutspluscom
Комментарии