计算机专业的学生如何系统学习前端技术？

抛个砖引块玉。 ==== 个人觉得任何一门语言想要学好，最重要的还是打好基础。夯实了基础才能跳的更高，走的更远。前端语言学习也是这样，不能仅仅是工程导向的的学习，用到什么了才去找什

计算机专业的学生如何系统学习前端技术？抛个砖引块玉。
====
个人觉得任何一门语言想要学好，最重要的还是打好基础。夯实了基础才能跳的更高，走的更远。前端语言学习也是这样，不能仅仅是工程导向的的学习，用到什么了才去找什么(搜索式学习)，那样不能形成一个系统的知识框架。
## Javascript：

有些常见概念要搞清楚：继承，闭包，原型链，作用域链，事件流等。

进阶：可以了解一些函数或操作的内部机制：eg，
* `new`操作符的工作机制（The new Operator http://d.pr/UfZH[[Construct]]http://d.pr/8C4V）
* 创建一个函数的内部机制
* instanceof的工作机制，衍生问题如何判断一个变量是否是数组 http://d.pr/PUVX
* this的取值
* __proto__ 和 prototype [[Prototype]] and prototype

## CSS：

1、盒模型，标准模式和非标准模式下盒模型渲染会有什么不同
2、常见的定位方式有哪些，relative absolute fixed定位有哪些不同
3、常见的浏览器兼容问题有哪些，如IE的hasLayout是怎么个东西，常用哪些方式来出触发hasLayout；z-index在IE和其它浏览器中有啥不同。还有著名的双边距bug，li中浮动元素bug等，进阶的可以了解BFC及其衍生的一系列问题。
4、常用的CSS Hack

下面这些书可以看一下：
========
Javascript高级程序设计
Javascript语言精粹
高性能Javascript
Javascript权威指南
CSS Mastery
CSS权威指南
========基础课程要学好，比较重要的是 Tcp./IP 尤其是http协议，面向对象原理，再看看浪潮之巅鉴于你目前的情况，建议按如下路线学习：
JavaScript:还是要多看些书才行。建议按如下顺序读：
1. 《javascript语言精粹》。了解JavaScript中哪些是精华，哪些是糟粕。
2. 《object oriented javascript》。读完后可以很清楚JavaScript的面向对象机制了。
3. 《High performance JavaScript》。读完后就知道如何写出高性能的代码了。
html+css这部分还是要多实践，根据自己哪里不会，在网上搜一些文章来读。但这几本书还是值得一看：
1. 《css权威指南》
2. 《css艺门之匠》

最后，你可以参考这篇文章
http://kingzs70.sinaapp.com/2011/09/09/front-end-web-develop-study 我觉得既然你有c++基础，学习JS的话，基本上就可以看js手册自己动手做一些项目或者练习。比如自己编写一些复杂点的控件之类。有不清楚的google，再做了一些项目后再回头看看楼上推荐的书理解会不一样的。总之我的经验是学习语言要先实践再总结和提高。不带着问题去看书是没有意义的。市面上的前端书籍又不是教材，不会说你看完一章就让你做几道习题。

你要去解决实际问题，在你解决不了或者解决得不好时，再看别人是怎么解决的。网上有中文论坛复制粘贴来的答案，也有顶级前端专家的英文博客，不同的解决方案都有什么优势，这是你要去思考的。一入前端深似海。
当你面对达成一个目标可以有无数种可能性的时候，你就知道什么是苦逼了。
都说 c/c++ 很多坑，但那都是固定的，知道了绕开就好了；
css/javascript 的坑，都是随机的，很多东西基本靠猜。Javascript这种东西，上手十分简单，一边做一边学是最好的。不推荐直接看书。书里面细节太多，看了也记不住，纯粹浪费时间，反而容易不得要领。不要想一步到位，也不用去想什么先打好基础，这都是上学时候教条的学习方法，效率也很低，也容易有挫败感。先让自己能做点东西了，再慢慢改进对语言本身和框架的的理解也不迟，反而会很有成就感，学的很快，有融会贯通的感觉。

最自然的学习过程就是自己实践，遇到什么问题就解决什么问题。先想想你想用前端的技术实现什么东西，然后再拆解成小的步骤，一步一步的死磕。不要上课了，花时间做项目吧。如果想不出来做什么，可以帮我做一个:D

可以看一下这个哥们的代码自学之路：
I’m learning to code by building 180 websites in 180 days. Today is day 115.for javascript part: ECMA-262 from dmitry soshnikov我认为你还是需要多看看书，不会犯低级错误。有时间可以出来实习，会有更深的认识我是认真地告诉你，把JS搞精通，不要理会什么框架。1. 现在网络如此发达，几下搜索就找到自己想要的答案了。大学课程不应该限制你的视野，网上和树上的知识有时候比老师讲的好的多。
2. 东西不需要学的太杂，it顶级公司的牛人也不是所有东西都会，但是必须要精一门相对基础的（比如你说的c++）。万事皆有通性，之后学习别的也很简单。
3. 前端其实可以换个思路，为什么不去做手机app呢。

找个项目做，比如你做个知乎web客户端，一步步来，缺哪补哪。在不断地try and error的循环中，也进步了。做的时候多想为什么。单纯前端没什么系统的。真要系统学，还是语言，算法，架构和模式这些基础。

最近把所学的总结了一下。
以上
与君共勉。

3 月 12 日根据评论所说的增加一些内容。原文中增加的会标出。

=============

一个寒假回来，好几个同学都来问我或者自己开始学起了前端，前端入门虽然简单，但是想要做好很难，是一个要通十行才能精一行的工作。再这几年 MVVM 框架的大肆流行，前端已经不是以前用 jQuery 写一写就可以的时代了。于是我写下这篇文章，来给大家一个参考。

首先，请大家牢记以下几点：

1. 前端不简单！前端不简单！前端不简单！
2. 前端和美工不一样！不是只会 HTML、CSS、JavaScript 就行的。
3. 程序和其他的行业不一样，经验是十分重要的，不管看多少书，都逃不过要经常的练习。
4. 在学会使用 JavaScript 实现相同操作之前，不要使用 jQuery。
5. JavaScript 和 Java 的关系如同雷锋和雷峰塔的关系一样，并没有什么关系！

前期准备工作

1. 下载好 Sublime Text 3，并自行找教程安装 Package Control。安装完后使用 Package Control 安装 Sublime Text 的汉化包，名字叫做 ChineseLocalizations。之后单独写 HTML 和 CSS 的时候，使用 Sublime Text 编辑。
2. 下载 Chrome 浏览器，目前（2017 年 3 月 9 日）最新版本为 56，请尽量安装最新版本，并设置为默认浏览器。
3. 下载 Visual Studio Code，之后单独写 JavaScript 的时候，使用 VS Code 编辑。
4. 下载并在本地安装 Node.js，目前（2017 年 3 月 9 日）最新版本为 7.7.1，请尽量安装最新版本。
5. 使用 Google 搜索，不能使用 Google 的使用 Bing 搜索，不要使用百度。
6. 注册一个 Github 账号。

初学阶段

学习时间：1 个月

初学阶段主要是学习 HTML、CSS 和 JavaScript，掌握三种语言的基础语法，并且掌握基本的布局方式、基本的 DOM 操作和算法。

HTML 和 CSS

推荐跟着 iMooc 的《HTML + CSS 基础课程》学习，里面的每一小节都是指引式的教学，跟着指导学习 HTML 和 CSS 的基础语法。

链接：http://www.imooc.com/learn/9

学习完上面《HTML + CSS 基础课程》的所有内容之后，自行完成一个百度搜索的首页，要求做到位置、颜色、间距等 99% 还原。不需要点击可以搜索。

【3.12 更新】

课程中没有提到的该学习的还有 flex 布局。

JavaScript

学习 JavaScript 可以上廖雪峰的网站上学习：

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

跟着目录从上往下学习，一直到 Promise。

学习的过程中可以结合练习题学习，这里整理了一些：

https://github.com/iszu/web-learning/blob/master/JavaScript%E7%BB%83%E4%B9%A0%E9%A2%98.md

正确把代码写的简单，短小。最好能一行实现。

当你学完 HTML、CSS 和 JavaScript 的基础之后，完成这么一个小练习：

实现一个简单的 TodoList

不懂啥是 TodoList 的自行 Google

限制

1. 界面不能照抄网上已有页面的风格，可以把网上的设计稿做成你的页面，也可以自己设计
2. 不能使用任何已有的库（如 jQuery, Bootstrap, Vue 等）
3. 增加、删除、修改的操作执行后，页面不能刷新

基本功能

1. 增删改查
   增删改查是指可以实现“增加”、“删除”、“修改”、“查询”四个功能。 其中“查询”不代表“搜索”，只要页面刷新后，数据能够正常显示即可。
2. 可以储存 “内容” 与 “是否已完成” 的状态
3. 使用 localStorage 储存数据
4. 界面尽可能做的好看

加分项

1. 可以只显示“未完成”或“已完成”的条目
   你可以把它们分开显示，或者是通过按钮切换显示，或者你也可以自己想一种把它们分开显示的方法
2. 给每一条 todo 添加 “完成日期”
3. 在第二点的基础上，已过期的条目有不同的样式
4. 其它更牛逼的功能

进阶阶段

学习时间：1 个月

学习完上面的课程，你就已经是一个合格的美工了，能根据设计师的设计稿实现出页面，但是还不是一个前端工程师，或者说还不是一个工程师。这一阶段你要开始接触一些作为程序员需要学习的东西。

Markdown

首先学会使用 Markdown 进行写作，Markdown 是什么，怎么样个语法，可以查看我之前的推送：

https://mp.weixin.qq.com/s?__biz=MzI1MDA2MTUyMQ==&mid=210548061&idx=1&sn=df5b99d555867c279596dde9b1862de2#rd

git 版本控制

其次要学会使用 git 进行版本控制，还是刚刚的廖雪峰—— git 教程：

http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

并且把上面做的两个项目，通过 git push 到 Github 上开源，README.md 使用 Markdwon 编写。

HTTP, Ajax 和异步

学习 Ajax 的基本实现，在这个阶段你会接触到 JavaScript 的异步编程，你得自行了解什么是异步，并且会开始基础 HTTP 协议，请自行了解 HTTP 状态码，请求头，响应头等基础知识，并了解 TCP/IP，HTTP，HTTPS 协议的概念和关系。接着了解 JavaScript 的同源策略，为什么需要同源策略，以及如何跨域。

高级阶段

学习时间：6 个月以上

【3.12 更新】

这个阶段你会开始多终端前端的开发，了解响应式布局，接触前端工程化和前端框架，并开始深入学习 JavaScript 的深入内容，包括 ES6、ES7 等。

响应式布局

了解响应式布局的应用范围、基本原理。学习 em, px, rem, vh, vw 等单位的使用。

ECMAScript 6

学习 ECMAScript 6，了解 ECMAScript 和 JavaScript 的关系，具体文章可以看阮一峰的 《ECMAScript 6 入门》，另外可以参考我写的《ECMAScript6 学习笔记》。

NPM

自行找教程学习 npm 的使用，接触前端工程化，了解 Gulp, Webpack 等工具的用处，并在本地自己搭建一个工程化环境。

前端框架

自行找教程学习 Vue.js 或 React 或 Angular 等前端框架，并尝试使用这些框架搭建一个单页面应用。以下以 Vue.js 举例：

• 学习 Vue.js 基础语法，一定要看官方的文档来学习：https://cn.vuejs.org。
• 学习使用 Vue-cli 在本地一键搭建 Vue.js 项目。
• 本地开发一个 Todolist 的 Vue.js 版本，同样使用 localstorage 进行存储。
• 学习使用 Github pages 部署开发好的 Todolist，可以让别人一起使用。
• 了解 Vue.js 2.0 的内部原理和外部思想：
• Virtual DOM
• 数据监听
• render 函数
• 单向数据流
• Vue.js 的 Lifecycle
• 服务端渲染的原理
• Vuex 和 Vue-Router
• ……

Canvas 相关

了解 Canvas API 的使用，懂得使用 Canvas 制作动画，以此来制作一些更炫酷的前端效果，如图片背景的高斯模糊等。

深入阶段

学习时间：无限

这个阶段是作为一个前端继续精进自己的一个阶段，你已经可以胜任小型项目了，但是还有一些细节需要你一直不断的学习。

前端储存

前端储存知识点：

• 储存技术有哪些？
• Cookie, SessionStorage, LocalStorage 有什么区别？
• ……

History API

什么是 History API，为什么要增加这个功能？

性能优化

学习有关前端性能优化的相关知识等：

• 如何缩短白屏时间
• 如何提升 CSS3 动画的性能
• ……

安全

学习有关前端的安全相关知识等：

• 通信安全
• 如何保障 Ajax 通信安全
• XSS 攻击
• 什么是 XSS 攻击
• 如何防范 XSS 攻击
• CSRF 攻击
• 什么是 CSRF 攻击
• 如何防范 CSRF 攻击
• CSRF 攻击和 XSS 攻击的区别是什么
• ……

兼容性

有关 IE 浏览器以及老版本浏览器的兼容性问题的学习和解决，包括：

• HTML 标签的兼容性
• CSS 样式的兼容性
• JavaScript 的 API 的兼容性
• 优雅降级与渐进增强

学习后端

等到前端学习的差不多了，可以通过 Node.js 来接触后端的开发，这里不再详述。

这文章原来我发在我的博客上，原文：Jason's Blog

你既然有c的基础，可以试试在熟悉js的语法用js做算法写写小代码。跟着网上很多比如慕课啊udemy啊coursera啊udacity之类的跟着demo几个网站做做小的doodle游戏。等这些你都搞定了，可以试试脱离html跟css用纯js做一个landing page出来。等这些你都熟悉了，就可以入坑jQuery了。说起来简单，等你有能力熟练用js做网页出来的时候，已经是两三个月后的事情了。

前端开发是一项复杂的工作，一方面需要不断更新自己的技术知识，另一方面需要从人性的角度去思考产品，因为技术归根结底是给人用的，如何好用，这是一门哲学！技术就像吃饭是人体成长必须的，但是人的成长还需要另外的东西！技术方面就不阐述了，思考方面的，推荐读道德经，易经，尽可能的了解人性，了解宇宙苍生，了解大道至简!

把百度技术学院2017的任务做一遍 应该就很熟悉了

前端相较于后端语言而言较为好学，学习成果易见，学起来也更能体会到成就感。

这里我整理了一下前端学习线路，希望对你有帮助。

1.HTML5+CSS3

PC端网站布局：

• 了解常用浏览器和浏览器内核;
• 了解语义化的概念;
• 掌握HTML5语法及使用技巧;
• 掌握HTML5常用标签。
• 掌握CSS语法及使用技巧;
• 掌握DIV+CSS布局方式;
• 掌握常见网页布局模式。
• 掌握Photoshop切图以及播件切图;
• 能够熟练使用开发人员工具进行页面调试
• 能够根据PSD文件独立完成静态页面的开发工作。

WebApp页面布局：

• 掌握HTML5新布局标签、多媒体标签;
• 掌握CSS32D.3D变换、动画效果;
• 能够使用CSS3新属性美化修饰网页;
• 了解移动端屏幕、移动端浏览器、操作系统的不同。
• 掌握常用移动端调试方法;
• 掌握常用移动端适配方法;
• 掌握CSS预处理器less的使用;
• 掌握常用移动端框架使用方法;
• 掌握常见移动端页面开发;
• 掌握响应式布局开发;
• 掌握Bootstrap开发响应式页面;
• 掌握适配不同终端的网页开发技术选型。

阶段学习成果检测，完成PC端商城页面布局，完成移动端页面布局

2.JS交互设计

JavaScript基础-进阶-高级：

• 能够掌握JavaScript基本语法;
• 掌握常见JavaScript算法;
• 掌握DOM的各种操作;
• 熟练使用面向对象思想进行DOM编程;
• 掌握JavaScript的高级语法;
• 掌握JavaScript常见兼容性方案。
• 独立完成视频网站的页面搭建(包括HTML结构、CSS样式、 JavaScript 特效);
• 掌握应对业务编程的能力;
• 掌握团队合作开发流程。

JQuery

• 熟练使用jQuery操作DOM ;
• 熟练使用和编写jQuery案例。

阶段学习成果检测，完成视频类目网站布局、交互、封装、性能优化等等

3.Node开发

ECMAScript6

• 了解ES6和JS的关系;
• 掌握ES6的基础用法和兼容性;
• 熟练掌握ES6的核心语法;
• 熟练使用ES6实现前端模块化开发。

WebPack模块打包器

• 熟练使用Webpack模块打包器;
• 熟练掌握前端自动化工具;

Node基础、Express框架、前端模块化、MongoDB

• 能够建立客户端服务器交互模型，
• 熟悉网络通信相关概念;
• 能够使用Nodejs进行Web服务端开发;
• 能够掌握JavaScript异步编程模型;
• 能够掌握JavaScript模块化编程方式;
• 能够使用Nodejs操作MongoDB数据库;
• 能够理解HTTP协议;
• 能够独立开发基于后台接口的动态网站、Ajax 数据交互的项目;
• 能够独立完成企业网站从前台到后台的基本开发工作。

阶段学习成果检测，完成即时聊天系统

4.前端框架

数据可视化、Vue、React

• 能够掌握JavaScript基本语法;
• 掌握常见JavaScript算法;
• 掌握DOM的各种操作;
• 熟练使用面向对象思想进行DOM编程;
• 掌握JavaScript的高级语法;
• 掌握JavaScript常见兼容性方案。

Angular

• 掌握Angular常用的指令
• 掌握如何定义和使用模块与组件
• 掌握路由的配置

阶段学习成果检测，完成商城后台管理系统、电商网站注册登录、订单管理、条件筛选等等功能

5.小程序与APP开发

微信小程序开发

• 能够掌握小程序的开发基础;
• 能够独立开发小程序项目;
• 能够掌握Canvas的使用;
• 能够掌握小程序的部署与发布;
• 能够掌握小程序开发框架mpwue的使用;
• 掌握第三方AI平台的使用。

微信小游戏开发

• 能够掌握小游戏开发基础;
• 能够独立开发小游戏项目;
• 能够掌握小游戏的部署与发布;
• 掌握第三方AI平台的使用。

React Native

• 能够独立使用React Native开发原生APP ;

阶段学习成果检测，完成微信小程序开发、微信小游戏开发、原生APP开发

6.就业准备

• 简历编辑
• 面试礼仪
• 面试常见题
• 面试演练等等

最后，前端是一个不断学习的过程，学到这里，并不是结束，而是在这个行业刚刚起步，想要学习更多的前端内容，需要在工作中不断学习、积累、成长。

俗话说，不会前端的后台不是好测试，编程的路上一路打怪升级无止境，学就完事了。

如果还有问题也可以私戳小优跟我唠唠。

首先，我自己是个五年的前端开发工程师。下面我想分享一下前端需要准备哪些东西，以及如何学习。

1.需要装什么软件

编辑器：vscode, sublime,webstorm 都可以，sublime轻量简单些，另外两个复杂些，但功能强大。

如果你只是写脚本一个编辑器就够了，但是如果你要让你写的项目跑起来，还需要安装一些服务器类的插件，比如git , nodejs 等

2.需要看哪些书

前端好的书籍有很多，基础的可以分为三类：html类，css类，javascript类，高级的还有架构类，框架类，性能优化方面的等

一般小白可以从javascript权威指南开始看起，这是js很经典的一本书，行内人称犀牛书。

3.学习网站和平台

基础的学习网站很多，比如w3school, MDN，菜鸟教程等；

视频教程网站，比如网易云课程，51cto, 慕课网等，免费的和收费的课程都有，可以根据自己的需要考虑是否需要买；

微信公众号推荐：程序员进阶分享，这个是我看过公众号里写的最好的，这个公众号会分享很多技术干货，学习经验等，很适合零基础的小白学习，简单易懂，总结的很好。

高赞回答Jason Chen中已经罗列了很清晰的规划。

我在适当补充一些自己的拙见吧。

WebApp - 基础课程应该很少涉及CSS方面的知识，而as a fronter 基础就是css和html。掌握基础css并不能让你在同龄人中脱颖而出，flex布局Grid布局会让你无论是PC还是App布局都会得心应手，以及一些常用的第三方组件库iScroll/Swiper等。

JavaScript - 重中之中，结合大学课程（C之类）理解起来应该不会很难，我就不过多累赘了。

React/Vue/Angular - 三大主流框架，推荐优先学习React，三大框架的实际项目经验一定会让你在校招简历中脱颖而出，顺便可以结合之前所学的JavaScript中Event Loop部分去思考一下三大框架的渲染机制，这里推荐掘金的一本小册《前端性能优化原理与实践》。

数据库 - 如果你认为前端不需要掌握数据库那你就大错特错了。MySQL、Redis学校的课程应该讲的比较充分了，Mongodb有兴趣可以适当了解一下以及有关这部分的相关登录鉴权-jwt认证、session认证网上有很多这方面的文章了。

自动化测试 - Jest/Mocha，推荐Jest，相对比较容易上手。

前端工程化 - Webpack（结合create-react-app/vue-cli去学习），包管理工具nvm/npm/yarn，诸如此类还有版本管理/缺陷控制/文档管理，这些可以暂时先不进行了解。

微信小程序/支付宝小程序 - 相当于换一种框架语言而已，看看文档就好了，上手非常容易。

数据结构/算法知识 - leetcode真题就可以了。

诸如此类还有很多，前方的路真的还很远。TypeScript、Nodejs以及最近崭露头角的flutter。

不要给自己划定界限明确区分前后端范围。

累赘一句，扎实的JavaScript功底和牢靠的数据结构是成为一个良好的开发人员的充分必要条件。

前端不需要算法？9012年了，前端早已经不是在写写html和css的那个切图仔了。