Щоб стати хорошим спеціалістом в області 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 Висновок