Що має знати фронтенд програміст? Детальний план навчання
Щоб стати хорошим спеціалістом в області frontend розробки потрібно освоїти великий спектр знать. В цьому відео я зібрав чекліст усіх знань які знадобляться фронтенд програмісту для впевненого старту у роботі. Для людей які тільки починають освоювати фронтенд це буде хорошим покроковим планом. Якщо ви уже працюєте frontend розробником це відео може показати моменти на які ви не ввертали увагу і таким чином підняти кваліфікацію
Матеріали по відео
Як працює інтернет
- www.cloudflare.com/en-gb/lear...
- web.stanford.edu/class/msande9...
- internetfundamentals.com/
- developer.mozilla.org/en-US/d...
- internetfundamentals.com/
- www.oreilly.com/library/view/...
Html
- www.w3schools.com/ - загальний довідник
- htmlreference.io/ - загальний довідник
- www.w3.org/WAI/tips/developing/ - доступність
- github.com/hail2u/html-best-p... - найкращі практики
- developer.mozilla.org/en-US/d... - форми
- web.dev/learn/forms/ - ще форми
- • HTML Full Course - Bui...
- • HTML Tutorial for Begi...
- www.oreilly.com/library/view/...
Css
- flexboxfroggy.com/ - інтерактивне навчання
- css-tricks.com/all-about-floats/
- developer.mozilla.org/en-US/d...
- cssgrid.io/ - безкоштовний відеокурс
- scrimba.com/learn/cssgrid - безкоштовний відеокурс
- www.oreilly.com/library/view/...
- www.oreilly.com/library/view/...
Методики верстки
- getbem.com/ - BEM
- www.smashingmagazine.com/2011... - OOCSS
- smacss.com/ SMACSS
- acss.io/ - Atomic CSS
- amcss.github.io/ - AMCSS
- benfrain.com/enduring-css-wri... - FUN
Препроцесори Css
- lesscss.org/ - Less
- sass-lang.com/ - Sass
- stylus-lang.com/ - Stylus
- postcss.org/ - PostCSS
Css фреймворки
- getbootstrap.com/ - Bootstrap
- bulma.io/ - Bulma
- tailwindcss.com/ - Tailwind
JS
- www.w3schools.com/js/
- javascript.info/
- www.javascripttutorial.net/
- github.com/getify/You-Dont-Kn...
- www.oreilly.com/library/view/...
- eloquentjavascript.net/
- • JavaScript Crash Cours...
- • Learn JavaScript - Ful...
Робота з Api
- developer.mozilla.org/en-US/d... - Fetch
- graphql.org/learn/ - GraphQL
- www.oreilly.com/library/view/... - GraphQL
- • GraphQL Full Course - ... - GraphQL
- • WebSockets in 100 Seco... - WebSockets
Пакетні менеджерии
- www.npmjs.com/
- • NPM Crash Course
Збірка коду
- vitejs.dev/ - Vite
- webpack.js.org/ - Webpack
- ui.dev/webpack - Webpack
- survivejs.com/webpack/ - Webpack
- • Vite 2.0 Crash Course ... - Vite
- • Webpack 5 Crash Course... - Webpack
Оптимізація швидкості
- web.dev/fast/
- www.patterns.dev/posts/prpl/
- developer.chrome.com/docs/dev...
- • Crash Course: How To A...
Тестування
- jestjs.io/
- jesthandbook.com/
- • Cypress End-to-End Tes... - Cypress
- • Test-Driven Developmen...
Typescript
- www.typescriptlang.org/
- www.oreilly.com/library/view/...
- • TypeScript Course for ...
PWA
- web.dev/learn/pwa/
- blog.logrocket.com/project-fu...
- www.oreilly.com/library/view/...
- • Progressive Web Apps i...
Фреймворки
- reactjs.org/ - React
- vuejs.org/ - Vue
- angular.io/ - Angular
Мобільні і десктопні додатки
- reactnative.dev/ - React Native
- ionicframework.com/ - Ionic
- nativescript.org/ - NativeScript
- capacitorjs.com/ - Capacitor
- cordova.apache.org/ - Cordana
00:00 Вступ
00:45 Як працює інтернет
01:04 HTML
01:45 CSS
02:14 CSS-препроцесори
02:44 Методи верстки
03:33 CSS фреймворки
04:18 JavaScript
04:51 Взаємодія з сервером
05:24 Пакетний менеджер (npm)
05:50 Збірка коду (Webpack, Vite)
06:38 Оптимізація
07:34 Тестування
08:03 Typescript
08:38 PWA
08:58 Мобільні і десктопні додатки
09:12 Фреймворки
09:36 IDEA, Git, CI/CD
10:08 Висновок
Пікірлер: 61
дуже дякую, я ніде не бачила настікі детального та якісного пояснення !
Алекс, дякую! На деякі з необхідних аспектів для роботи я навіть не звертав уваги. Відео вийшло якісним - навіть не було бажання займатися чимось паралельно. Найкращі поради, що я бачив за останні шість місяців
Велике дякую дуже допоміг в пошуку та плануванню навчання.
@alex-kovalchuk
11 ай бұрын
Радий допомогти
Дуже гарно розкрита тема, одразу зрозуміло куди рухатись, щоб рости. Дякую, чудова робота👍
@alex-kovalchuk
Жыл бұрын
Дякую, приємно розуміти що це відео допомогло
Дякую за дуже структурований алгоритм дій та обсяг знань, котрі будуть доводити до кращого рівня. ЛАЙК
Дякую за roadmap до фронтенду! Дуже структурований підхід.
Дякую за настільки детальний список джерел щодо тематик! Моя найбільша проблема часто полягає якраз в тому, що надто великий вибір між тим, який сайт/форум брати за основу для початку розбору певної теми, тому такий організований список стає в допомозі)
@alex-kovalchuk
Жыл бұрын
Дуже круто що знадобився список. Надіюсь в тебе вийде швидко прогресувати
вау мені як самоучці це було корисно)) дякую!
Дякую за добре структуровану інформацію, знайшла для себе моменти, яким треба приділити увагу.🤓
Це реально найкращий гайд, який я бачив по цій темі включно з англомовними, коротко, ясно, з посиланнями і головне головне - коротким поясненням чому, для чого потрібно, на якому етапі. Але кількість технологій і тулів трохи лякає😢😅 Я на етапі js, а далі більше, і сподіваюсь цікаво)
Дуже корисно. Чудово викладаєте матеріал. Зберіг, буду користуватись.
Крутий матеріал. Зберіг. Дякую;)
Дякую! Дуже корисне відео!
@alex-kovalchuk
Жыл бұрын
Дякую за підтримку
Дякую за таке корисне відео. Тепер є чіткий план дій
@alex-kovalchuk
Жыл бұрын
Радий допомогти. Думаю в майбутньому кожну з технологій розкрити окремо
Надзвичайно чудове відео!
Дякую за контент
@alex-kovalchuk
Жыл бұрын
Дякую, такі коментарі надихають робити далі та покращувати якість відео
Привіт! Вітаю з Новим роком🌲🌻🌹 та дякую за відео👍👏
@alex-kovalchuk
Жыл бұрын
Дякую за привітання, тебе також
Всього 900 переглядів, має бути більше ! Дякую вам, буде в нагоді.
@alex-kovalchuk
Жыл бұрын
Це просто одне з перших відео. І так це було перше яке набирало за день не 10, а 200 тому гріх жалітись. А тепер ютуб уже почав активніше рекомендувати нові відео
Дякую Вам від душі ❤ класний контент і чудова українська мова
@alex-kovalchuk
Жыл бұрын
Дуже дякую за підтримку
Алекс дякую, у тебе круті відео))
@alex-kovalchuk
Жыл бұрын
Дякую за підтримку)
Топ!!!
хочу подякувати за роботу, і чи можете зробити схоже відео але про бекенд
@alex-kovalchuk
Жыл бұрын
Так, з ним там справа ще цікавіша оскільки набагато більший вибір мов програмування. Думаю наступного тижня випущу про бекенд
Кайфове відео, але все ж таки з тейком про "треба знати як працює Інтернет" (я так розумію малося на увазі модель OSI) я згоден, бо для фронтенд розробника реально потрібно розуміти тільки прикладний і представницький рівні (ну можливо іще сеансовий, але це прямо край), бо по факту розуміння наприклад транспортного, чи канального, чи фізичного рівня не дасть особливого профіту, але при цьому людина на це буде витрачати час
@alex-kovalchuk
Жыл бұрын
Так, хоча б на рівні роботи протоколів. Бо зустрічав багато людей які фігачили фронт, але не знали. Через це вони працювали з магією не розуміючи що відбувається і відповідно частіше помилялись
@krabik.ukrainian
Жыл бұрын
@@alex-kovalchuk , в принципі логічно, просто тоді формулювання з відео "потрібно знати як працює Інтернет від проводочків до протоколів НТТР" не зовсім доречне, на мою думку, бо воно охоплює фактично всю модель OSI буквально від фізичного рівня до прикладного
Класний кубик рубика)
Як не крути, а познайомитися з CMS-ками доведеться. Іще про gulp не згадали, як правило його в якості збірника вистачає.
Комент в підтримку україномовного контенту!
Дуже дякую за всі посилання в описі! Я зараз складаю план по якому буду вивчати фронт енд, і ваше відео дуже мені допомогло! Чи могли б ви порекомендувати якісь курси? Яка ваша думка про meta academy ?
@alex-kovalchuk
Жыл бұрын
З курсами складніше порекомендувати оскільки треба самому проходити і швидше залежить від конкретного викладача Про mate academy достатньо хороше попереднє враження. Пам'ятаю їх на стіні стартапів в LIFT99 Головне не розслабитись і активно вчитись самому. Часто проблеми в курсах програмування як і в курсах іноземних мов полягає в тому що якщо людина звикла отримувати готові знання, а не шукати самому - після курсів важко далі прогресувати
@romajan21
Жыл бұрын
@@alex-kovalchuk дякую за відповідь
Топ контент, нуль води і все чітко по-фактам
людоньки тут ще й усі посилання на документацію 😍
@alex-kovalchuk
10 ай бұрын
Радий допомогти
безцінна інфа, дякую
Подивився і зризумів, що краще вже не починати 😂. Що потрібро для початку, щоб хоч би роботу знайти?
@alex-kovalchuk
2 ай бұрын
Зараз у фронтенді серед джунів надзвичайно велика конкуренція. Тому навіть знаючи це все на початковому рівні треба буде пройти багато співбесід
Саме таким шляхом і йду, як самоучка😁
Алекс, відео актуальне на сьогоднішній день? може є якісь зауваження?
@alex-kovalchuk
9 ай бұрын
Передивився відео. Усе цілком актуально. Єдине я у відео говорю що vite і tailwindcss набирають обертів, але зараз вони стали уже стандартом. Ще дивлячись відео побачив що дуже не вистачає візуалізації про що говорю і зараз би детальніше розкривав теми. Це радує, бо бачу прогрес якості контенту
@dofaqq
9 ай бұрын
@@alex-kovalchuk дякую за відповідь, враховуючи сказане вище, можливо у майбутньому можна очікувати оновлене відео за цією ж темою? думаю після додавання візуалізації і деталізації відео може стати популярним і його подивляться багато людей і багатьом воно стане корисне
до цього списку ще варто додати вміння працювати зі стейт менеджерами(redux, recoil) після вивчення певного фремворку, вони потрібні також для роботи
@alex-kovalchuk
Жыл бұрын
Тут уже нюанси фреймворку і трішки холіварна тема тому вирішив не добавляти Я в останніх проєктах повністю відмовився від стейт менеджерів типу redux і замісь них використовую на react-query. Оскільки стани зазвичай треба синхронізувати з сервером то це виявилась дуже зручна заміна Але якщо буду робити таке ж відео про React чи Vue обов'язково розкажу про стейт менеджери
@andrsh9388
Жыл бұрын
@@alex-kovalchuk за реакт квері лайк
Я розпочав з JS, і він доволі важкий, бо то все ж треба вивчити, та після перегляду відео одразу захотілось кинути. Це ж скільки років то все вивчати?
@volynskyi
Жыл бұрын
І як успіхи в джс після двох місяців?)
Якщо трошки мова буде роздiльна то буде класнiше, дуже швидно та без пауз.
@alex-kovalchuk
Жыл бұрын
Помаленько працюю над цим. В останньому відео уже набагато краще.
На проді юзаємо yarn як пакетний менеджер, проект з мікросервісною архітектурою, тобто не старий
@alex-kovalchuk
11 ай бұрын
Про інші я мав на увазі Bower. Yarn, PNPM - це можна сказати різні реалізації npm і між ними перехід практично безшовний. До речі я починав юзати yarn, бо він відпрацьовував набагато швидше ніж npm, але зараз по швидкості майже зрівнялись і я перейшов назад на npm