Front_END Web 开发人员路线图
完整的前端 Web 开发路线图
HTML
- 学习基础知识
- 表格和验证
- 可访问性
- 搜索引擎优化
- 惯例和最佳实践
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