Учебный план
О курсе
Онлайн курс «Верстка сайтов по макету Figma» — это программа профессиональной переподготовки, направленная на освоение практических навыков переноса дизайн-макетов из Figma в адаптивные веб-страницы с использованием HTML, CSS, Flexbox, CSS Grid, медиазапросов и базовых инструментов frontend-разработчика.
В рамках курса Вы изучите, как читать макет в Figma, определять структуру страницы, работать с отступами, размерами, цветами, шрифтами, сетками, компонентами, изображениями, иконками и состояниями элементов интерфейса.
Курс включает практическую работу с типовыми задачами верстальщика: анализ макета, подготовка файлов проекта, экспорт графики, построение HTML-структуры, подключение CSS, создание блоков, карточек, меню, форм, секций, адаптивных сеток и мобильных версий страницы.
Отдельный блок посвящён точности и качеству верстки. Вы рассмотрите pixel perfect на базовом уровне, соответствие макету, проверку размеров и отступов, работу с DevTools, адаптацию под разные экраны, кроссбраузерность, семантику и доступность.
Особое внимание уделяется взаимодействию с дизайнерским макетом. Вы изучите слои, фреймы, auto layout, компоненты, варианты, стили текста и цвета, подготовку ресурсов, экспорт изображений, SVG-иконок и правила работы с макетами, которые передаются в разработку.
Практический блок программы направлен на создание адаптивного сайта по макету Figma. Вы сможете сверстать учебный проект, проверить соответствие макету, настроить адаптивность, оформить код и защитить итоговую работу.
В ходе программы Вы освоите:
• чтение и анализ макетов в Figma;
• работу со слоями, фреймами, стилями, компонентами и ресурсами;
• экспорт изображений, иконок и графических элементов;
• HTML-разметку страниц по дизайн-макету;
• CSS-оформление, Flexbox, Grid и адаптивные сетки;
• медиазапросы и mobile-first подход;
• проверку соответствия макету через DevTools;
• создание итогового адаптивного сайта по Figma-макету.
Программа подойдёт начинающим web-разработчикам, верстальщикам, frontend-разработчикам начального уровня, веб-дизайнерам, студентам, фрилансерам и всем, кто хочет научиться переводить дизайн-макеты в рабочие веб-страницы.
Цели и задачи курса
Цель программы — сформировать у слушателей практические навыки верстки сайтов по макетам Figma с учетом адаптивности, точности и качества frontend-кода.
В рамках курса Вы освоите:
• макет через анализ структуры, фреймов, слоев, отступов, цветов и типографики;
• ресурсы через экспорт изображений, SVG, иконок и подготовку графики;
• верстку через HTML, CSS, семантику, блоки, формы, карточки и секции;
• адаптивность через Flexbox, CSS Grid, медиазапросы и mobile-first;
• качество через DevTools, проверку размеров, кроссбраузерность и доступность;
• практику через создание итогового сайта по учебному макету.
Программа даст ответы на следующие вопросы:
• Как читать макет в Figma перед версткой?
• Как определить структуру HTML-страницы по дизайну?
• Как переносить цвета, шрифты, отступы и размеры из макета?
• Как экспортировать изображения и SVG-иконки?
• Как сверстать адаптивный сайт по макету?
• Как проверить соответствие верстки дизайну?
• Как подготовить проект по Figma-макету для портфолио?
По окончании обучения Вы получите
Диплом о профессиональной переподготовке, подтверждающий освоение программы «Верстка сайтов по макету Figma» и базовые компетенции в области HTML/CSS-верстки по дизайн-макетам.
Учебный план курса
• Введение в верстку по макету
• Роль Figma в frontend-разработке
• Интерфейс Figma для разработчика
• Фреймы, слои и группы
• Компоненты и варианты
• Auto layout на базовом уровне
• Стили текста и цвета
• Измерение размеров и отступов
• Работа с сетками макета
• Экспорт изображений
• Экспорт SVG-иконок
• Подготовка файлов проекта
• Анализ структуры страницы
• HTML-разметка по макету
• Семантические теги
• Блоки, секции и контейнеры
• Подключение CSS
• Типографика в CSS
• Цвета, фоны и границы
• Отступы и размеры
• Блочная модель
• Flexbox для блоков макета
• CSS Grid для сеток
• Верстка шапки сайта
• Верстка меню
• Верстка карточек
• Верстка форм
• Верстка секций лендинга
• Адаптивная верстка
• Медиазапросы
• Mobile-first подход
• Pixel perfect на базовом уровне
• Проверка верстки в DevTools
• Кроссбраузерность на базовом уровне
• Типичные ошибки верстки по макету
• Итоговый проект: адаптивный сайт по макету Figma
• Итоговая аттестация — тестирование и защита проекта
Что нужно для поступления на программу:
Для поступления Вам необходимо прислать скан-копии или фотографии документов об образовании, паспортные данные и удаленно заключить договор. Гражданам Российской Федерации потребуются:
• Паспорт или другой документ, удостоверяющий личность или гражданство;
• Страховой номер индивидуального лицевого счета (СНИЛС);
• Документ об образовании и квалификации (фотография или скан-копия);
• Справка об обучении в организации высшего или среднего профессионального образования, если Вы в настоящее время являетесь студентом (фотография или скан-копия);
• Документ, подтверждающий факт изменения фамилии, имени или отчества (при необходимости) (фотография или скан-копия).
Гражданам иностранных государств и лицам без гражданства следует уточнить список необходимых сведений и документов в отделе организации приема по телефону или через форму заявки на консультацию.
Выгоды и скидки, варианты оплаты, рассрочка платежа:
• Вы сможете вернуть 13% от стоимости обучения в виде социального налогового вычета, обратившись в налоговую службу по месту постоянной регистрации.
• Чтобы запросить документы для получения налогового вычета, необходимо обратиться в методический отдел, написав нам на электронную почту mcnokurs@yandex.ru.
• Проверка документов после подачи в ФНС осуществляется в течение трех месяцев. Если ответ положительный, средства возвращаются.
• Обратите внимание, что декларация и заявление заполняются и подаются слушателем самостоятельно.
• (Нормативное обоснование получения налогового вычета регламентировано статьями 78, 80, 83, 88, 219 Налогового кодекса РФ).
• Беспроцентная рассрочка
• Вы можете получить беспроцентную рассрочку на программы профессиональной переподготовки.
Для получения дополнительной информации о рассрочке на конкретную программу обратитесь к специалисту приемной комиссии
