Frontend - курси від YouTube-каналу Навчаємося разом'(@itmentor)

Для кого ці курси?

Для тих, хто зацікавлений у створенні власного веб-сайту та бажає отримати всі необхідні знання та практичні навички для цього. Крім того, він стане в нагоді початківцям, які прагнуть увійти в IT-сферу та навчитися створювати веб-сайти та веб-застосунки. Курс також буде корисним для веб-дизайнерів, які хочуть глибше зрозуміти процеси верстання, а також для backend-розробників, які прагнуть розширити свої навички у сфері верстки для просування власної кар'єри.

На курсах від каналу "Навчаємося Разом" у 2020-2025 роках навчались студенти віком від 12 до 60 років
(запис на навчання для неповнолітніх студентів ініціюють дорослі особи).

Зображення, що відображає онлайн-освіту та електронне навчання у сфері веб-розробки та програмування, яке підійде для різноманітної аудиторії будь-якого віку. — Це просто зображення яке згенерувала нейронна мережа на запит про онлайн-навчання людей різного віку.

Слушна думка:

"Кожен, хто перестає вчитися, старіє, – не важливо, в 20 або 80 років, – а будь-який інший, хто продовжує вчитися, залишається молодим. Найважливіше в житті – це зберегти мозок молодим."
- Генрі Форд

^~10.10.25 Курс Frontend-розробка^{320 годин}

Курс складається з трьох частин. Наведені нижче переліки тематичних блоків не є вичерпними. Крім наведених нижче технологій окрема увага приділяється налаштуваню та використанню інструментів розробника (VS Code, Chrome DevTools, Git/GitHub/GitHubPages, npm тощо)

*послідовність вказаних тематичних блоків може не відповідати послідовності їх вивчення

HTML/CSS ^{90 годин}

Структура сторінок
HTML-елементи
Семантика
Текст, зображення та посилання
Форми та ix стилізація
Мультімедіа
CSS-селектори та специфічність
Шрифти
Box-model, Позиціонування
Flexbox та Grid Layout
Кольори та фонові зображення
Змінні та функції в CSS
Переходи та Анімація
@media, адаптивні зображення, бургер-меню
@layer, Popover API, Carousel API
Препроцесори (SCSS)
CSS-бібліотеки та фреймворки (MVP, Bootstrap, Tailwind)
Багато практики на уроках та не менш ніж 10 домашніх завдань/проектів з перевіркою та фідбеком
^бонусДоступ до 100+ високоякісних figma-макетів різної ступені складності з сайту frontendmentor.io

JavaScript/TypeScript ^{180 годин}

Лексична структура, змінні
Типи даних та їх методи
Оператори
Умовні конструкції та цикли
Об'єкти, масиви та їх методи
Функції
Обробка помилок
Класи
Модулі
DOM, Events
Canvas
Асинхронний JavaScript
Валідація форм та RegExp
URL, History, Webstorage
Тестування коду (Jest)
Документація до проекту (jsDoc)
TypeScript - базові типи даних
TypeScript - Union Types, Type Aliases, Interfaces
TypeScript - Type Assertion та Literal Types
TypeScript - Generics, Conditional Types
TypeScript - Void, Unknown, Never
TypeScript - Типізація функцій
Багато практики на уроках та не менш ніж 30 домашніх завдань/проектівз перевіркою та фідбеком

React 19/Next.js 15^{50 годин}

Налаштування середовища розробки з Vite
JSX та TSX синтаксис
React Components, Props, State
React Hooks (useState, useEffect, useContext, useRef)
Нові хуки React 19 (useOptimistic, useFormStatus, useFormState)
Actions в React 19
Асинхронні компоненти в React 19
Suspense та lazy loading
Оптимізація рендерингу та Server Components
Next.js - розгортання проекту
Next.js App Router
Next.js Data Fetching
Next.js Rendering стратегії
Next.js Partial Prerendering
Next.js Caching та Revalidation
Next.js Styling (CSS Modules, Tailwind)
Next.js Оптимізація та аналітика
Next.js Authentication з NextAuth.js
Next.js Deploying (Vercel, Render)
Багато практики на уроках:
1. Проект з Vite та React 19
2. Проект з Next.js 15 App Router
3. Великий проект з використанням Next.js 15, React 19, TypeScript, Tailwind CSS та Server Components

Курс HTML/CSS^{90 годин}

Можливість вивчати тільки один з трьох блоків повного курсу "Frontend-розробка" без обов'язку продовжувати навчання з JavaScript. Для цього курсу доступні три форми навчання.

Наведені нижче переліки тематичних блоків не є вичерпними. Крім наведених нижче технологій окрема увага приділяється налаштуваню та використанню інструментів розробника (VS Code, Chrome DevTools, Git/GitHub/GitHubPages, npm тощо)

HTML/CSS ^{90 годин}

Структура сторінок
HTML-елементи
Семантика
Текст, зображення та посилання
Форми та ix стилізація
Мультімедіа
CSS-селектори та специфічність
Шрифти
Box-model, Позиціонування
Flexbox та Grid Layout
Кольори та фонові зображення
Змінні та функції в CSS
Переходи та Анімація
@media, адаптивні зображення, бургер-меню
@layer, Popover API, Carousel API
Препроцесори (SCSS)
CSS-бібліотеки та фреймворки (MVP, Bootstrap, Tailwind)
Багато практики на уроках та не менш ніж 10 домашніх завдань/проектів з перевіркою та фідбеком
^бонусДоступ до 100+ високоякісних figma-макетів різної ступені складності з сайту frontendmentor.io

Курс JavaScript/TypeScript + React/Next.js^{180 годин}

Можливість одразу вивчати JavaScript для тих, хто має хочаб базові знання з HTML/CSS. Для цього курсу доступні три форми навчання.

JavaScript/TypeScript ^{180 годин}

Лексична структура, змінні
Типи даних та їх методи
Оператори
Умовні конструкції та цикли
Об'єкти, масиви та їх методи
Функції
Обробка помилок
Класи
Модулі
DOM, Events
Canvas
Асинхронний JavaScript
Валідація форм та RegExp
URL, History, Webstorage
Тестування коду (Jest)
Документація до проекту (jsDoc)
TypeScript - базові типи даних
TypeScript - Union Types, Type Aliases, Interfaces
TypeScript - Type Assertion та Literal Types
TypeScript - Generics, Conditional Types
TypeScript - Void, Unknown, Never
TypeScript - Типізація функцій
Багато практики на уроках та не менш ніж 30 домашніх завдань/проектівз перевіркою та фідбеком

React 19/Next.js 15^{50 годин}

Налаштування середовища розробки з Vite
JSX та TSX синтаксис
React Components, Props, State
React Hooks (useState, useEffect, useContext, useRef)
Нові хуки React 19 (useOptimistic, useFormStatus, useFormState)
Actions в React 19
Асинхронні компоненти в React 19
Suspense та lazy loading
Оптимізація рендерингу та Server Components
Next.js - розгортання проекту
Next.js App Router
Next.js Data Fetching
Next.js Rendering стратегії
Next.js Partial Prerendering
Next.js Caching та Revalidation
Next.js Styling (CSS Modules, Tailwind)
Next.js Оптимізація та аналітика
Next.js Authentication з NextAuth.js
Next.js Deploying (Vercel, Render)
Багато практики на уроках:
1. Проект з Vite та React 19
2. Проект з Next.js 15 App Router
3. Великий проект з використанням Next.js 15, React 19, TypeScript, Tailwind CSS та Server Components

Як це працює?

Вам пропонується три організаційні моделі навчання, оберіть найкращу для себе. Доступ до всіх матеріалів курсу для будь-якого варіанту навчання не має обмежень в часі (поки будуть функціонувати сервіси Google)

Група онлайн^{за графіком}

Три рази на тиждень (вечірній час, загально 8 годин на тиждень)
Заняття в zoom
Додаткові навчальні матеріали в Google Classroom
Збережені відеозаписи уроків (приватний доступ)
Архіви коду ментора з уроків на Google Drive
Онлайн-перевірка домашніх завдань
Закритий чат для студентів групи та ментора-автора курсу (підтримка 16 годин на добу, 7 днів на тиждень)
За потреби індивідуальна zoom-консультація з трансляцією коду
Тривалість курсу по календарю не менше 10 місяців
Підтримка ментора +2 місяці від дати останнього уроку курсу
Початок навчання орієнтовно 10.10.25

Ціни:

повний курс Frontend
~~16000~~ 12000 (6*2000)
- пропозиція дійсна до 15.08.25

З менторством^{вільний графік}

Навчання з власною швидкістю та графіком
Перегляд відеозаписів уроків онлайн-групи
Додаткові навчальні матеріали в Google Classroom
Архіви коду ментора з уроків на Google Drive
Фідбек по домашнім завданням
Чат з ментором-автором курсу (підтримка 16 годин на добу, 7 днів на тиждень)
За потреби індивідуальна zoom-консультація з трансляцією коду
Підтримка ментора доступна 12 місяців з моменту відкриття першого уроку курсу
Доступ до уроків надається порційно, з орієнтиром на виконані домашні завдання.
Початок навчання в будь-який момент

Ціни:

тільки HTML/CSS(менторство на 4 місяців) ~~3000~~ 2000 (2*1000)
- пропозиція дійсна до 07.07.25.

тільки JS/TS(менторство на 8 місяців) ~~9000~~ 7500 (5*1500)
- пропозиція дійсна до 07.07.25

повний курс Frontend(менторство на 12 місяців) ~~12000~~ 9000 (6*1500)
- пропозиція дійсна до 07.07.25.

Без менторства^{без обмежень в часі}

Навчання з власною швидкістю та графіком
Перегляд відеозаписів уроків онлайн-групи
Додаткові навчальні матеріали в Google Classroom
Архіви коду ментора з уроків на Google Drive
Доступ до всіх матеріалів та відеозаписів уроків курсу надається одразу.
Без можливості отримати фідбек по домашнім завданням
Без спілкування з автором курсу (крім можливих питань доступу до матеріалів)
Без індивідуального онлайн консультування
Початок навчання в будь-який момент

Ціни:

тільки JS/TS ~~6000~~ 4000 (2*2000)
- пропозиція дійсна до 15.08.25

повний курс Frontend ~~8000~~ 5000 (2*2500)
- пропозиція дійсна до 15.08.25.