前端
互联网
- 互联网是如何工作的？
- 什么是 HTTP？
- 什么是域名？
- 什么是主机托管？
- DNS 及其工作原理？
- 浏览器及其工作原理？
HTML
- 学习基础
- 编写语义化 HTML
- 表单与验证
- 可访问性
- SEO 基础
CSS
- 学习基础
- 制作布局
- 响应式设计
JavaScript
- 学习基础
- 学习 DOM 操作
- Fetch API / Ajax (XHR)
为了简洁，我们缩减了 CSS 部分。你应该了解 CSS-in-JS、CSS Modules 和 Styled Components。另外值得关注的有 Panda CSS、Shadcn UI、Mantine 等。
版本控制系统
- Git
版本控制系统托管
- GitHub
- GitLab
- Bitbucket
包管理器
- npm
- pnpm
- yarn
选择一个框架
- React
- Vue.js
- Angular
- Svelte
- Solid JS
- Qwik
编写 CSS
- Tailwind
CSS 架构
- BEM
CSS 预处理器
- Sass
- PostCSS
构建工具
代码检查与格式化工具
- Prettier
- ESLint
模块打包器
- Vite
- SWC
- esbuild
- Webpack
- Parcel
- Rollup
测试
- Vitest
- Jest
身份验证策略
JWT、OAuth、SSO、基本认证、会话认证
Web 安全基础
- CORS
- HTTPS
- 内容安全策略
- OWASP 安全风险
Web 组件
- HTML 模板
- 自定义元素
- Shadow DOM
类型检查器
- TypeScript
服务端渲染 (SSR)
- React
- Next.js
- Astro
- react-router
- Angular
- Vue.js
- Nuxt.js
- Svelte
- Svelte Kit
GraphQL
- Apollo
- Relay Modern
渐进式 Web 应用 (PWA)
- PRPL 模式
- RAIL 模型
- 性能指标
- 使用 Lighthouse
- 使用 DevTools
- 测量与改进性能
浏览器 API
- 存储
- WebSocket
- Server Sent Events
- Service Worker
- 地理位置
- 通知
- 设备方向
- 支付
- 凭据管理
性能最佳实践
静态站点生成器
- Next.js
- Astro
- Vuepress
- Eleventy
- Nuxt.js
移动应用
- PWA
- 移动应用
桌面应用
- React Native
- Flutter
- Ionic
继续学习以下相关路线
- TypeScript
- Node.js
- 全栈