Курс Frontend Developer з нуля

Ти отримаєш не лише фундаментальні знання, але й навчишся використовувати найновіші технології та інструментами. Ти швидко навчишся оформляти сторінки так, щоб вони виглядали стильно та професійно. А головне ти закладеш міцний фундамент для подальшого розвитку в Front-end.

Програма курсу

МОДУЛЬ 1: Фундамент веброзробки: HTML, CSS, BEM

• Вступ
• Що таке HTML, CSS та JavaScript
• Правила оформлення коду
• Перший кодінг
• Блокові та рядкові елементи
• Інструменти розробника(dev tools)
• Блокова модель
• Методи підключення CSS
• Основи CSS: перші кроки у стилізацію
• Робота з FTP, створення робочого простору, робота з файлами
• Формування URL для підключення файлів
• Практична верстка
• Властивість box-sizing
• Властивість display: inline-block
• Класнеймінг та простір імен
• Поняття кросбраузерності
• Reset.css
• Підключення шрифтів
• Знайомство з сервісом Google Fonts
• Безпечні та варіативні шрифти
• Формування відносних шляхів для підключення файлів проєкту
• Імпорт стилів
• Розширення структури проєкту
• Знайомство зі штучним інтелектом: Grok, ChatGPT, DeepSeek. Роль AI та його використання у розробці
• HTML-таблиці та їх верстка
• Створення навігації
• Одиниці виміру: px, em, rem, vh, vw
• Перехід проєкту на використання em та rem
• Колір в CSS
• Специфічність стилів
• Використання CSS-селекторів
• Flexbox layout
• Основи гнучкої верстки
• CSS псевдокласи :first-child, :last-child, :nth-child
• CSS властивість z-index
• Властивість position та його значення static, relative, absolute, fixed, sticky
• Псевдоелементи ::before і ::after
• Верстка блоку "хронологія подій"
• Відпрацювання нестандартних бордерів у блоках
• Верстка блоку "Цитата"
• Методологія BEM: блок, елемент, модифікатор, мікси
• Функція calc()
• CSS-змінні
• Конструктор іконок
• Конструктор кнопок
• CSS псевдокласи :hover, :active, :focus
• Використання змінних css
• Робота з формами: <input>, <textarea> та <select>
• Конструктор форм
• Стилізація чекбоксів, радіокнопок та інпутів для завантаження файлів
• Старт проєкту
• Знайомство з Node.js, npm, Vite.js, SCSS та Handlebars
• Робота з Vite.js, вивчення SCSS та Handlebars
• Закріплення пройденого матеріалу методології BEM. Верстка проєкту

МОДУЛЬ 2: Динамічний веб та адаптивна верстка

• CSS-анімації: властивість transform, правило @keyframes та CSS animation
• Анімація блоків
• Використання AI для анімації (Grok, ChatGPT, DeepSeek)
• Розробка покадрової анімації за допомогою властивості steps()
• Вивчення структури SVG-розмітки: базові та складні елементи, атрибути та оптимізація
• Сучасні інструменти вебанімації: бібліотеки AOS.js, GSAP, та інтеграція JSON-анімацій через Lottie
• Динамічні SVG-елементи та анімація з використанням anime.js
• Адаптивна верстка та медіазапити: Mobile First і Desktop First
• Робота з макетами в Figma. Практична робота з адаптивною версткою

МОДУЛЬ 3: Фронтенд у дії: від макету до проєкту

• Vite.js
• Знайомство з фреймворком Tailwind CSS та його основними принципами
• Робота з Tailwind CSS
• Tailwind CSS у проєкті
• Закріплення навичок на практиці
• Vite.js
• Знайомство з Git
• Створення проєкту на Git
• Старт проєкту
• Робота над проєктом
• Git та публікація проєктів на GitHub Pages
• SVG-спрайти
• Старт роботи з JavaScript
• Змінні: let, const, var, використання console.log
• Git–робота з гілками: створення та перемикання
• Плагін NiceSelect2
• Типи даних у JavaScript: string, number, boolean, null, undefined, object, array
• Оператор typeof
• Git–merge гілок та робота з ними
• Бібліотека Tasty CSS-animated Hamburgers для бургер-меню
• Оператори порівняння та умовні конструкції в JavaScript: if/else, switch
• Робота над проєктом
• Пошук роботи та підготовка до працевлаштування

Навички які ти отримаєш після курсу

• Навички верстки сайтів будь-якої складності за макетами Figma
• Дотримання всіх сучасних вимог і стандартів
• Досвід використання найпопулярніших інструментів анімації
• Розробка інтерактивних елементів за допомогою JavaScript

Викладачі курсу

Ростислав Суслов - Senior HTML/Markup Developer