Ресурси для навчання
Корисні YouTube-канали, блоги, документація та інтерактивні інструменти для вивчення веб-розробки
YouTube-канали
Українською
Фрілансер по життю
Найбільший україномовний канал про веб-розробку. 300K+ підписників, курси з HTML/CSS верстки та JavaScript. Ведучий — Женя Андріканіч.
Maksym Rudnyi
Senior Software Engineer з 10+ роками досвіду. Один з небагатьох, хто покриває React та Next.js українською.
CodeUA
Безкоштовні курси програмування українською від CyberBionic Systematics. HTML5, CSS3, Git, основи програмування.
GoIT
Одна з найбільших IT-освітніх платформ України. Безкоштовні марафони з HTML/CSS та вступні матеріали.
Hillel IT School
IT-школа з 400+ викладачами. Лекції, вебінари та навчальні матеріали з фронтенду, JavaScript, React.
ITVDN
Освітня платформа з Києва. Безкоштовний курс JavaScript українською, структуровані навчальні шляхи.
fwdays
Записи з найбільших українських tech-конференцій: JavaScript fwdays, Frontend fwdays. Доповіді від досвідчених розробників.
Англійською
Fireship
3M+ підписників. Короткі та візуальні пояснення. Формат "100 Seconds" — ідеальний вступ до будь-якої технології.
Kevin Powell
800K+ підписників. Найкращий канал про CSS. Flexbox, Grid, анімації, responsive design — все пояснено спокійно та візуально.
Web Dev Simplified
1.5M+ підписників. Чудові пояснення React-хуків (useState, useEffect, useRef — кожен окремим відео), JavaScript концепцій та проектів.
Traversy Media
2M+ підписників. "Crash Course" формат — повноцінний вступ до технології за 30-60 хвилин. Git, JS, React, Node.js.
The Net Ninja
1M+ підписників. Крок-за-кроком серії уроків. Чудові плейлисти по TypeScript та Next.js для початківців.
Programming with Mosh
4M+ підписників. Професійний та структурований стиль. JavaScript за 1 годину, ES6 за 1 годину.
freeCodeCamp
10M+ підписників. Довгі повноцінні курси безкоштовно. DOM Manipulation Full Course, повні курси React та Next.js.
Must watch — відео, які варто подивитися кожному
Git Explained in 100 Seconds
Fireship · Git
Блискавичний огляд Git за 100 секунд — ідеальний початок.
What the heck is the event loop anyway?
Philip Roberts (JSConf EU) · Event Loop
Легендарна доповідь (27 хв), яка змінила розуміння JavaScript для мільйонів розробників. Must watch!
Async Await in 100 Seconds
Fireship · Async/Await
Швидке пояснення async/await з візуалізаціями.
Learn Flexbox the Easy Way
Kevin Powell · CSS Flexbox
Повний гайд по Flexbox (34 хв) від найкращого CSS-ютубера.
CSS Grid in 100 Seconds
Fireship · CSS Grid
Швидкий огляд CSS Grid з прикладами.
TypeScript in 100 Seconds
Fireship · TypeScript
Навіщо потрібен TypeScript і що він додає до JavaScript.
React in 100 Seconds
Fireship · React
Що таке React, Virtual DOM, компоненти та JSX за 100 секунд.
Next.js in 100 Seconds
Fireship · Next.js
Вступ до Next.js: SSR, SSG, file-based routing.
Блоги та документація
MDN Web Docs
Головна документація веб-технологій від Mozilla. HTML, CSS, JavaScript — все в одному місці. Найавторитетніше джерело.
javascript.info (українською)
UAПовний підручник JavaScript українською. Від основ до складних тем: замикання, прототипи, async/await, DOM.
web.dev (Google)
Навчальна платформа від Google. Інтерактивні курси з CSS, responsive design, продуктивності та доступності.
CSS-Tricks
Найповніші візуальні гайди з Flexbox та Grid. "A Complete Guide to Flexbox" та "A Complete Guide to Grid" — класика.
React.dev
Офіційна документація React. Чудові інтерактивні приклади, туторіали для початківців та довідник API.
Next.js Documentation
Офіційна документація Next.js. App Router, Server Components, Data Fetching — все з прикладами коду.
TypeScript Handbook
Офіційний довідник TypeScript. Від основ до advanced types, generics та utility types.
Tailwind CSS
Документація Tailwind CSS. Utility-first підхід до стилізації з великою бібліотекою готових класів.
Інтерактивні інструменти
Flexbox Froggy
UAГра для вивчення Flexbox. 24 рівні, є українська мова.
Grid Garden
UAГра для вивчення CSS Grid. 28 рівнів, є українська мова.
JavaScript Visualizer 9000
Візуалізація Event Loop в реальному часі. Бачиш Call Stack, Task Queue та мікрозадачі.
TypeScript Playground
Онлайн-редактор TypeScript. Пиши код, бач помилки та скомпільований JS одразу в браузері.
Can I Use
Перевірка підтримки CSS/JS фіч у різних браузерах. Незамінний інструмент для веб-розробника.
Loupe (Event Loop)
Інтерактивна візуалізація Event Loop від Philip Roberts. Пиши код і бач як він виконується крок за кроком.