Що має знати фронтенд програміст? Детальний план навчання

Щоб стати хорошим спеціалістом в області frontend розробки потрібно освоїти великий спектр знать. В цьому відео я зібрав чекліст усіх знань які знадобляться фронтенд програмісту для впевненого старту у роботі. Для людей які тільки починають освоювати фронтенд це буде хорошим покроковим планом. Якщо ви уже працюєте frontend розробником це відео може показати моменти на які ви не ввертали увагу і таким чином підняти кваліфікацію Матеріали по відео Як працює інтернет - https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/ - http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm - https://internetfundamentals.com/ - https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work - https://internetfundamentals.com/ - https://www.oreilly.com/library/view/http-the-definitive/1565925092/ Html - https://www.w3schools.com/ - загальний довідник - https://htmlreference.io/ - загальний довідник - https://www.w3.org/WAI/tips/developing/ - доступність - https://github.com/hail2u/html-best-practices - найкращі практики - https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation - форми - https://web.dev/learn/forms/ - ще форми - https://www.youtube.com/watch?v=pQN-pnXPaVg - https://www.youtube.com/watch?v=qz0aGYrrlhU - https://www.oreilly.com/library/view/html-css/9781449381943/ Css - https://flexboxfroggy.com/ - інтерактивне навчання - https://css-tricks.com/all-about-floats/ - https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model - https://cssgrid.io/ - безкоштовний відеокурс - https://scrimba.com/learn/cssgrid - безкоштовний відеокурс - https://www.oreilly.com/library/view/html-css/9781449381943/ - https://www.oreilly.com/library/view/css-the-definitive/9781098117603/ Методики верстки - https://getbem.com/ - BEM - https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/ - OOCSS - http://smacss.com/ SMACSS - https://acss.io/ - Atomic CSS - https://amcss.github.io/ - AMCSS - https://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/ - FUN Препроцесори Css - https://lesscss.org/ - Less - https://sass-lang.com/ - Sass - https://stylus-lang.com/ - Stylus - https://postcss.org/ - PostCSS Css фреймворки - https://getbootstrap.com/ - Bootstrap - https://bulma.io/ - Bulma - https://tailwindcss.com/ - Tailwind JS - https://www.w3schools.com/js/ - https://javascript.info/ - https://www.javascripttutorial.net/ - https://github.com/getify/You-Dont-Know-JS - https://www.oreilly.com/library/view/javascript-the-definitive/9781491952016/ - https://eloquentjavascript.net/ - https://www.youtube.com/watch?v=hdI2bqOjy3c - https://www.youtube.com/watch?v=PkZNo7MFNFg Робота з Api - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API - Fetch - https://graphql.org/learn/ - GraphQL - https://www.oreilly.com/library/view/learning-graphql/9781492030706/ - GraphQL - https://www.youtube.com/watch?v=ed8SzALpx1Q - GraphQL - https://www.youtube.com/watch?v=1BfCnjr_Vjg - WebSockets Пакетні менеджерии - https://www.npmjs.com/ - https://www.youtube.com/watch?v=jHDhaSSKmB0 Збірка коду - https://vitejs.dev/ - Vite - https://webpack.js.org/ - Webpack - https://ui.dev/webpack - Webpack - https://survivejs.com/webpack/ - Webpack - https://www.youtube.com/watch?v=LQQ3CR2JTX8 - Vite - https://www.youtube.com/watch?v=IZGNcSuwBZs - Webpack Оптимізація швидкості - https://web.dev/fast/ - https://www.patterns.dev/posts/prpl/ - https://developer.chrome.com/docs/devtools/ - https://www.youtube.com/watch?v=_Y7g_1vuQkY Тестування - https://jestjs.io/ - https://jesthandbook.com/ - https://www.youtube.com/watch?v=7N63cMKosIE - Cypress - https://www.youtube.com/watch?v=Jv2uxzhPFl4 Typescript - https://www.typescriptlang.org/ - https://www.oreilly.com/library/view/learning-typescript/9781098110321/ - https://www.youtube.com/watch?v=BwuLxPH8IDs PWA - https://web.dev/learn/pwa/ - https://blog.logrocket.com/project-fugu-5-new-apis-to-try-out-in-your-pwa/ - https://www.oreilly.com/library/view/learning-typescript/9781098110321/ - https://www.youtube.com/watch?v=sFsRylCQblw Фреймворки - https://reactjs.org/ - React - https://vuejs.org/ - Vue - https://angular.io/ - Angular Мобільні і десктопні додатки - https://reactnative.dev/ - React Native - https://ionicframework.com/ - Ionic - https://nativescript.org/ - NativeScript - https://capacitorjs.com/ - Capacitor - https://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 Висновок