└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Web development roadmap & trends 2021 2 | Collection of useful video courses and list of resources which helped me to create roadmap. 3 | 4 | ### Video tutorials: 5 | 6 | ##### HTML (Basics): 7 | - [HTML Basics (Hindi)](https://www.youtube.com/watch?v=AXoanErUNE8) 8 | - [HTML Semantics](https://www.youtube.com/watch?v=kGW8Al_cga4) 9 | - [HTML semantics](https://www.youtube.com/watch?v=arMgwKY52Bs) 10 | - [HTML accessibility / ARIA](https://www.youtube.com/watch?v=0hqhAIjE_8I) 11 | 12 | ##### CSS (Basics): 13 | - [CSS Basics (Hindi)](https://www.youtube.com/watch?v=wTyyIGZwJg0) 14 | - [CSS Flex](https://www.youtube.com/watch?v=JJSoEo8JSnc) 15 | - [CSS Flex (Hindi)](https://www.youtube.com/watch?v=7WE_K7NDL0s) 16 | - [CSS Grid](https://www.youtube.com/watch?v=EFafSYg-PkI) 17 | - [Tailwind Css](https://www.youtube.com/watch?v=91evwKVzGRE) 18 | 19 | ##### JavaScript (Basics): 20 | - [JavaScript](https://www.youtube.com/watch?v=W6NZfCO5SIk&t=261s) 21 | - [ES6](https://www.youtube.com/watch?v=WZQc7RUAg18) 22 | - [JavaScript Design Patterns](https://www.youtube.com/watch?v=24GF5MVEEjE&list=PLXQpH_kZIxTUNyTwdz3aAS6TfLFQtEB_0) 23 | - [Javascript Algorithms](https://www.youtube.com/watch?v=JgWm6sQwS_I) 24 | 25 | ##### JavaScript (Additional): 26 | - [TypeScript](https://www.youtube.com/watch?v=BwuLxPH8IDs) 27 | 28 | ##### JavaScript (Frameworks): 29 | - [React](https://www.youtube.com/watch?v=sBws8MSXN7A) 30 | - [VueJS](https://www.youtube.com/watch?v=YrxBCBibVo0&list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1) 31 | - [Angular](https://www.youtube.com/watch?v=T_Fe4IaG0KU) 32 | - [Svelte](https://www.youtube.com/watch?v=zojEMeQGGHs&list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO) 33 | 34 | ##### JavaScript (State Management): 35 | - [React Redux](https://www.youtube.com/watch?v=CVpUuw9XSjY) 36 | - [React MobX](https://www.youtube.com/watch?v=Dp75-DnGFrU) 37 | - [Vuex](https://www.youtube.com/watch?v=5lVQgZzLMHc) 38 | - [Ngrx](https://www.youtube.com/watch?v=9P5DTlg9oLc) 39 | 40 | - [RXJS](https://www.youtube.com/watch?v=PhggNGsSQyg) 41 | 42 | ##### JavaScript (Back-end): 43 | - [Node Js (Crash course / Hindi)](https://www.youtube.com/watch?v=wdBCoRMMxto) 44 | - [Node Js complete course](https://www.youtube.com/watch?v=RLtyhwFtXQA) 45 | - [Express Js](https://www.youtube.com/watch?v=L72fhGm1tfE) 46 | - [Nest Js](https://www.youtube.com/watch?v=wqhNoDE6pb4) 47 | - [Deno Js](https://www.youtube.com/watch?v=3Vl8a3zYjiw) 48 | 49 | ##### Testing (Basics): 50 | - [Jest](https://www.youtube.com/watch?v=7r4xVDI2vho) 51 | - [Jasmine](https://www.youtube.com/watch?v=h2eWfvcAOTI) 52 | - [React Testing Library](https://www.youtube.com/watch?v=jrSE7XgGwRQ) 53 | 54 | ##### Tools: 55 | - [Basic terminal commands](https://www.youtube.com/watch?v=5XgBd6rjuDQ) 56 | - [Webpack](https://www.youtube.com/watch?v=lFjinlwpcHY) 57 | - [Git](https://www.youtube.com/watch?v=8JJ101D3knE) 58 | 59 | ##### Mobile app development: 60 | - [React Native](https://www.youtube.com/watch?v=0-S5a0eXPoc) 61 | - [Native Script](https://www.youtube.com/watch?v=pNitFeYYzAo) 62 | - [Flutter](https://www.youtube.com/watch?v=b0hzRBHz4Uc) 63 | 64 | ##### Desktop app development: 65 | - [Electron](https://www.youtube.com/watch?v=SetziJyL8Yg&list=PLYxzS__5yYQmocPoLUiEAfD1cJNjhdQar) 66 | 67 | ### Resources used in videos: 68 | - [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 69 | - [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 70 | - [Accessibility](https://developers.google.com/web/fundamentals/accessibility) 71 | - [Data Structures](https://www.geeksforgeeks.org/binary-search-tree-data-structure/) 72 | - [Algorithms](https://dev.to/javinpaul/20-basic-algorithms-problems-from-coding-interviews-4o76) 73 | - [WebAssembly](https://webassembly.org) 74 | - [JAMstack](https://jamstack.org) 75 | - [Web Components](https://www.webcomponents.org) 76 | - [CSR vs. SSR](https://www.bacancytechnology.com/blog/client-side-rendering-vs-server-side-rendering-vs-pre-rendering) 77 | 78 | ### Statistics: 79 | - [Stack Overflow Developer Survey 2020](https://insights.stackoverflow.com/survey/2020) 80 | - [State of Front-end 2020](https://tsh.io/State-of-Frontend-2020-by-TSH.pdf) 81 | - [StateOfJS](https://2019.stateofjs.com) 82 | - [The State of Developer Ecosystem 2020](https://www.jetbrains.com/lp/devecosystem-2020/) 83 | - [JavaScript and Web Development InfoQ Trends Report 2020](https://www.infoq.com/articles/javascript-web-development-trends-2020/) 84 | - [Web Development Trends and the Latest Web Technology Stacks in 2020](https://clockwise.software/blog/web-development-trends/) 85 | - [Front End Development Trends 2020](https://fireart.studio/blog/front-end-development-trends-2020-most-popular-javascript-frameworks/) 86 | 87 | ### Validate HTML online 88 | - [https://validator.w3.org/](https://validator.w3.org/) 89 | - [https://www.freeformatter.com/html-validator.html](https://www.freeformatter.com/html-validator.html) 90 | 91 | 92 | ### Download roadmap 93 | [Download Roadmap](https://drive.google.com/file/d/1_AYp9a-fdo5wOCSpWIGr2vn1aZTy8Dwv/view?usp=sharing) 94 | --------------------------------------------------------------------------------