内容简介:自学也需要有章可寻,早上整理了一下这段时间学的内容东西比较多,接下来的一段时间都会围绕这个Roadmap展开学习,当然这张前端自学图谱并不是一成不变的,随着时间的推移我会调整这张Roadmap里的内容,总的目标只有一个系统化的学好前端的技术,我会随时调整完善这张图谱。如果你和我一样,也都一直在自学前端,如果自学的过程中遇到了坎,不管是学习过程中遇到什么问题,或者有什么好的意见和建议想和我交流,欢迎你在文章底部留言、加我微信或者加入我们的微信前端自学交流组,期待在自学小组与你相遇!
为何会有这个Roadmap
自学也需要有章可寻,早上整理了一下这段时间学的内容东西比较多,接下来的一段时间都会围绕这个Roadmap展开学习,当然这张前端自学图谱并不是一成不变的,随着时间的推移我会调整这张Roadmap里的内容,总的目标只有一个系统化的学好前端的技术,我会随时调整完善这张图谱。
开发通用技能
Git版本控制
Terminal终端技能
数据结构和算法
软件设计原则
- SOLID (SRP、OCP、LSP、ISP、DIP) Wiki
- KISS (Keep It Simple,Stupid) Wiki
- DRY (Don't repeat yourself) Wiki
- The Rule Of Three Wiki )
- YAGNI (You aren't gonna need it) Wiki
GitHub
Licenses
- GNU AGPL Lincense
- GNU GPL Lincense
- GNU LGPL Lincense
- Mozilla Public License
- Apache License
- MIT Lincense
- Unlincense
SSH
HTTP/HTTPS 和 API设计
设计模式 Design Patterns
- 工厂模式
- 适配器模式
- 迭代器模式
- ...
字符编码
前端开发技能
HTML
- HTML基础
- HTML语义
- SEO基础
- 可访问性 (Accessibility) Wiki中文
CSS
- CSS基础
-
常见布局
- 浮动布局 Floats
- 定位布局 Positioning
- 显示 Display
- 盒子模型 Box Model
- 网格布局 Grid
- Flex布局 Flex Box
- 媒体查询 Media Queries
- CSS3
JavaScript 语言
- JavaScript基础语法
- DOM操作
-
通讯
- Fetch API
- Ajax(XHR)
- ES6+
-
重点理解
- Hosting
- Event Bubbing
- Scope
- Prototype
- Shadow DOM
- strict
- DNS
- HTTP
包管理
- npm
- yarn
CSS 预编译
- SASS
- PostCSS
- Less
CSS Framework (CSS框架)
- Bootstrap
- Materialize CSS
- Bulma
- Semantic UI
CSS 结构化
- BEM
- OOCSS (了解)
- SMACSS (了解)
构建工具
编辑器检查和构建检查(代码格式规范)
- Prettier
- ESLint
- JSHint
- JSLint
- JSCS
Task Runner任务管理工具
- npm scripts
- gulp
模块打包工具
- Webpack
- Parcel
- Rollup
前端框架(建议初学选一种)
-
React.js
- 路由 React Router
-
状态管理
- Redux
- MobX
-
Vue.js
- Vue Router(路由)
- Vuex(状态管理)
- Vue CLI(脚手架)
-
Angular
- RxJS
- ngrx
CSS in JS
- Styled Components
- CSS Modules
- Emotion
- Radium
- Glamorous
测试
测试框架
- Jest
- Enzyme
- Cypress
-
其他
- Mocha
- Chai
- Ava
- Karma
- Jasmine
- Protractor
测试类型
- Unit 单元测试
- Integration 集成测试
- Functional 功能测试
PWA(Progressive Web App)渐进式Web应用
- 什么是PWA
-
基础技术
- Storage 存储
- Web Sockets
- Service Workers
- Location 定位
- Notifications 通知
- Device Orientation
- Payments
- Credentials
-
性能测试
类型检测
- TypeScript
SSR(Server Side Rendering)服务端渲染
React.js
- Next.js
- After.js
Angular
- Universal
Vue.js
- Nuxt.js
静态站点生成
- GatsbyJS
桌面应用
- Electron
- Proton Native
- Carlo
移动应用
- Flutter
- React Native
- NativeScript
服务端
NodeJS系列
- Node.js
- Koa
- Egg
- Nest.js
如果你和我一样,也都一直在自学前端,如果自学的过程中遇到了坎,不管是学习过程中遇到什么问题,或者有什么好的意见和建议想和我交流,欢迎你在文章底部留言、加我微信或者加入我们的微信前端自学交流组,期待在自学小组与你相遇!
这里我为你准备了微信——前端自学交流群,欢迎你加入我们一起学习。(一群快满,想入群的小伙伴可以加我微信:colin3dmax)
山地人微信:colin3dmax( 请备注:你来自思否 | 是否要加入前端自学交流群 )
相关文章
- 2019年山地人的前端完整自学计划——讲一个B站UP主山地人的40天前端自学故事
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 2019年山地人的前端完整自学计划——讲一个B站UP主山地人的40天前端自学故事
- 自学 Android 开发的正确姿势,非常值得准备自学的同学瞧一眼
- Python自学之路
- 如何自学PHP?
- 开源机器人自学指南
- 自学NodeJS设置Header
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。