Освойте полный цикл создания сайта: от идеи до реализации!
Сегодня успешный веб-специалист должен понимать как принципы дизайна, так и основы верстки. Этот курс объединяет два мира: вы научитесь проектировать современные и удобные интерфейсы в Figma — инструменте №1 для веб-дизайнеров, а затем воплотите свой дизайн в жизнь с помощью HTML и CSS, создав полноценный адаптивный сайт.
Два курса в одном: станьте универсальным специалистом
Программа курса состоит из двух больших разделов, которые логично дополняют друг друга. Вы не просто изучите инструменты, а создадите реальный проект — лендинг-пейдж, пройдя все этапы от прототипирования до загрузки на хостинг.
Что вы создадите и чему научитесь:
- Часть 1: Веб-дизайн в Figma. Вы освоите Figma с нуля, научитесь работать с фреймами, компонентами, стилями и создадите полный дизайн-макет сайта для десктопной и мобильной версий.
- Часть 2: Верстка сайта. Вы возьмете свой собственный макет из Figma и шаг за шагом сверстаете его, используя HTML5, CSS3, Flexbox и Grid. Вы научитесь делать сайт адаптивным и добавлять интерактивность с помощью JS-библиотек.
В результате вы получите не только знания, но и готовый проект для своего портфолио, подтверждающий ваши навыки как в дизайне, так и в верстке.
? Подробная программа курса
Раздел 1. Веб-дизайн
- Блок 1. Figma от А до Я (19 уроков): Полное изучение инструментария Figma: фреймы, формы, перо, текст, компоненты, стили, прототипирование.
- Блок 2. Дизайн. Десктоп версия (14 уроков): Создание дизайна лендинга для больших экранов, от сетки и переноса ТЗ до добавления графики и подготовки макета для верстки.
- Блок 3. Дизайн. Мобильная версия (8 уроков): Адаптация дизайна для смартфонов, работа с бутстрап-сеткой, создание мобильного меню.
Раздел 2. Верстка сайта (25 уроков)
Пошаговая верстка созданного макета. Вы изучите:
- Подготовку к верстке и базовую HTML-разметку.
- Стилизацию блоков с помощью CSS, включая фиксированное меню, экраны с проектами, калькулятор и контакты.
- Адаптивность: создание гибкого интерфейса, который хорошо смотрится на всех устройствах.
- Подключение и настройку JS-библиотеки Fullpage для создания эффекта полноэкранной прокрутки.
- Реализацию точечной навигации и главного меню.


Вы экономите:
Поторопитесь! Заканчивается через 
Юлия Подтвержденный клиент –
Верстка на Fullpage.js – это очень круто! Выглядит очень современно и эффектно. Понравилось, что показали, как с этим работать.
Екатерина Подтвержденный клиент –
Я прошел курс и сделал свой первый лендинг. И он адаптивный! И выглядит круто! И я сделал его сам! Я в восторге!
Ирина Подтвержденный клиент –
Figma – это любовь! После Photoshop – это просто глоток свежего воздуха. Курс помог быстро освоиться.
Андрей Подтвержденный клиент –
Это просто энциклопедия для веб-дизайнера! Разбирают и дизайн в Figma, и верстку. Все в одном месте. Очень полный курс.