山地人的2019年前端自学路径Roadmap——v0.0.1

栏目: CSS · 发布时间: 5年前

内容简介:自学也需要有章可寻,早上整理了一下这段时间学的内容东西比较多,接下来的一段时间都会围绕这个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
  • 性能测试

    • PPPL Pattern
    • RAIL性能评估模型 参考谷歌开发者文档
    • Performance Metrics 性能测试 Wiki
    • Light House 测试工具
    • DevTool Chrome开发工具

类型检测

  • 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年前端自学路径Roadmap——v0.0.1

相关文章

  • 2019年山地人的前端完整自学计划——讲一个B站UP主山地人的40天前端自学故事

点击阅读

  • 想学前端,JavaScript基础不好,学习又无从下手,山地人用权威的MDN手把手带你夯实JS基础 点击阅读
  • B站Up主-山地人-这位老哥2019年的前端自学计划进展如何?——讲一个B站Up主自学前端85天的故事
    点击阅读

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

可视化未来

可视化未来

[美] 埃雷兹·艾登、[法] 让-巴蒂斯特·米歇尔 / 王彤彤、沈华伟、程学旗 / 浙江人民出版社 / 2015-9 / 54.90元

科学的传播速度有多快?今时今日我们很少谈论上帝了吗?人们什么时候开始用“having sex” 而不用“making love”? 史上的人是在哪岁成名的?语法的变化速度到底有多快?哪些作家被纳粹审查得最彻底? “donut” 什么时候开始取代“doughnut”? 我 们能否预测人类未来?比尔·克林顿和花椰菜哪个更出名? 《可视化未来》一书的两位作者通过与“谷歌图书”的合作,得以有机会研究......一起来看看 《可视化未来》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具