Опануйте повний цикл створення сайту: від ідеї до реалізації!
Сьогодні успішний веб-фахівець повинен розуміти як принципи дизайну, так і основи верстки. Цей курс об’єднує два світи: ви навчитеся проєктувати сучасні та зручні інтерфейси в 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 для створення ефекту повноекранної прокрутки.
- Реалізацію точкової навігації та головного меню.


Ви економите:
Покваптеся! Закінчується через
Професійно працювати в Figma: від основ до компонентів та прототипування.
Андрій Підтверджений клієнт –
Це просто енциклопедія для веб-дизайнера! Розбирають і дизайн в Figma, і верстку. Все в одному місці. Дуже повний курс.
Катерина Підтверджений клієнт –
Я пройшов курс і зробив свій перший лендінг. І він адаптивний! І виглядає круто! І я зробив його сам! Я в захваті!
Ірина Підтверджений клієнт –
Figma – це любов! Після Photoshop – це просто ковток свіжого повітря. Курс допоміг швидко освоїтися.
Юлія Підтверджений клієнт –
Верстка на Fullpage.js – це дуже круто! Виглядає дуже сучасно і ефектно. Сподобалося, що показали, як з цим працювати.