01Як працює інтернет
Основа
Фундаментальні знання про роботу мережі, без яких неможливо розуміти процеси у браузері.
HTTP / HTTPSDNSБраузериХостингDomain Name
/mentor
Сашко Ратушний · front-end developer
Навчання і менторство у веб-розробці.
Привіт. Я Олександр — JavaScript-інженер з Кременчука з 8+ роками комерційного досвіду. Викладаю фронтенд з 2020 року, мої студенти працюють в українських і міжнародних компаніях.
Онлайн · Україна та світ📍 Кременчук — офлайнJS · TS · React8+ років досвіду
/* mentor.cat — hello world */
§ 01
Для кого
Менторство працює тоді, коли є конкретна задача. Знайди свій варіант — або напиши мені, якщо не впізнаєш себе.
01 — з нуля
Ніколи не писав коду
Хочеш змінити професію або просто спробувати. Почнемо з HTML, поступово прийдемо до React. Без поспіху — у твоєму темпі.
02 — застряг
Дивлюсь туторіали, але не виходить
Курси є, інформації забагато, а власний проект не зрушується. Розкладемо знання по поличках і збудуємо одне реальне портфоліо.
03 — шукаю роботу
Знаю код, але мовчать рекрутери
Перепишемо CV, оживимо GitHub, проведемо мок-співбесіди, відрепетируємо переговори. До оферу.
§ 02
Фронтенд та бекенд
Веб-розробник умовно ділиться на дві ролі. Я викладаю фронтенд — але важливо знати, з чим він взаємодіє і де закінчується твоя зона відповідальності.
// сторона користувача · браузер
Фронтенд
Це я. Фронтенд-розробник створює повноцінні веб-сайти і додатки — не лише «малює» UI, а й пише логіку, працює з формами, авторизацією, інтегрує API, обробляє стан, валідацію, маршрутизацію, кеш, помилки. Це повноцінний інженер, що відповідає за все, що користувач бачить і робить у браузері.
- Інтерфейс, верстка, респонсив
- Форми, валідація, авторизація
- Стан, бізнес-логіка у клієнті
- Інтеграція з API (REST, GraphQL)
- Standalone-додатки (PWA, SPA)
HTMLCSSJavaScriptTypeScriptReact
// сторона сервера · backend
Бекенд
Бекенд-розробник створює власний API з нуля — пише серверну логіку, проектує базу даних, обробляє паролі та платежі, налаштовує безпеку, інфраструктуру, моніторинг. Все, що відбувається після того, як користувач натиснув кнопку, — його робота.
- API з нуля (REST / GraphQL)
- Бази даних, схеми, міграції
- Авторизація, токени, безпека
- Платежі, інтеграції, фонові задачі
- Інфраструктура, деплой, моніторинг
Node.jsPythonPostgreSQLRedisDocker
Фронтенд усе одно може створювати повноцінні сайти, інтернет-магазини, сервіси та додатки без глибоких знань бекенду — за допомогою допоміжних сервісів, яких сьогодні величезна кількість.
§ 03
Що ти вивчиш
Структурована програма навчання фронтенд-розробки — від основ HTML та CSS до повноцінної розробки інтерфейсів, адаптована до реальних вимог сучасних проєктів.
базове — обов'язково рекомендовано опціонально
02HTML
Фундамент
Семантика, форми, доступність — те, що відрізняє верстальника від інженера.
Семантичні тегиФорми + валідаціяAccessibilitySEO основиWeb Components
03CSS
Фундамент
CSS — окрема мова з власною логікою каскаду та специфічності. Вивчаємо систематично, від основ до сучасних підходів.
Селектори + каскадFlexboxGridResponsiveCSS VariablesАнімаціїBEM / CSS ModulesTailwind
04JavaScript
Серце фронтенду
Найбільший і найважливіший блок. Половину часу на менторстві ми проводимо тут.
Синтаксис + типиФункції + замиканняDOM + EventsОб'єкти + прототипиES6+Promise + async / awaitFetch + REST APIModulesEvent LoopError handling
05Git та GitHub
Інструмент
Базовий інструмент командної роботи. Без розуміння системи контролю версій неможлива повноцінна участь у командному процесі.
Базові командиBranches + mergePull RequestsConflict resolutionRebase
06Інструменти
Інструмент
DevTools, термінал, npm — інструменти щоденної роботи, знання яких суттєво підвищує продуктивність.
Chrome DevToolsТерміналnpm / package.jsonViteESLint + PrettierVS Code
07React
Фреймворк
Найпоширеніший фронтенд-фреймворк у сучасних проєктах. Вивчаємо глибоко — з розумінням принципів, а не лише синтаксису.
Компоненти + propsuseState + useEffectСписок + ключіFormsContext APIRouterCustom hooksPerformanceReact QueryNext.js
08TypeScript
Просунутий
Сучасний стандарт у більшості проєктів. Засвоюється природно після JavaScript — додає типізацію без кардинальної зміни підходу.
Базові типиInterfaces + typesGenericsUtility typesType narrowing
09Тестування
Просунутий
Важлива складова культури якісного коду. Розуміння тестування суттєво підвищує рівень розробника.
Vitest / JestTesting LibraryE2E (Playwright)
10AI-інструменти
Опціонально
Не замінює знання, але суттєво підвищує продуктивність. Навчаємось застосовувати свідомо — як підсилювач, а не замінник власного розуміння.
ClaudeGitHub CopilotCursor / AI IDEПромптинг для кодуAI код-рев'ю
11Робота та кар'єра
Фінал
Технічних знань недостатньо — важливо вміти презентувати себе, проходити технічні співбесіди та вести переговори.
Portfolio + GitHubCV + LinkedInТехнічні співбесідиТестові завданняПереговори зарплати
§ 04
Як працюємо
Все максимально просто. Без заплутаних тарифів, контрактів чи курсів-конвеєрів.
- 1
Ти залишаєш заявку
Коротка форма нижче. Або ж пиши напряму в Telegram.
- 2
Безкоштовний ознайомчий дзвінок
Знайомимось, визначаємо твої цілі та чи підходимо одне одному.
- 3
Складаємо план
Готую персональну програму під твій рівень та цілі.
- 4
Працюємо до результату
Живі сесії онлайн (або офлайн у Кременчуку), код-рев'ю твоїх проектів, підтримка в Telegram між зустрічами.
§ 05
Скільки це коштує
Дві опції — обирай свою. Знайомство безкоштовне в обох випадках.
Рекомендую
Індивідуально
1-на-1 з ментором
1000₴ / година
Тільки ти і я. Програма під твою ціль, гнучкий графік, повна увага.
- Персональна програма
- Код-рев'ю
- Telegram-чат між зустрічами
- Допомога з пошуком роботи
Економно
У групі
Заняття в міні-групі
400₴ / година
Група з 2–4 людей подібного рівня. Спільна програма, дешевше, мотивує не здаватися.
- Спільна програма групи
- Код-рев'ю
- Спільні проекти
- Можна перейти на 1-на-1 у будь-який момент
→ Перше заняття — без ризику: якщо вирішиш не продовжувати, можеш за нього не платити. Далі — оплата по факту проведених годин, без передоплат.
§ 06
Що кажуть студенти
Кілька слів від тих, хто пройшов менторство та навчання.
“
На уроках панувала дружня атмосфера. Сашко доступно пояснював усі питання, що виникали під час навчання. Інформація подавалася чітко та структуровано. Фідбек по домашніх завданнях був зрозумілим і допомагав покращити якість коду та уникати помилок. Залишилися тільки позитивні враження після навчання.
Вячеслав А.Middle Frontend Developer
“
Сашко це людина, завдяки якій почався мій шлях у програмуванні. Приблизно 5 років тому я вирішив спробувати себе на курсах з фронтенд розробки, і Сашко був моїм наставником та головним мотиватором у цій справі. Він дуже професійний, відданий своїй справі і просто цікава людина, яка надихає та мотивує до розвитку й навчання. Ми досі спілкуємося і я завжди можу звернутися до нього за порадою.
§ 07
Часті питання
Якщо не знайшов відповідь — напиши мені у Telegram, я відповім.
Залежить від твого старту і скільки годин на тиждень ти можеш приділяти навчанню. Реальні рамки: з нуля при 10–15 годинах на тиждень — 6–9 місяців. Якщо вже маєш базу — 2–4 місяці.
Онлайн через Google Meet або Zoom — підходить для будь-кого, незалежно від міста. Офлайн — у Кременчуку, в кав'ярні або коворкінгу. Обирай що зручно.
Українською. Документація і код, звичайно, англійською — паралельно підтягуємо технічну англійську.
Ні. Будь-хто, хто гарантує тобі роботу — продає тобі казку. Що я можу гарантувати: чесний фідбек, конкретний план і ту саму методику, з якою десятки моїх студентів вже працюють у фронтенді.
Просто розходимось — і за це перше заняття можеш не платити. Воно саме для того, щоб ми обоє чесно зрозуміли, чи це той варіант. Жодних контрактів і зобов'язань.
2-4 заняття на тиждень + 10–15 годин самостійної роботи.
§ 08
Залишити заявку
Кілька питань, щоб я зрозумів, з чим ти приходиш.