Task Runners
*npm-скрипты «https://docs.npmjs.com/cli/v8/using-npm/scripts»
Введение в npm-скрипты «https://www.geeksforgeeks.org/introduction -to-npm-scripts/»
Codevolution: скрипты npm «https://www.youtube.com/watch?v=hHt3oVk3XVk»
с

разработчик внешнего интерфейса için yol haritası

интерфейсный разработчик için yol haritası. inceleyip kendimce bir liste haline getirdim. Умарим Ишинизе Ярар.

HTML
https://www.w3schools.com/html/html_intro.asp

Инструменты сборки
https://webpack.js.org/
https://vitejs.dev/
https://parceljs.org/
Форматировщики линтеров
Что такое линтер? https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/
Prettier https://prettier.io/
Почему красивее? https://prettier.io/docs/en/why-prettier.html
ESLint https://eslint.org/
ESLint: что, почему, когда, как https: //dev.to/shivambmgupta/eslint-what-why-when-how-5f1d
ESLint Quickstart — поиск ошибок автоматически https://www.youtube.com/watch?v=qhuFviJn-es

Веб-компоненты
https://developer.mozilla.org/en-US/docs/Web/Web_Components
https://webcomponents.github.io/
https: //www.youtube.com/watch?v=PCWaFLy3VUo

Шаблоны HTML https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
Пользовательские элементы https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
Shadow DOM https://developer.mozilla.org/en-US/docs/Web /Web_Components/Использование_shadow_DOM

Проверка типов
*TypeScript https://www.typescriptlang.org/
Официальная документация для углубленного изучения https://www.typescriptlang.org/docs/
Руководство по TypeScript https://www.typescriptlang.org/docs/handbook/intro.html
Учебное пособие по TypeScript https://www.tutorialspoint.com/typescript/index.htm
Scrimba — Основы TypeScript https://scrimba.com/learn/typescript
TypeScript для начинающих https://www.youtube.com/watch?v=BwuLxPH8IDs
Что такое TypeScript? https://thenewstack.io/what-is-typescript/
Учебное пособие по TypeScript: выходите за рамки Hello, World! https://thenewstack.io/typescript-tutorial-go-beyond-hello- world/
Учебное пособие по TypeScript: руководство по использованию языка программирования https://thenewstack.io/typescript-tutorial-a-guide-to-using-the-programming-language/

Graphql
Введение в GraphQL https://graphql.org/learn/
Учебное пособие Fullstack для GraphQL https://www.howtographql.com/
Учебное пособие по GraphQL https: //odyssey.apollographql.com/
Курс GraphQL для начинающих https://www.youtube.com/watch?v=ed8SzALpx1Q
Введение в GraphQL https://thenewstack.io/ введение-в-graphql/
Как выполнить простой запрос GraphQL https://thenewstack.io/how-to-execute-a-simple-graphql-query/

*Apollo https://www.apollographql.com/
Официальные документы https://www.apollographql.com/docs/
Официальный канал YouTube https://www.youtube. com/c/ApolloGraphQL/
Учебное пособие по GraphQL с React — клиент Apollo https://www.youtube.com/watch?v=YyUWW04HwKY
Альтернатива
Relay Modern https:/ /relay.dev/
Введение в современный Relay https://relay.dev/docs/

Мобильные приложения
*React Native https://reactnative. dev/
Официальное руководство по началу работы с React Native https://reactnative.dev/docs/getting-started
Создание приложения React Native от Mosh https://www.youtube.com/ watch?v=0-S5a0eXPoc
Изучите React Native от CodeAcademy https://www.codecademy.com/learn/learn-react-native
*Flutter https://flutter.dev /
Учебное пособие по Flutter https://www.w3adda.com/flutter-tutorial
Учебное пособие по Flutter для начинающих https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ
Учебное пособие по Flutter https://www.w3adda.com/flutter-tutorial
Изучение программирования Dart https://www.tutorialspoint.com/dart_programming/index.htm
12 Ways Flutter упрощает разработку приложений https://thenewstack.io/12-ways-flutter-streamlines-app-development/

Настольные приложения на JavaScript
*Электрон https:// www.electronjs.org/
Electron Docs https://www.electronjs.org/docs/latest/
Tauri
Flutter

Другое
Знание пользовательского интерфейса / UX
Системы дизайна
Визуальное программирование
Для анимации: GSAP, Lottie, Framer Motion или MoJs
Библиотека веб-графики (WebGL): WebGL MDN, Основы WebGL
2D-графика: Canvas, PixiJS, PhaserJS
3D-графика: ThreeJS, BabylonJS
Houdini
WebRTC
IDL
WebAssembly

разработчик интерфейса için yol haritası

интерфейсный разработчик için yol haritası. inceleyip kendimce bir liste haline getirdim. Умарим Ишинизе Ярар.

CSS
*Адаптивный веб-дизайн
https://www.freecodecamp.org/learn/responsive-web-design/
https://www.w3schools.com/html/ html_responsive.asp
* Display
https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more /
*Типы позиционирования — чем они отличаются?
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
*Коробочная модель
https://developer. mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
*Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox /
*Grid
https://css-tricks.com/snippets/css/complete-guide-grid/

Архитектура CSS
БЭМ БЭМ 101 https://css-tricks.com/bem-101/
https://en.bem.info/methodology/quick-start/
https: //ru.bem.info/
https://ru.bem.info/tutorials/

http://oocss.org/
http://smacss.com/

Препроцессоры CSS
Объяснение препроцессоров CSS https://www.freecodecamp.org/news/css-preprocessors/#:~:text=CSS %20Препроцессоры%20компилируют%20%20код,препроцессор%20был%20не%20в%20месте.
ЧТО ТАКОЕ ПРЕПРОЦЕССОР CSS? https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/

SASS https://sass-lang.com/
Документация https://sass-lang.com/documentation/
Учебное пособие по Sass для начинающих — CSS со сверхспособностями https://www.youtube.com/watch?v=_a5j7KoflTs
Sass , БЭМ и адаптивный дизайн https://www.youtube.com/watch?v=jfMHA8SqUL4

PostCSS https://postcss.org/

Современный CSS
*Стилизованные компоненты https://styled-components.com/
*CSS-модули https://github.com/css-modules/css-modules
Стилизованные JSX https://github.com/vercel/styled-jsx
Emotion https://emotion.sh/docs/introduction

CSS-фреймворки https://en .wikipedia.org/wiki/CSS_framework
Каковы преимущества использования CSS-фреймворка https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework. /»

*Tailwind CSS https://tailwindcss.com/
Tailwind CSS: введение https://www.codemag.com/Article/2105091/Tailwind-CSS -An-Introduction
https://www.youtube.com/c/TailwindLabs/videos
https://www.youtube.com/watch?v=hdGsFpZ0J2E
https://www.youtube.com/watch?v=UBOj6rqRUME
Пользовательский интерфейс материалов https://mui.com/
Официальная документация https://mui.com/getting -started/installation/
Material UI React Tutorial https://www.youtube.com/watch?v=vyJU9efvUtQ
Chakra UI https://chakra-ui.com/ Mantine https://mantine.dev/
Пользовательский интерфейс Daisy https://daisyui.com/
Пользовательский интерфейс Radix https://www.radix-ui.com/

Bootstrap https://getbootstrap.com/
Bulma https://bulma.io/

JavaScript-
https ://javascript.info/intro#what-can-in-browser-javascript-do
https://www.w3schools.com/js/
Управление DOM (объектной моделью документа)
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
https:// www.codeguage.com/courses/js/html-dom-introduction
Fetch API
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API https://www.javascripttutorial.net/javascript-fetch-api/
https://web.dev/introduction-to-fetch/
Современный JavaScript (ES6+ и модульный JavaScript)
https://www.w3schools.com/js/js_es6.asp
https://roadmap.sh/frontend
https://codeloop. org/learn-modern-javascript-es6-es7-es8/
https://thenewstack.io/fat-arrow-points-way-easy-es6-goodies-busy-js-devs/ Концепции JavaScript
Подъем https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
Всплывание и захват https://javascript.info/bubbling-and -capturing
Scope https://developer.mozilla.org/en-US/docs/Glossary/Scope
Var, Let и Const — в чем разница? https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
Наследование и цепочка прототипов https://developer.mozilla.org/en- US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
Строгий режим https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
Визуализация JavaScript: цикл событий https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
Демистификация обещаний JavaScript — новый способ обучения https://blog.greenroots.info/series/javascript-promises
Что такое DOM, Shadow DOM и Virtual DOM? https://www.youtube.com/watch?v=7Tok22qxPzQ

Системы контроля версий
https://git-scm.com/docs
https://www.atlassian.com/git
https://www.youtube. com/watch?v=zbKdDsNNOhg
https://www.youtube.com/watch?v=SWYqp7iY_Tc
https://www.youtube.com/watch?t=21&v= Y9XZQO1n_7c&feature=youtu.be
Услуги хостинга репо
github
https://docs.github.com/en/get-started/quickstart/hello-world
https://skills.github.com/
Как работает GitHub https://www.youtube.com/watch?v=w3jLJU7DT5E
Git ve GitHub karşılaştırması: Fark nedir? https://www.youtube.com/watch?v=wpISo9TNjfU
Git и GitHub для начинающих — Ускоренный курс https://www.youtube.com/watch?v=RGOj5yH7evk
Git и GitHub — CS50 после 2019 г. https://www.youtube.com/watch?v=eulnSXkhE7I
gitlab
bitbucket

Знание веб-безопасности
Почему HTTPS имеет значение https://web.dev/why-https-matters/
https://howhttps.works/
Что такое HTTPS? https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/
Риски безопасности OWASP
OWASP https://en.wikipedia.org/wiki /OWASP
Контрольный список OWASP для тестирования безопасности веб-приложений https://github.com/0xRadi/OWASP-Web-Checklist
https://sucuri.net/guides/owasp-top-10 -security-vulnerabilities-2020/
https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html
Политика безопасности контента (CSP) https://developer.mozilla.org/ en-US/docs/Web/HTTP/CSP
https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5
Совместное использование ресурсов между источниками (CORS) https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Менеджеры пакетов
*npm
Объяснение современного JavaScript для динозавров https: //peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html
Руководство для начинающих по использованию npm https://nodesource.com/blog/an-absolute-beginners-guide- to-using-npm/
Как использовать NPM https://github.com/workshopper/how-to-npm
Учебное пособие по NPM для начинающих https://www.youtube.com/ watch?v=2V1UUhBJ62Y
Ускоренный курс NPM https://www.youtube.com/watch?v=jHDhaSSKmB0
Yarn
Yarn — Начало работы https://classic. yarnpkg.com/en/docs/getting-started
Ускоренный курс Yarn Package Manager https://www.youtube.com/watch?v=g9_6KmiBISk

Выберите платформу *React https://reactjs.org/
Официальное руководство по началу работы https://reactjs.org/tutorial/tutorial.html
Руководство для начинающих по React https:/ /egghead.io/courses/the-beginner-s-guide-to-react
Курс React JS для начинающих https://www.youtube.com/watch?v=nTeuhbP7wdE
React Курс — Учебник для начинающих по библиотеке React JavaScript [2022] https://www.youtube.com/watch?v=bMknfKXIFA8
Дорожная карта React https://roadmap.sh/react
Понимание Процесс рендеринга пользовательского интерфейса React https://www.youtube.com/watch?v=i793Qm6kv3U

https://roadmap.sh/react

GraphQL
*Apollo «https://www.apollographql.com/»
«https://www.apollographql.com/docs/»
«https://www.youtube. com/c/ApolloGraphQL/»
«https://www.youtube.com/watch?v=YyUWW04HwKY»
Relay «https://relay.dev/»
urql «https ://formidable.com/open-source/urql/»

REST
*SWR «https://swr.vercel.app/»
*React Query «https ://github.com/TanStack/query»
«https://www.youtube.com/watch?v=novnyCaa7To»
«https://www.youtube.com/playlist?list =PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2»
Axios «https://axios-http.com/docs/intro»
Суперагент «https://visionmedia.github.io/superagent/»

Тестирование
*Jest «https://jestjs.io/»
*Библиотека тестирования React «https://testing-library.com/docs/react-testing-library/intro/» «https://www.robinwieruch.de/react-testing-library/»
Vitest «https://vitest.dev/»
«https://www.youtube.com /watch?v=cM_AeQHzlGg»

*Драматург «https://playwright.dev/»
«https://www.browserstack.com/guide/playwright-tutorial»
Cypress «https://www.cypress.io/»
«https://docs.cypress.io/guides/overview/why-cypress#Other»

SSR Frameworks
Ремикс «https://remix.run/»
«https://remix.run/docs/ru/v1#getting-started»
*Next.js «https:/ /nextjs.org/»
«https://nextjs.org/docs/getting-started»
«https://www.youtube.com/watch?v=9P8mASSREYM&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD- H0ZH»
«https://masteringnextjs.com/»
«https://youtu.be/1WmNXEVia8I»
«https://www.freecodecamp.org/news/the- next-js-handbook/»

Forms «https://www.robinwieruch.de/react-form/»
*React hook form «https://react-hook-form .com/»
«https://github.com/react-hook-form/react-hook-form»
Formik «https://formik.org/»
«https ://formik.org/docs/overview»
«https://github.com/formik/formik»
Окончательная форма «https://final-form.org/react»
> «https://github.com/final-form/react-final-form»

Расширенные темы
Приостановка «https://reactjs.org/docs/react-api. html#susspense»
Порталы «https://reactjs.org/docs/portals.html»
Границы ошибок «https://reactjs.org/docs/error-boundaries.html»
> Архитектура волокна «https://github.com/acdlite/react-fiber-architecture»
«https://dzone.com/articles/understanding-of-react-fiber-architecture»
 Мобильный
React Native «https://reactnative.dev/»
«https://reactnative.dev/docs/getting-started»

Альтернатива
Вью. JS
Угловой

Roadmaps Front End Developer JavaScript React Yol Haritası

08.06.2024

Task Runners*npm-скрипты «https://docs.npmjs.com/cli/v8/using-npm/scripts»Введение в npm-скрипты «https://www.geeksforgeeks.org/introduction -to-npm-scripts/»Codevolution: скрипты npm «https://www.youtube.com/watch?v=hHt3oVk3XVk»с

Вопросы по теме

Task Runners
*npm-скрипты «https://docs.npmjs.com/cli/v8/using-npm/scripts»
Введение в npm-скрипты «https://www.geeksforgeeks.org/introduction -to-npm-scripts/»
Codevolution: скрипты npm «https://www.youtube.com/watch?v=hHt3oVk3XVk»
с