Learning Roadmap
Learning Path
No note with name assets/pdfs/Web_Development_2021_Roadmap.pdf found
How the internet works
❌️ https://www.youtube.com/watch?v=7_LPdttKXPc ❌️ https://www.youtube.com/watch?v=Dxcc6ycZ73M ❌️ Hosting ❌️ DNS ❌️ HTTP ❌️ Browsers ❌️ Domain Names
Basic Tools
Text Editor
❌️ https://www.youtube.com/playlist?list=PLkwxH9e_vrAJshxiMo6gIavTr5kYsjPs7 ❌️ https://vscodehero.com/
Design
❌️ https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow ❌️ https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ
HTML
❌️ https://www.youtube.com/watch?v=XiQ9rjaa2Ow ❌️ Best Practices ❌️ Semantic HTML ❌️ Forms and Validations ❌️ Accessibility ❌️ SEO
CSS
❌️ Basics ❌️ pros and cons of these ❌️ flexbox ❌️ css grid ❌️ custom properties
transitions/animations
❌️ plain CSS ❌️ GSAP and GSAP typing animation ❌️ anime.js
Responsive Design
❌️ Mobile first ❌️ rem units ❌️ viewport ❌️ fluid widths ❌️ media queries ❌️ kevin powell
CSS Preprocessorts
❌️ SASS ❌️ postCSS
Modern CSS
❌️ styled components ❌️ CSS Modules
CSS Prameworks
❌️ tailwind CSS ❌️ bootstrap
Paths
Desktop Applications
❌️ Electron
Mobile Apps
❌️ React Native ❌️ https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA ❌️ Flutter ❌️ https://www.youtube.com/user/Lionranger ❌️ https://www.youtube.com/c/TadasPetra ❌️ https://www.youtube.com/c/RobertBrunhage/ ❌️ NativeScript ❌️ Ionic
front end
Javascript
❌️ Basic Syntax ❌️ DOM Manipulation ❌️ Fetch API ❌️ JSON ❌️ ES6+ ❌️ https://www.youtube.com/playlist?list=PLkwxH9e_vrALRJKu7wfXby3MKeflhTu6B ❌️ https://www.youtube.com/watch?v=bGDK1rpykOQ&list=PLkwxH9e_vrALlH7D0XLDn2td-uoHqHFxq ❌️ typescript
More Tools
❌️ Browser dev tools ❌️ VSCode extentions ❌️ emmet ❌️ HTML Emmet Shortcuts in VSCode (Private) ❌️ axios
version control
❌️ git
- github
Build Tools
❌️ Task Runners ❌️ NPM Scripts ❌️ GULP ❌️ Linters / Formatters ❌️ Prettier ❌️ ESLint ❌️ Module Bundlers ❌️ webpack ❌️ parcel ❌️ Rollup
Preogressive web apps
❌️ PWA's ❌️ https://www.youtube.com/watch?v=ppwagkhrZJs
Graph-QL
❌️ Apollo
Package Managers
Jam Stack
❌️ Javascript ❌️ https://www.youtube.com/watch?v=ySJGjo3_EX4 ❌️ https://www.youtube.com/watch?v=73b1ZbmB96I ❌️ API ❌️ Markup
Front End Framework
❌️ React ❌️ Vue ❌️ https://www.youtube.com/channel/UCshZ3rdoCLjDYuTR_RBubzw ❌️ https://www.youtube.com/channel/UCxA99Yr6P_tZF9_BgtMGAWA
State Management
❌️ Context API (React) ❌️ Redux (React) ❌️ Vuex (Vue)
Server Side Rendering (SSR)
❌️ Nuxt.js (Vue) ❌️ Next.js (React)
Static Site Generators
❌️ Gatsby (React) ❌️ Next.js (React) ❌️ Gridsome (Vue) ❌️ Nuxt.js (Vue) ❌️ 11ty
Backlinks