Front_END Web 开发人员路线图

2025-06-07

Front_END Web 开发人员路线图

完整的前端 Web 开发路线图

HTML
  1. 学习基础知识
  2. 表格和验证
  3. 可访问性
  4. 搜索引擎优化
  5. 惯例和最佳实践
Web 组件
  • HTML 元素
  • 自定义元素
  • 影子 DOM
CSS
  • 学习基础知识
  • 响应式设计
  • 制作布局
    • 浮点数
    • 定位
    • 展示盒
    • 模型 CSS
    • 网格
    • 弹性框
CSS 架构
  • 边界元法
  • OOCS
  • 斯玛特-麦克斯
CSS预处理器
  • 萨斯
  • Postcss
  • 较少的
CSS框架
  • CSS 优先框架
    • 引导程序
    • 实现 CSS
    • 布尔玛
    • 基于JS的框架
    • 反应带
    • 材料用户界面
    • Tailwind CSS
    • Chakra 用户界面
现代 CSS
  • 样式化组件
  • CSS模块
  • 样式化的 JSX
  • 情感
  • 魅力四射
JavaScript
  • 语法和基本结构
  • 学习 DOM 操作
  • 学习 Fetch API/Ajax
  • ES6+
  • 模块化 JavaScript
  • 理解以下概念
    • 闭包
    • 范围
    • 异步等待
    • 原型
    • 事件冒泡
    • 影子 DOM
    • 提升
    • 严格...等等*...还有更多

JS框架

  • React.js
    • MobX
    • ReduX
  • Vue.js
    • VueX
  • 角度
    • RxJS
    • 神经受体
类型检查器
  • 打字稿
  • 流动
渐进式 Web 应用程序 (PWA)
  • 贮存
  • 网络套接字
  • 服务工作者
  • 地点
  • 通知
  • 设备方向
  • 付款
  • 证书
  • 加速移动页面 (AMP)
性能
  • PRPL 模式
  • RAIL 模型
  • 性能
  • 指标
  • 使用 LightHouse
  • 使用 DevTools
服务器端渲染(SSR)
  • React.js
    • Next.js
    • After.js
    • 角度
    • 普遍的
  • Vue.js
    • Nuxt.js
GraphQL
  • 阿波罗
  • 接力现代
静态站点生成器
  • Next.js
  • Gatsby.js
  • Nuxt.js
  • Vuepress
  • 杰基尔
  • 雨果
移动应用程序
  • ReactNative
  • NativeScript
  • 爱奥尼
桌面应用程序
  • 电子
  • 卡洛
  • 质子原生
包管理器
  • npm
测试你的应用
  • 笑话
  • React 测试库
构建工具
  • 代码检查器和格式化程序
    • Prettier
    • ESLint
    • 标准JS
模块捆绑器
  • Webpack
  • 汇总
  • 包裹
网络安全知识
  • Owasp 前 10 名
  • 跨域资源共享 (CORS)
  • HTTP
  • CSP(内容安全策略)

注意:- 你不需要学习以上所有内容。
选择其中的一些,master然后


一些有用的资源网站

文章来源:https://dev.to/harshaambati/frontend-web-development-roadmap-5ha3
PREV
初学者编码路线图。
NEXT
我希望我曾经有过的服务器介绍