本文转自张帅于知乎《零基础的前端开发初学者应如何系统地学习？》中的回答。
知乎原文：https://www.zhihu.com/question/19834302
GitHub项目：前端技能汇总 Frontend Knowledge Structure

在学习刚刚开始时，我也有着从哪里开始，学习路线安排与掌握到何种程度才算完成一个阶段的学习等疑惑，在查阅资料时发现了这个较为全面的回答。
面对前端知识更新非常快的问题作者每年对回答至少更新一次，从2011年开始到2019年已经更新了八年，并且在GitHub中发布了一个项目将前端开发的技能进行详细的汇总整理。不过这个GitHub项目最近一次更新是在2017年，其中一些知识点虽已过时但整体还是具有相当的参考性。
本文转载的就是该GitHub项目，对每阶段学习内容的说明请移步作者的知乎原答案。

Frontend Knowledge Structure

项目起源

@jayli 的这幅前端知识结构图。

图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。

前端开发知识结构

前端工程师
- 浏览器
  - IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)
  - Firefox (Gecko)
  - Chrome/Chromium (Blink)
  - Safari (WebKit)
  - Opera (Blink)
- 编程语言
  - JavaScript/Node.js
  - CoffeeScript
  - TypeScript
- 切页面
  - HTML/HTML5
  - CSS/CSS3
  - Sass/LESS/Stylus/postCSS
  - PhotoShop/Paint.net/Fireworks/GIMP/Sketch
- 开发工具
  - 编辑器和IDE
    - VIM/Sublime Text2
    - Notepad++/EditPlus
    - WebStorm
    - Emacs EmacsWiki
    - Brackets
    - Atom
    - Lime Text
    - Light Table
    - Codebox
    - TextMate
    - Neovim
    - Komodo IDE / Edit
    - Eclipse
    - Visual Studio
    - Visual Studio Code
    - NetBeans
    - Cloud9 IDE
    - HBuilder
    - Nuclide
  - 调试工具
    - Firebug/Firecookie
    - YSlow
    - IEDeveloperToolbar/IETester
    - Fiddler
    - Chrome Dev Tools
    - Dragonfly
    - DebugBar
    - Venkman
    - Charles
  - 版本管理
    - Git/SVN/Mercurial
    - Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
- 代码质量
  - Coding style
    - JSLint/JSHint/jscs/ESLint
    - CSSLint
    - Markup Validation Service
    - HTML Validators
  - 单元测试
    - QUnit/Jasmine
    - Mocha/Should/Chai/Expect
    - Unit JS
  - 自动化测试
    - WebDriver/Protractor/Karma Runner/Sahi
    - phantomjs
    - SourceLabs/BrowserStack
- 前端库/框架
  - jQuery/Underscore/Mootools/Prototype.js
  - YUI3/Dojo/ExtJS/KISSY
  - Backbone/KnockoutJS/Emberjs
  - AngularJS
    - Batarang
  - Bootstrap
  - Semantic UI
  - Juice UI
  - Web Atoms
  - Polymer
  - Dhtmlx
  - qooxdoo
  - React
  - Brick
  - vue.js
- 前端标准/规范
  - HTTP/1.1: RFCs 7230-7235
  - HTTP/2
  - ECMAScript3/5
  - ECMAScript6
  - W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…
  - CommonJS Modules/AMD
  - HTML5/CSS3
  - Semantic Web
    - MicroData
    - RDFa
  - Web Accessibility
    - WCAG
    - Role Attribute
    - WAI-ARIA
- 性能
  - JSPerf
  - YSlow 35 rules
  - PageSpeed
  - HTTPWatch
  - DynaTrace’s Ajax
  - 高性能JavaScript
- SEO
- 编程知识储备
  - 数据结构
  - OOP/AOP
  - 原型链/作用域链
  - 闭包
  - 编程范型
  - 设计模式
  - Javascript Tips
- 部署流程
  - 压缩合并
    - YUI Compressor
    - Google Clousure Complier
    - UglifyJS
    - CleanCSS
  - 文档输出
    - JSDoc
    - Dox/Doxmate/Grunt-Doxmate
  - 项目构建工具
    - make/Ant
    - GYP
    - Grunt
    - Gulp
    - Yeoman
    - FIS
    - Mod
  - ES6＋转换器
    - Traceur
    - Babel
- 代码组织
  - 类库模块化
    - CommonJS/AMD
    - YUI3模块
    - webpack
  - 业务逻辑模块化
    - bower/component
  - 文件加载
    - LABjs
    - SeaJS/Require.js
  - 模块化预处理器
    - Browserify
- 安全
  - CSRF/XSS
  - CSP
  - Same-origin policy
  - ADsafe/Caja/Sandbox
- 移动Web
  - HTML5/CSS3
  - 响应式网页设计
  - Zeptojs/iScroll
  - V5/Sencha Touch
  - PhoneGap/Cordova
  - jQuery Mobile
  - W3C Mobile Web Initiative
  - W3C mobileOK Checker
  - Open Mobile Alliance
  - React Native
  - ionic
- 前沿技术社区/会议
  - D2/WebRebuild
  - NodeParty/W3CTech/HTML5梦工厂
  - JSConf/沪JS(JSConf.cn)
  - QCon/Velocity/SDCC
  - JSConf/NodeConf
  - CSSConf
  - YDN/YUIConf
  - HybridApp
  - WHATWG
  - MDN
  - codepen
  - w3cplus
  - CNode
- 计算机知识储备
  - 编译原理
  - 计算机网络
  - 操作系统
  - 算法原理
  - 软件工程/软件测试原理
  - Unicode
- 软技能
  - 知识管理/总结分享
  - 沟通技巧/团队协作
  - 需求管理/PM
  - 交互设计/可用性/可访问性知识
- 可视化
  - SVG/Canvas/VML
  - SVG: D3/Raphaël/Snap.svg/DataV
  - Canvas: CreateJS/KineticJS
  - WebGL/Three.JS
后端工程师
- 编程语言
  - C/C++/Java/PHP/Ruby/Python/…
- 网页服务器
  - Nginx
  - Apache
  - Lighttpd
- 数据库
  - SQL
  - MySQL/PostgreSQL/Oracle/DB2
  - MongoDB/CouchDB
- 数据缓存
  - Redis
  - Memcached
- 文件缓存/代理
  - Varnish
  - Squid
- 操作系统
  - Unix/Linux/OS X/Windows
- 数据结构

前端书籍推荐

★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.

CSS

Eric Meyer 谈 CSS（卷二）★★★
CSS权威指南（第3版）★★
精通CSS★★★
HTML & CSS设计与构建网站★

JavaScript

JavaScript & jQuery交互式Web前端开发★
JavaScript DOM编程艺术（第2版）★
JavaScript高级程序设计（第3版）★★
锋利的jQuery★★
高性能JavaScript★★★
JavaScript语言精粹★★★
JavaScript权威指南★★★
编写可维护的JavaScript★★★
JAVASCRIPT语言精髓与编程实践★★★
Effective Javascript★★★
Secrets of the JavaScript Ninja★★★
JavaScript模式★★★
JavaScript设计模式★★★★
基于MVC的JavaScript Web富应用开发★★★

性能实践

高性能网站建设指南★
高性能网站建设进阶指南★★
Web性能实践日志★★★
Web性能权威指南★★★

版本控制工具

版本控制之道 (git)★★
Pro Git★★★
Git权威指南★★★★

后端书籍推荐

Linux管理

Linux 系统管理技术手册
鸟哥的 Linux 私房菜
Linux 101 Hacks
UNIX Shell Scripting
The Linux Command Line
Linux Network Administrator’s Guide

Linux编程

Linux程序设计
Linux系统编程
Unix环境高级编程
Unix编程艺术
The Linux Programming Interface
程序员的自我修养
深入理解Linux内核
Unix网络编程
TCP/IP高级编程

C/C++

Linux C编程一站式学习
C和指针
C陷阱与缺陷
C专家编程
C语言核心技术
彻底搞定C指针
征服C指针
C++编程思想
高质量程序设计指南—C/C++语言
Inside the C++ Object Model
A Tour of C++
The C++ Programming Language
The C++ Standard Library - A Tutorial and Reference
The C++ Standard (INCITS/ISO/IEC 14882-2011)
Overview of the New C++

前端工作面试

前端工作面试问题
前端开发面试题（中文）

零基础的前端开发初学者应如何系统地学习？前端技能汇总 Frontend Knowledge Structure相关推荐

前端搬运工零基础的前端开发初学者应如何系统地学习前端掌握技能的学习路线
前端小伙伴们:[刚入门,但迷茫人群],请认真读完下面的淘宝web 大神总结,如果你对前端是真爱的话,并且坚信可以作为职业去改变你的生活,慢慢日积月累,按这个来吧,真的! 上半部分是技术路线, 下 ...
零基础的前端开发初学者应如何系统地学习？
网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑.其核心价值在于对用户体验的追求.可以按如下思路学习系统学习: 基础知识: html + css 这部分建 ...
前端搬运工：零基础的前端开发初学者应如何系统地学习？前端掌握技能的学习路线
前端小伙伴们:[刚入门,但迷茫人群],请认真读完下面的淘宝web 大神总结,如果你对前端是真爱的话,并且坚信可以作为职业去改变你的生活,慢慢日积月累,按这个来吧,真的! 上半部分是技术路线, 下 ...
web前端开发初学者必看的学习路线图课程内容分享
随着web前端需求量的日益增加,企业对前端人员的技能要求也越来越高,我们如何能学到满足企业的web前端技能,向着高薪前进,那你就的了解企业需要的人才需求,还的提升自身的技术能力,那么想从事web前端行 ...
如何成为一名牛逼Web前端开发人员？入行学习完整指南
经过如此多的试验和测试,而不是说你从头开始创建了所有内容,接着,你在网页上创建了第一个登录表单时,你感觉如何? 经过了多次更改后,将布局分配给第一个Web应用程序时感觉如何? 当成功处理了数千个用户的 ...
零基础最高薪资16000 元！黑马北京校区前端学科牛掰！
前端就业前景好不好?前端发展虽然没有后端那么历史悠久,但是,目前前端的发展势头毫不输给后端. 现在公司之中前后端完全分离的开发模式,使得前端在web开发中成为不可或缺的一部分. 黑马程序员北京顺义校区 ...
【视频回放与课件】零基础入门AI开发
今天上午,受广州图书馆邀请,在第一讲<零代码上手人工智能>的基础上,以<零基础入门AI开发>为主题,分四步解锁人工智能学习的概念与开发工具,让您在一小时内轻松掌握人工智能开发要 ...
java开发技术有什么意义,零基础学Java开发技术有哪些优势和好处？
零基础学Java开发技术有哪些优势和好处?Java开发技术有下列优势:Java编程语言简单.面向对象集中于对象及其接口.分布式处理TCP/IP协议.鲁棒性.安全性.体系结构中立性.可移植性.解释执行. ...
php mysql好学吗_零基础小白PHP开发好学吗
零基础小白PHP开发好学吗,PHP知识点有哪些呢,如果分段学习PHP技术,你所知道的方法有哪些呢? 第一阶段 2048.扫雷.贪吃蛇游戏项目贯穿内容管理文件操作 PL/SQL编程 HTTP服务器开 ...

零基础的前端开发初学者应如何系统地学习？前端技能汇总 Frontend Knowledge Structure