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

–

Робота з 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
–

– GraphQL
–

– WebSockets
Пакетні менеджерии
– https://www.npmjs.com/
–

Збірка коду
– https://vitejs.dev/ – Vite
– https://webpack.js.org/ – Webpack
– https://ui.dev/webpack – Webpack
– https://survivejs.com/webpack/ – Webpack
–

– Vite
–

– Webpack
Оптимізація швидкості
– https://web.dev/fast/
– https://www.patterns.dev/posts/prpl/
– https://developer.chrome.com/docs/devtools/
–

Тестування
– https://jestjs.io/
– https://jesthandbook.com/
–

– Cypress
–

Typescript
– https://www.typescriptlang.org/
– https://www.oreilly.com/library/view/learning-typescript/9781098110321/
–

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://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:00:45 Як працює інтернет
00:01:04 HTML
00:01:45 CSS
00:02:14 CSS-препроцесори
00:02:44 Методи верстки
00:03:33 CSS фреймворки
00:04:18 JavaScript
00:04:51 Взаємодія з сервером
00:05:24 Пакетний менеджер (npm)
00:05:50 Збірка коду (Webpack, Vite)
00:06:38 Оптимізація
00:07:34 Тестування
00:08:03 Typescript
00:08:38 PWA
00:08:58 Мобільні і десктопні додатки
00:09:12 Фреймворки
00:09:36 IDEA, Git, CI/CD
00:10:08 Висновок