山地人的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-5-21 / 59.00

本书着眼于“设计&心理”两个主要的维度,围绕“创新式思维2.0”(共情—移情—定义—构思—建模—测试)的模式,分析如何“理解一款好的产品设计”、“如何了解用户需求”、“如何从需求来定义产品”的几个步骤,由浅入深地介绍设计师通过洞察和理解用户内在需求来指导产品创新和设计的理念。一起来看看 《不止情感设计》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具