前端学习路线图

1.前端基础知识看下面 3 个网站就够了，不需要东看看西看看。

• w3c
• MDN
• freecodecamp

2.技能点查漏补缺(主要来源于附件图)

internet

• How does the internet work ?
• What is HTTP?
• Browsers and how they work ?
• DNS and how it works?
• What is Domain Name ?
• What is hosting ?

HTML

• Learn the basics
• Writing Semantic HTML
• Forms and Validations
• Conventions and Best Practices
• SEO Basics
• Accessibility

css

• Learn the basics
• Making Layouts (Floats, Positioning, Display, Box Model, CSS Grid, Flex Box)
• Responsive design and Media Queries
• sass
• BEM
• Styled Component
• CSS Modules

icons

• iconfont
• Sketch
• PhotoShop

JavaScript

• Syntax and Basic Construct
• Learn DOM Manipulation
• Learn FetchAPI /Ajax(XHR)
• ES6+ and modular JavaScript
• Understand the conceptsHoisting ，EventBubbling，Scope，Prototype ，ShadowDOM，strict

Version Control Systems

• Basic Usage of Git
• github
• gitlab

Web Security Knowledge

• HTTPS
• Content Security Policy
• CORS
• OWASP Security Risks

Package Managers

• npm
• cnpm

Build Tools

• Task Runners(npm scripts)
• Module Bundlers(webpack )
• Linters and For matters(ESLint ,Prettier )

Pick a Framework

• Vue (vuex ,vue-router ,axios ,element-ui )
• React (Redux ,Reactstrap ,Material UI,Bootstrap)

Web Components

• HTML Templates
• Custom Elements
• Shadow DOM

Testing your Apps

• Jest

Type Checkers

• TypeScript

Progressive Web Apps

• Storage
• Web Sockets
• Service Workers
• PRPL Pattern
• RAIL Model
• Performance Metrics
• Using Lighthouse

ServerSide Rendering (SSR)

• React(Next.js)
• Vue(Nuxt.js)

GraphQL

• Apollo

Static Site Generators

• Next.js
• GatsbyJS
• Hugo
• Jekyll
• Nuxt.js

Mobile Applications

• React Native

Desktop Applictions

• Electron

Web Assembly(WASM)

• Go

开发工具

• vscode
• Fiddler 或 Charles
• Postman
• Chrome DevTools

自制工具

• 创建项目 cli 工具

可视化

• SVG
  • D3
  • Raphaël
  • Snap
• Canvas 2D
  • Echarts
  • HighCharts
• WebGL
  • Three

微前端

• qiankun
• single-spa

设计模式

• 单例模式
• 工厂模式
• 观察者模式
• 发布订阅模式
• 代理模式
• 适配器模式
• 策略模式
• 命令模式

数据结构

• 堆（Heap）
• 栈（Stack）
• 队列（Queue）
• 链表（Linked List）
• 数组（Array）
• 树（Tree）
• 集合（Set）
• 哈希表（Map）

算法

• 排序
  • 冒泡排序
  • 选择排序
  • 插入排序
  • 快速排序
  • 希尔排序
  • 归并排序
  • 堆排序
  • 计数排序
  • 基数排序
• 检索
  • 线性搜索
  • 二分查找
  • 索引
  • 深度优先搜索（DFS）
  • 广度优先搜索（BFS）
• Diff
• JavaScript 算法与数据结构

计算机网络

• OSI 七层模型

后端扩展

• nodejs

3.经常上github 查看前端开源库源码，是快速提高技能的重要方式

—附件图片—