Курс Frontend Developer з нуля:
сучасна верстка та
основи веброзробки

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

1. Вступ. Що таке HTML, CSS та JavaScript. Правила оформлення коду. Перший кодінг.

2. Блокові та рядкові елементи. Інструменти розробника(dev tools). Блокова модель. Методи підключення CSS. Основи CSS: перші кроки у стилізацію.

3. Робота з FTP, створення робочого простору, робота з файлами. Формування URL для підключення файлів

4. Практична верстка. Властивість box-sizing. Властивість display: inline-block. Класнеймінг та простір імен. Поняття кросбраузерності. Reset.css

5. Підключення шрифтів. Знайомство з сервісом Google Fonts. Безпечні та варіативні шрифти. Формування відносних шляхів для підключення файлів проєкту. Імпорт стилів. Розширення структури проєкту.

6. Знайомство зі штучним інтелектом: Grok, ChatGPT, DeepSeek. Роль AI та його використання у розробці. HTML-таблиці та їх верстка. Створення навігації. Одиниці виміру: px, em, rem, vh, vw. Перехід проєкту на використання em та rem.

7. Колір в CSS. Специфічність стилів. Використання CSS-селекторів.

8. Flexbox layout. Основи гнучкої верстки.

9. CSS псевдокласи :first-child, :last-child, :nth-child. CSS властивість z-index.

10. Властивість position та його значення static, relative, absolute, fixed, sticky.

11. Псевдоелементи ::before і ::after.

12. Верстка блоку «хронологія подій». Відпрацювання нестандартних бордерів у блоках. Верстка блоку «Цитата».

13. Методологія BEM: блок, елемент, модифікатор, мікси. Функція calc(). CSS-змінні. Конструктор іконок. Конструктор кнопок. CSS псевдокласи :hover, :active, :focus. Використання змінних css.

14. Робота з формами: <input>, <textarea> та <select>

15. Конструктор форм. Стилізація чекбоксів, радіокнопок та інпутів для завантаження файлів.

16. Старт проєкту. Знайомство з Node.js, npm, Vite.js, SCSS та Handlebars. Робота з Vite.js, вивчення SCSS та Handlebars.Закріплення пройденого матеріалу методології BEM. Верстка проєкту.

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

1. CSS-анімації: властивість transform, правило @keyframes та CSS animation. Анімація блоків. Використання AI для анімації (Grok, ChatGPT, DeepSeek).

2. Розробка покадрової анімації за допомогою властивості steps(). Вивчення структури SVG-розмітки: базові та складні елементи, атрибути та оптимізація.

3. Сучасні інструменти вебанімації: бібліотеки AOS.js, GSAP, та інтеграція JSON-анімацій через Lottie.

4. Динамічні SVG-елементи та анімація з використанням anime.js

5. Адаптивна верстка та медіазапити: Mobile First і Desktop First

6. Робота з макетами в Figma. Практична робота з адаптивною версткою

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

1. Vite.js. Знайомство з фреймворком Tailwind CSS та його основними принципами.

2. Робота з Tailwind CSS. Tailwind CSS у проєкті. Закріплення навичок на практиці.

3. Vite.js. Знайомство з Git. Створення проєкту на Git. Старт проєкту.

4. Робота над проєктом. Git та публікація проєктів на GitHub Pages. SVG-спрайти. Старт роботи з JavaScript. Змінні: let, const, var, використання console.log.

5. Git–робота з гілками: створення та перемикання. Плагін NiceSelect2. Типи даних у JavaScript: string, number, boolean, null, undefined, object, array. Оператор typeof.

6. Git–merge гілок та робота з ними. Бібліотека Tasty CSS-animated Hamburgers для бургер-меню. Оператори порівняння та умовні конструкції в JavaScript: if/else, switch.

7. Робота над проєктом.

8. Пошук роботи та підготовка до працевлаштування