本科生如何系统地学习前端开发？

第一、 前端入门
先熟悉前端基础，再做些小项目快速上手。

前端的基础：JavaScript，HTML，CSS，然后学习jQuery。

基础入门可以按照

学习路径学习，看教程的同时，要多多练习。走向大神的路无他，唯手熟尔。可以模仿自己喜欢的漂亮的网站，写写页面，实现一些特效。

基础篇
1.

如果你想制作自己的网页，做网页设计，网站开发，那么你首先要学习的就是HTML，本教程就是入门HTML实验。

2.

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

3.

介绍 JavaScript 的语法及事件、对象、DOM 等基础知识。

4.

HTML5有很多新特性，本实验将做入门介绍。

5.

jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。

6.

项目篇

下面是一些有意思的前端练手小项目，如果不过瘾可以在这里找你感兴趣的

1.

使用HTML5和css3实现的九宫格拼图游戏。

2.

相信大家都玩过windows系统自带的扫雷，今天我们来做一个网页版的扫雷。

3.

使用html,css,jquerymobile带你完成一个亲戚称谓计算器，帮你快速想起你的亲戚的称谓

4.

使用 HTML 和 CSS 来打造自己的「大白」，最好对 HTML 和 CSS 有一定的了解。

5.

用最基础的html，css，以及原生的JavaScript实现一个网页版本的“别踩白块”游戏，有图有真相。

6.

用JS实现动感的歌词同步播放器，仅需简短的JS代码就可以实现歌词同步播放，配合简单的几十行php既可以实现切换歌曲。全部是Ajax哦，非常简单。

7.

使用javascript、html、css、jquery和php实现一个转盘抽奖，让你窥探抽奖背后的秘密。

8.

利用HTML5的File API和Canvas实现本地的图片裁剪

9.

SCSS（SASS）画小黄人，学习CSS3。

第二、 如今的前端

近几年前端发展迅速，ES6的普及速度更是惊人，所以一定要学习ES6/7（

）。

其次是Node.js，Node.js是服务器端的一个平台，其给前端开发提供了很多实用的工具，是如今前端开发的重要组成部分。

工具推荐：Babel，Webpack，Postcss。

框架推荐：React，Vue.js。

第三、不止前端

使用Hexo（一个Node.js平台下的静态博客）在 github page 上面搭建一个博客，通过博客写下自己学习过程中的经验和问题可以与更多的人交流，提交自己的代码到github上面保存自己的成果。写博客是一个很好的成长方式。

前端已不是从前的前端，不仅仅是切页面做特效，如今的前端项目越来越庞大，需要重视项目组织和管理，需要工程化，需要前端架构。

同时，学习一门后端语言更有利于在前端的路上走得更远。

赞JacksonTian/fks · GitHub

你只需要注册一个github账号，github去关注一下，了然！

总结一些常用的前端知识体系

1. 布局框架：

Bootstrap: http://getbootstrap.com/

Foundation: Foundation | The most advanced responsive front-end framework in the world.

Uikit: UIkit

Web Components:http://css-tricks.com/modular-future-web-components//

2. 构建工具及包管理器：

Grunt: Grunt: The JavaScript Task Runner

Yeoman: The web's scaffolding tool for modern webapps

Bower: Bower

NPM: npm

3. 代码优化：

Google Closure Compiler:

CSS Lint: CSS Lint

JSHint: JSHint, a JavaScript Code Quality Tool

JSLint: JSLint: The JavaScript Code Quality Tool

4. CSS预处理器

Less: Getting started

Sass: Sass: Syntactically Awesome Style Sheets

5. 调试工具：

Chrome：https://developers.google.com/chrome-developer-tools/

Firebug: Firebug

HTTPWatch: HttpWatch 10: HTTP Sniffer for IE, iPhone and iPad

Fiddler: Fiddler free web debugging proxy

IE Developer Toolbar:

Weinre: weinre - Home

6. 文档工具：

JSDoc: GitHub - jsdoc3/jsdoc: An API documentation generator for JavaScript.

Jekyll: http://jekyllrb.com/

7. IDE/文本编辑器

WebStorm: WebStorm: The Smartest JavaScript IDE

8. 移动端 手势事件库：

GMU: GMU - mobile UI

Hammer.js:< http://eightmedia.github.io/hammer.js/>

QuoJS: QuoJS

Zepto: Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

Swipe: GitHub - thebird/Swipe: Swipe is the most accurate touch slider.

jQuery Mobile: http://jquerymobile.com/

KendoUI:Kendo UI HTML Framework

Goratchet:Ratchet

9. 思维导图

XMind:XMind: The Most Professional Mind Mapping Software

10.模块加载器：

ESL:< GitHub - ecomfe/esl: enterprise standard loader>

RequireJS: RequireJS

SeaJS:Sea.js - A Module Loader for the Web

11. 项目管理:

Github: How people build software · GitHub

GitLab: Code, test, and deploy together with GitLab open source git repo management software

Redmine: Overview - Redmine

12. 原型设计:

Axure RP: Interactive Wireframe Software & Mockup Tool

13. 富互联网应用框架

AngularJs: AngularJS — Superheroic JavaScript MVW Framework

Backbone: Backbone.js

AmpersandJSAmpersand.js

Knockout: Knockout : Home

Underscore: Underscore.js

14. 模板引擎

EJS: EJS - JavaScript Templates

Handlebars: Handlebars.js: Minimal Templating on Steroids

Jade: Jade - Template Engine

Velocity: Apache Velocity Site

15. 测试框架

Jasmine: http://pivotal.github.io/jasmine/

QUnit: QUnit

mocha: http://visionmedia.github.io/mocha/

16. 版本控制

Git: http://git-scm.com/

Subversion: Apache Subversion

Mercurial(Hg): http://mercurial.selenic.com/

17. WEB框架/服务器

Node: http://nodejs.org/

Express: Express - Node.js web application framework

Apache: Welcome! - The Apache HTTP Server Project

Nginx: nginx news

18. CommonJS

Component: http://component.io/

19. WEB安全

XSS(跨站脚本攻击)

CSRF(跨站点伪造请求攻击)

跨iframe攻击

Clickjacking安全漏洞

20. 代码规范

Code Guide: http://alloyteam.github.io/code-guide/

编写可维护的CSS: 编写可维护的CSS

GJS编码规范指南: http://alloyteam.github.io/JX/doc/specification/google-javascript.xml

jQueryJS规范: http://contribute.jquery.org/style-guide/js/

21. HTML模块化

html5boilerplate: http://html5boilerplate.com/

22. CSS模块化

Normalize.css: Normalize.css: Make browsers render all elements more consistently.

LESS:用法 | Less.js

OOCSS:http://www.oocss.cc/Object-oriented CSS

CssReset:http://www.cssreset.com/

23. HTML5 Canvas

D3:http://d3js.org/