Мій курс фулстек-розробки

Цей сайт — мій особистий конспект з фулстек веброзробки: від верстки до сервера. Починався як курс по JavaScript, а виріс у повний шлях. Тут зібрані HTML, CSS, Bootstrap, Tailwind CSS, SCSS, JavaScript (від основ до просунутих тем), робота з DOM, асинхронність, події та API, TypeScript, React, Next.js, бекенд (Node/Express, бази даних, ORM, авторизація) та супровідні теми (Git, тестування, безпека, деплой) — плюс наскрізні проєкти.

Для чого цей курс

Я створив його для себе, щоб:

• систематизувати знання з усього стеку в одному місці;
• швидко повертатися до потрібної теми;
• вивчати веброзробку поступово — від верстки до фулстеку — без зайвого шуму;
• закріплювати теорію практикою й проєктами;
• мати простий і зрозумілий ресурс, який не відволікає від навчання.

Зміст курсу

Наразі це 293 уроки (теорія + практичні чекпойнти), згрупованих у 40 тематичних розділів:

1. HTML — структура документа, текст, посилання й зображення, адаптивні зображення, робота з SVG, семантика, форми, таблиці, метадані/SEO, доступність.
2. CSS — синтаксис, селектори й специфічність, блокова модель, типографіка, позиціонування, Flexbox, Grid, адаптивність, анімації.
3. Сучасний CSS — нативна вкладеність, :has()/:is()/:where(), container queries (@container), каскадні шари (@layer), логічні властивості, aspect-ratio, clamp(), темна тема.
4. Bootstrap — підключення, сітка, утиліти, компоненти, форми, JS-компоненти, кастомізація (Sass).
5. Tailwind CSS — utility-first підхід, встановлення, базові утиліти, Flexbox/Grid, адаптивність і стани, кастомізація тем, компоненти та @apply.
6. SCSS — препроцесор Sass, змінні й типи, вкладеність і &, міксини/функції/@extend, партіали з @use/@forward, директиви та цикли.
7. CSS Modules та CSS-in-JS — локальний scope стилів: проблема глобального CSS, CSS Modules (*.module.css, composes, :global, clsx, типізація), CSS-in-JS (styled-components/Emotion, стилі за пропсами, ThemeProvider), zero-runtime (vanilla-extract, Panda) і Server Components, вибір підходу.
8. Основи — синтаксис, змінні й типи, оператори, числа, рядки, регулярні вирази, розгалуження, цикли.
9. Масиви — масиви, посилання vs значення, методи масиву.
10. Функції — оголошення, чисті функції, область видимості, стрілкові функції, рекурсія.
11. Об'єкти та колекції — об'єкти, перебір, ?. і ??, spread/rest, деструктуризація, Map/Set, Symbol, ітератори та генератори.
12. Просунуті теми — колбеки, стек викликів, замикання, this, обробка помилок.
13. Сучасний JavaScript — синтаксис ES2023+: незмінні методи масивів (toSorted/toReversed/with/at), Object.groupBy, structuredClone, Object.hasOwn, логічне присвоєння (??=/||=/&&=), top-level await і динамічний import(), Proxy/Reflect, патерни проєктування (Module, Singleton, Factory, Observer, Strategy).
14. ООП — прототипи, конструктори, ES6-класи.
15. DOM — модель документа, навігація, створення вузлів, властивості й атрибути.
16. Події та браузер — події, делегування, форми, throttle/debounce, IntersectionObserver, BOM.
17. Web APIs та PWA — браузерні можливості: Canvas, Web Workers (фонові потоки), IndexedDB (клієнтська БД), Service Workers і стратегії кешування, PWA (маніфест, встановлення, офлайн), Web Components / Shadow DOM, Intl та i18n.
18. Інструменти та збірка — NPM, модулі, Webpack, бібліотеки, шаблонізація.
19. Vite — сучасний dev-сервер і збірка: створення проєкту, HMR, ассети/CSS/env, продакшн-збірка (Rollup), плагіни та конфігурація.
20. ESLint + Prettier — лінтинг і форматування: конфіг ESLint (flat config), правила та плагіни, Prettier, безконфліктна інтеграція, редактор/Git-хуки/CI.
21. Дані — JSON, зберігання на клієнті.
22. Асинхронність — таймери, проміси, async/await, цикл подій.
23. Мережа та сервер — протоколи, REST API, Fetch, CORS, Node.js.
24. Бекенд — Express, middleware, побудова REST API, бази даних, ORM (Prisma), автентифікація, конфігурація.
25. TypeScript — типи, інтерфейси, звуження типів, дженерики, класи, utility- та просунуті типи, декоратори.
26. React — JSX, компоненти, props, стан, події, хуки, Context, роутинг, оптимізація.
27. React + TypeScript — типізація props, стану (useState), подій і рефів, хуків (useReducer/useContext/кастомні), патерни (generic-компоненти, utility-типи).
28. TanStack Query — серверний стан: useQuery, useMutation, кешування та інвалідація, staleTime/gcTime, пагінація й оптимістичні оновлення.
29. Керування станом — глобальний клієнтський стан: Zustand (стор, селектори, persist), Redux Toolkit (createSlice, configureStore, useSelector/useDispatch, createAsyncThunk, RTK Query).
30. Дизайн-системи — токени й компоненти, Radix Primitives (headless + a11y), shadcn/ui (copy-paste компоненти), Storybook (ізольована розробка, історії, аддони).
31. Форми: React Hook Form + Zod — неконтрольовані форми й продуктивність, useForm/register/handleSubmit, валідація, схеми Zod (z.infer), інтеграція через zodResolver, Controller/useFieldArray.
32. tRPC (типобезпечний API) — end-to-end типобезпека без кодогенерації: initTRPC, процедури query/mutation з Zod-входами, вкладені роутери й контекст, типізований клієнт із TanStack Query, middleware та захищені процедури, TRPCError.
33. Next.js — App Router, лейаути, Server/Client-компоненти, отримання даних, Route Handlers, навігація, оптимізація й деплой.
34. Auth-провайдери — автентифікація через провайдерів: OAuth 2.0 / OpenID Connect, Auth.js (NextAuth) з провайдерами й сесіями, захист роутів через middleware, колбеки й ролі, Supabase Auth і RLS, refresh-токени, безпечне зберігання токенів.
35. Реалтайм (WebSockets / SSE) — транспорти реального часу: polling vs SSE vs WebSocket, Server-Sent Events (EventSource), WebSocket-протокол і API, Socket.io (події, кімнати, namespaces), патерни (broadcast, presence, автентифікація сокета), надійність (reconnect, heartbeat, доставка) і масштабування (Redis-adapter, керовані сервіси).
36. AI-інтеграція — LLM-фічі у застосунку: чат-API (ролі, токени, вартість, безпека ключа), перший виклик і багатоходова розмова, стрімінг відповіді, tool / function calling і агентний цикл, Vercel AI SDK з useChat, RAG (embeddings, конвеєр retrieval → generate), векторні БД (pgvector, Pinecone).
37. E2E-тести (Playwright) — наскрізне тестування: піраміда тестів, встановлення й запуск, локатори за роллю/текстом та авто-очікування, web-first перевірки, реальні сценарії (форми, авторизація через storageState, мокання мережі й MSW), Page Object, дебаг (codegen, trace viewer) і запуск у CI.
38. Супровідні теми — Git і командний рядок, тестування, веббезпека, деплой.
39. Проєкти — наскрізні проєкти (лендинг, калькулятор, To-Do, вікторина, галерея, погода, fullstack) і банк ідей.
40. Ресурси — добірка інструментів і довідників (валідатори, оптимізація зображень, документація).

Практичні чекпойнти («🎯 Практика: …») додано наприкінці кожного великого розділу.

Практика

Кожен великий розділ завершується чекпойнтом — сторінкою «🎯 Практика», де теорія закріплюється роботою:

• для JS-логіки — інтерактивний редактор прямо на сторінці: пишеш код, тиснеш «Запустити», авто-тести показують ✓/✗ (код зберігається в браузері). Редактор має розумне редагування (авто-парні дужки/лапки, авто-відступ) і автодоповнення — попап із ключових слів, вбудованих і твоїх ідентифікаторів (↑/↓, Tab/Enter — прийняти, Esc — сховати);
• для верстки та фреймворків — завдання з вимогами, підказками й згорнутим еталонним рішенням (плюс посилання на CodePen / StackBlitz).

Інтерактивні чекпойнти містять десятки авто-перевірюваних завдань (лише в JS-логіці їх близько 60). Окремий розділ «Проєкти» містить наскрізні проєкти рівня портфоліо (лендинг, калькулятор, To-Do, вікторина, галерея, погода з API, fullstack-нотатник) та банк ідей з десятками проєктів за рівнями складності.

Пошук

Угорі бічного меню є поле пошуку по всьому курсу (назви, заголовки й повний текст уроків) зі сніпетами й підсвіткою. Хоткей / фокусує пошук, ↑/↓ — навігація, Enter — перехід, Esc — очистити.

Індекс js/search-index.js генерується зі сторінок. Після додавання чи зміни уроків онови його скриптом:

python3 scripts/build-search-index.py

Навігація

На кожній сторінці зверху показано хлібні крихти (розділ › урок), а знизу — кнопки «← Назад» / «Далі →», що перетікають і між розділами. Разом із згорнутим бічним меню, прогрес-баром і пошуком це дає зручне пересування по курсу. Код у прикладах має підсвітку синтаксису.

На мобільних бічне меню згорнуте у висувну панель (шухляду), яку відкриває кнопка-бургер угорі ліворуч.

Авторизація та синхронізація прогресу

Курс використовує Firebase Authentication і Firestore для збереження прогресу в хмарі.

Навіщо потрібна авторизація

Без авторизації прогрес, нотатки та виділення зберігаються лише локально в браузері (localStorage) і зникають при очищенні кешу або при переході на інший пристрій. Після входу всі дані прив'язуються до акаунта і синхронізуються між будь-якими пристроями.

Як це працює

• Кожна сторінка уроку перевіряє авторизацію при завантаженні. Якщо користувач не увійшов — відбувається редирект на pages/login.html.
• Після підтвердження авторизації сторінка відкривається одразу з даних localStorage, а Firestore синхронізується у фоні — без блокування інтерфейсу.
• Зміни (прогрес, нотатки, виділення) зберігаються в localStorage миттєво і фоново записуються в Firestore.
• При наступному вході на будь-якому пристрої дані підтягуються з Firestore і мержаться з локальними.

Способи входу

• Google — один клік, рекомендований спосіб.
• Email + пароль — класична реєстрація.

Профіль

Сторінка pages/profile.html показує аватар, ім'я, email, загальний прогрес курсу (кількість і відсоток вивчених уроків, кількість нотаток) та прогрес по кожному розділу.

Увага: курс працює лише онлайн. Відкривання через file:// або без інтернету не підтримується — Firebase Auth і Firestore потребують мережевого з'єднання.

Інструменти учня

Прямо на сторінках уроків доступні:

• Виділення тексту — виділи фрагмент і натисни «Виділити», щоб зберегти жовту позначку; клік по ній прибирає виділення.
• Нотатки до уроку — кнопка «Нотатки» відкриває панель із текстовим полем (автозбереження, окремо для кожного уроку).
• Зведення нотаток — сторінка «📝 Мої нотатки» збирає всі нотатки в одному місці з переходом до уроку та кнопкою видалення.
• Позначка «вивчено» — кнопка на уроці; у меню з'являється ✓, лічильник по розділу та загальний прогрес-бар курсу.
• Мітки на розділах — кольорова мітка-статус (Важливо, Повторити, В процесі) на кожному розділі меню.

Усі дані зберігаються локально в localStorage і синхронізуються з Firestore після авторизації.

Структура проєкту

index.html                  — редірект на перший урок
css/style.css               — стилі сайту
js/nav.js                   — бічне меню (розділи, прогрес, мітки, мобільна шухляда)
js/course-tools.js          — виділення тексту, нотатки, позначка «вивчено»
js/firebase-config.js       — ініціалізація Firebase (Auth + Firestore)
js/auth-guard.js            — перевірка авторизації, фонова синхронізація з Firestore
js/practice.js              — рушій інтерактивних завдань (редактор + авто-тести)
js/search.js                — клієнтський пошук по курсу
js/search-index.js          — згенерований пошуковий індекс
pages/login.html            — сторінка входу (Google / email+password)
pages/profile.html          — профіль користувача та статистика прогресу
pages/notes.html            — зведення всіх нотаток із переходами до уроків
pages/*.html                — уроки курсу
pages/images/*              — ілюстрації та схеми
firestore.rules             — правила безпеки Firestore
scripts/                    — службові скрипти (генерація індексу, ін'єкція Firebase)

Навігація централізована: список уроків живе лише в js/nav.js. Щоб додати урок, достатньо створити сторінку в pages/ і дописати рядок у відповідний розділ масиву sections — жоден інший файл чіпати не потрібно.

Як запустити локально

Курс потребує мережевого підключення (Firebase). Відкривання через file:// не підтримується.

1. Запусти локальний сервер у папці проєкту, наприклад через Live Server у VS Code або:

   python3 -m http.server 8080
   

2. Відкрий http://localhost:8080 у браузері.
3. Увійди через Google або email+пароль — після цього доступний весь курс.

Якщо використовуєш Brave або інший браузер з вбудованим блокувальником — вимкни Shields для localhost, інакше Firebase Firestore буде заблокований.

Про стиль

Сайт зроблений у мінімалістичному стилі: простий фон, нейтральні кольори, чітка типографіка та зосередження на навчальному контенті. Ніяких яскравих акцентів, лише чистий інтерфейс і логіка подання матеріалу.

Про курс

Курс побудований як поступове вивчення фулстек-розробки: від верстки (HTML, CSS, Bootstrap) через JavaScript, TypeScript і фронтенд-фреймворки (React, Next.js) до серверної частини (Node/Express, бази даних, авторизація) та інфраструктури (Git, тестування, безпека, деплой). Кожен етап закріплюється практикою, а на межах великих блоків — наскрізними проєктами. Тут не багато декоративності — лише потрібні знання, логіка та практика.

Мета курсу — не просто прочитати матеріал, а реально зрозуміти, як влаштована веброзробка, і вміти будувати повноцінні застосунки від інтерфейсу до сервера.