Front-End Web Developer

1.Core Foundation
1. 网页界面技术：HTML
2. 网页界面技术：CSS
3. 网页交互技术：JavaScript
  1. ECMAScript
    1. JavaScript的基本语法
  2. DOM
    1. 文档对象模型
  3. BOM
    1. 浏览器对象模型
4. TypeScript
  1. JavaScript的超集，具有静态类型化的功能，适用于大型迭代项目
2.Core Advanced
1. 网页界面新技术：HTML5
2. 网页界面新技术：CSS3
3. 移动端开发
  1. 流失布局
  2. flex布局
  3. rem布局
  4. 响应式布局
4. 前端样式库：BootStrap
5. 前端绘图技术：Canvas
6. 快速简洁图表可视化库：Echarts
7. 流行图表可视化库：D3
8. JS函数库：jQuery
9. 移动端类jQuery库：Zepto
10. 版本控制工具：Git&GitHub
3.JS Advanced
1. 作用域和作用域链
2. 原型和原型链
3. JS闭包
4. JS异步/事件循环机制
5. JS继承
6. JS节流
7. JS防抖
8. JS深浅拷贝
9. ES6
10. ES7
11. ES8-ES11
4.JS Back-End
1. 后台JS：Node.js
2. 非关系型数据库：MongoDB
3. MongoDB操作库：Mongoose
4. 后台Web开发框架：Express
5. 后台Web开发框架：koa
6. 后台模板引擎：EJS
7. 实时通信聊天库：socket.io
8. 网络通信协议：http，https
9. 通信数据加密：MD5，jsonwebtoken
5.Front-End And Back-End Interactions
1. Ajax
2. Ajax请求方式：fetch
3. 前后台Ajax请求库：axios
4. Rest API
5. 跨域解决方案
  1. jsonp
  2. document.domain + iframe
  3. window.location.hash + iframe
  4. window.name + iframe
  5. window.postMessage
  6. CORS
  7. Nginx反向代理
  8. Nodejs中间代理件
  9. WebSocket协议
  10. 修改浏览器安全配置（慎用）
6. 基于promise实现axios封装及二次迭代
7. 基于promise封装原生Ajax
8. 接口调试：postman
9. mock后台数据接口库：Mock.js/EasyMock
6.Engineering
1. 模块化规范
  1. CommonJS
  2. ES6
  3. AMD
  4. CMD
2. 构建工具
  1. Grunt
  2. Gulp
  3. webpack4
  4. webpack5
7.Web Framework
1. Google MVVM库：Angular
2. Facebook组件化库：React
  1. 路由插件库：React-Router
  2. 应用状态管理库：Redux
  3. PC端UI组件库：Ant Design
  4. 移动端UI组件库：Antd-Mobile
  5. 服务端渲染技术
3. 国内MVVM库：Vue
  1. 路由插件库：Vue-Router
  2. 应用状态管理库：Vuex
  3. PC端UI组件库：Element-UI
  4. 移动端UI组件库：Mint-UI
  5. 移动端UI组件库：Vant-UI
  6. 服务端渲染技术
8.Cross-Platform Development
1. H5 Hybrid移动端混合开发框架：ionic
2. 国内跨平台开发框架：MUI
3. 跨平台移动应用开发框架：React Native
4. 微信小程序框架：UniApp
5. 微信小程序框架：mpvue
9.Reinventing The Wheels
1. 自定义promise
2. 自定义Axios
3. 自定义PubSub
4. 自定义EventBus
5. 自定义React，Vue脚手架
6. 自定义lodash方法
10.Project Combat
1. 初级篇
  1. Web Projects With Vanilla JavaScript
    1. 20个前端小项目
    2. https://github.com/bradtraversy/vanillawebprojects
  2. Animate
    1. 一个CSS动画库
    2. https://github.com/animate-css/animate.css
  3. CSS-Inspiration
    1. CSS特效
    2. https://github.com/chokcoco/CSS-Inspiration
  4. tesseract.js
    1. 一个js ocr识别库
    2. https://github.com/naptha/tesseract.js
  5. Ant Design
    1. 基于 Ant Design 设计体系的 React UI 组件库
    2. https://github.com/ant-design/ant-design/
    3. https://github.com/vueComponent/ant-design-vue/
  6. Echarts
    1. 基于 JavaScript 的开源可视化图表库
    2. https://github.com/apache/echarts
2. 中级篇
  1. particles.js
    1. 粒子效果
    2. https://github.com/VincentGarreau/particles.js
  2. reveal.js
    1. 一款网页PPT
    2. https://github.com/hakimel/reveal.js
  3. swiper.js
    1. 轮播图插件
    2. https://github.com/nolimits4web/swiper
  4. Build
    1. Gulp
      1. 一款前端构建工具
      2. https://github.com/gulpjs/gulp
    2. vite
      1. 一款新型前端构建工具
      2. https://github.com/vitejs/vite
  5. Yeoman
    1. 一个能快速生成一个Web APP的脚手架工具
    2. https://github.com/yeoman/yeoman
  6. rrweb
    1. 一个可以录制并回放任意 web 界面中的用户操作的纯前端的库
    2. https://github.com/rrweb-io/rrweb
  7. UnblockNeteaseMusic
    1. 一款可以将大部分音乐平台云音乐灰色歌曲解锁的库
    2. https://github.com/nondanee/UnblockNeteaseMusic
3. 高级篇
  1. vue-admin-template
    1. 一个vue后台管理系统框架
    2. https://github.com/PanJiaChen/vue-admin-template
  2. h5-dooring
    1. 一款可视化编辑器
    2. https://github.com/MrXujiang/h5-Dooring
  3. canvas-special
    1. 内含许多canvas案例
    2. https://github.com/bxm0927/canvas-special
  4. imgCook
    1. 视觉稿一键还原和基于还原后的可视化编辑
    2. https://github.com/imgcook/imgcook
  5. Midway
    1. 一个适用于构建 Serverless 服务，传统应用、微服务，小程序后端的 Node.js 框架
    2. https://github.com/midwayjs/midway
  6. Luckysheet
    1. 一款纯js实现的在线表格库
    2. https://github.com/mengshukeji/Luckysheet
  7. flowchart-fun
    1. 一个高效的绘制流程图和思维导图的工具库
    2. https://github.com/tone-row/flowchart-fun