本科生如何系統地學習前端開發？
前端開發知識複雜且富有變化，大學又不教授相關的課程。
如果你現在在本科階段，你會如何更有效合理的制定計划去學習前端開發？讓自己基礎紮實，又充滿熱情。
另外，有什麼規勸和建議對現在有意於前端開發領域的本科生說的？相關問題：
Web前端的路該怎麼走？ - 職業發展
本科生如何系統地學習後台開發？ - Linux
第一、 前端入門
先熟悉前端基礎，再做些小項目快速上手。
前端的基礎：JavaScript，HTML，CSS，然後學習jQuery。
基礎入門可以按照Web前端工程師學習路徑學習，看教程的同時，要多多練習。走向大神的路無他，唯手熟爾。可以模仿自己喜歡的漂亮的網站，寫寫頁面，實現一些特效。
基礎篇
1.Web - HTML基礎入門
如果你想製作自己的網頁，做網頁設計，網站開發，那麼你首先要學習的就是HTML，本教程就是入門HTML實驗。
2.Web - CSS速成教程
CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製作時採用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。
3.Web - Javascript基礎（新版）
介紹 JavaScript 的語法及事件、對象、DOM 等基礎知識。
4.HTML5 - HTML5基礎入門
HTML5有很多新特性，本實驗將做入門介紹。
5. Web - jQuery基礎入門
jQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器。
6.Web - Bootstrap3.0入門學習
項目篇
下面是一些有意思的前端練手小項目，如果不過癮可以在這裡找你感興趣的全部 - 課程 - 實驗樓
1.HTML5 - HTML5兩步實現拼圖遊戲
使用HTML5和css3實現的九宮格拼圖遊戲。
2.Web - 網頁版掃雷
相信大家都玩過windows系統自帶的掃雷，今天我們來做一個網頁版的掃雷。
3.Web - 親戚稱謂計算器
使用html,css,jquerymobile帶你完成一個親戚稱謂計算器，幫你快速想起你的親戚的稱謂
4.Web - 打造網頁版「大白」
使用 HTML 和 CSS 來打造自己的「大白」，最好對 HTML 和 CSS 有一定的了解。
5.Web - 網頁版-別踩白塊遊戲
用最基礎的html，css，以及原生的JavaScript實現一個網頁版本的「別踩白塊」遊戲，有圖有真相。
6.Web - Ajax歌詞同步播放器
用JS實現動感的歌詞同步播放器，僅需簡短的JS代碼就可以實現歌詞同步播放，配合簡單的幾十行php既可以實現切換歌曲。全部是Ajax哦，非常簡單。
7.PHP - 轉盤抽獎
使用javascript、html、css、jquery和php實現一個轉盤抽獎，讓你窺探抽獎背後的秘密。
8.HTML5 - HTML5 本地裁剪圖片
利用HTML5的File API和Canvas實現本地的圖片裁剪
9. Web - SCSS（SASS）畫小黃人
SCSS（SASS）畫小黃人，學習CSS3。
第二、 如今的前端
近幾年前端發展迅速，ES6的普及速度更是驚人，所以一定要學習ES6/7（ECMAScript 6入門）。
其次是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 a€」 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. CommonJSComponent: 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 CanvasD3:http://d3js.org/
KINETIC:KineticJS
24. 前端學習網站
慕課網： http://www.imooc.com
極客學院： http://www.jikexueyuan.com
攻城課堂：http://www.gongchongketang.com
NODESCHOOL: http://www.nodeschool.io
阿里云云棲社區，彙集阿里技術精粹，點此關注（文字鏈接地址：https://www.zhihu.com/org/a-li-yun-yun-qi-she-qu-48/activities）
在學習前端知識前小編建議先看看這條道路的職業建議，選擇一個職業就好比一個公司 選擇戰略方向至關重要，推薦這篇閱讀下：
《前端大牛得到的最佳職業生涯建議》：前端大牛得到的最佳職業生涯建議-博客-雲棲社區-阿里雲 另外在正式學習前可以先看看這篇：
《Web入門者必看的HTML代碼編寫的30條軍規》避免重複踩前人的坑：Web入門者必看的HTML代碼編寫的30條軍規-博客-雲棲社區-阿里雲 有關前端知識的學習，推薦閱讀《前端知識體系目錄》文章從HTML/HTML5、CSS、JS等相關知識學習步驟目錄，到相關書籍推薦應有盡有：前端知識體系目錄-博客-雲棲社區-阿里雲 另外其他輔助類文章推薦以下內容閱讀： 這篇不是前端知識類分享，更多是講解前端程序員成長經驗分享：
《一個前端的自我修養》：一個前端的自我修養-博客-雲棲社區-阿里雲 進階篇：
《阿里9年，我總結的前端架構演進3大階段及團隊管理心法》：阿里9年，我總結的前端架構演進3大階段及團隊管理心法-博客-雲棲社區-阿里雲
補充：
原文鏈接：前端知識庫-博客-雲棲社區-阿里雲
前端開發全面知識庫，包括HTML5，CSS3和js的基本框架知識，以及DOM和BOM操作的基礎知識和一些基本工具和IDE。學習本篇，你將了解到以下知識。
核心 Core
HTML5
W3C http://www.w3school.com.cn/html5/ W3C https://www.w3.org/html/ig/zh/wiki/HTML5 菜鳥教程 http://www.runoob.com/html/html5-intro.html HTML5中文門戶 http://www.html5cn.org/
CSS3
W3C CSS教程 http://www.w3school.com.cn/css/index.asp W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp 菜鳥教程CSS教程 http://www.runoob.com/css/css-tutorial.html 菜鳥教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html CSS參考手冊 http://css.doyoe.com/
JS
W3C http://www.w3school.com.cn/js/ 菜鳥教程 http://www.runoob.com/js/js-tutorial.html 廖雪峰js教程 http://www.liaoxuefeng.com js標準參考教程-阮一峰http://javascript.ruanyifeng.com/
jQuery
W3C http://www.w3school.com.cn/jquery/ 菜鳥教程 http://www.runoob.com/jquery/jquery-tutorial.html 極客學院 http://wiki.jikexueyuan.com/project/jquery-tutorial/ 廖雪峰 http://www.liaoxuefeng.com/wiki/ 參考手冊 http://www.css88.com/jqapi-1.9/ 參考手冊 http://www.runoob.com/manual/jquery/
ES6
阮一峰ES6 http://es6.ruanyifeng.com/ 極客學院 http://wiki.jikexueyuan.com/project/es6/ JavaScript 標準參考 阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html
插件
parallel.js: 前後端通用的一個並行庫 zepto: 用於現代瀏覽器的兼容 jQuery 的庫 totoro: 穩定的跨瀏覽器測試工具 TheaterJS: 一個用於模擬人輸入狀態的 JS 庫 stellar.js: 前端用於實現非同步滾動效果的庫，現已不再維護 skrollr: 另一款實現一步滾動的開源庫，使用人數眾多，可實現各種狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是開發人員可以基於 web 技術構建 IOS7 程序 regulex: 用於生成 正則表達式 的可視化流程圖 markdown-it: 新型 Markdown 解析器，快速，支持插件 multiline: 用於 Javascript 中的多行文本，類似於 Ruby 的 HERE Doc screenfull.js: 全屏插件，支持各大瀏覽器 lunr.js: 類似於 Solr, 但是用於瀏覽器上的全文搜索引擎，可以為 JSON 創建索引，離線也可以使用 jquery.hotkeys: jQuery 插件，用於綁定熱鍵 breach_core: Javascript 編寫的 Browser (瀏覽器) octocard: 用於生成 Github 信息卡片的庫 github-cards: 用於生成 Github 信息卡片的庫 money.js: 輕量級貨幣轉換庫，web 和 node 皆可用 accounting.js: 輕量級的數字、貨幣轉換庫 javascript-algorithms: Javascript 實現的各種演算法集合 lazy.js: 類似於 underscore, 但是會延遲執行，某些場景下，性能會有很大的提升 seajs: 前端模塊載入器，解決模塊化、依賴等問題 jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫 js.js: Javascript 實現的 javascript JIT jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大 todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫 localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者 localStorage, 提供一致的介面 EventEmitter: 瀏覽器版的 EventEmitter jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據 knockout: 前端 MVVM 框架，用於開發富前端應用 mermaid: 可以根據文本生成流程圖，類似於 Markdown 的語法 js-sequence-diagrams: 另一款可以根據文本生成流程圖的庫，類似於 Markdown 的語法 flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品 zoomooz: jQuery 插件，用來處理瀏覽器縮放 fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方 mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React backbone: 強大的前端 MVC 庫，鼻祖級前端庫，最初為了配合 Rails 來模塊化前端應用，兼容性良好 (兼容到 IE6)，插件豐富，性能良好 jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持 jquery.scrollTo: 在頁面上以一個元素為起始以動畫的方式移動(ScrollTo)到另一個元素， 支持回退等 jScrollPane: 自定義的滾動條，讓所有瀏覽器都顯示一樣的滾動條 onepage-scroll: 提供類似於 iPhone6 展示頁類似的效果，適用於單頁應用，兼容到 IE8 scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好 ScrollMagic: 神奇的滾動交互效果插件，可以在滾動的過程中設置各種各樣的動態效果 infinite-scroll: 滾動載入，滾動到最下到自動載入， Paul Irish 大神之作 animatable: 僅僅依靠 border-width 和 background-position 實現的各種動態效果，看真相 Fluidbox: 頁面上內嵌圖片的放大縮小效果，類似於 Medium 中的效果 jquery-validation: jQuery 的一個插件，用於校驗 Form 表單 BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果 emscripten: 一款基於 LLVM, 可以將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度 qrcode-generator: 各種語言的二維碼生成工具 device.js: 一個可以檢測設備類型的工具，可以讓我們根據不同的設備來為其定製響應的 Javascript 和 CSS jquery-qrcode: jQuery 插件，用來生成二維碼 Wookmark-jQuery: jQuery 的一個插件，可以用來實現瀑布流的效果 isotope: 可以用來過濾、排列布局，實現美觀的動態布局切換效果，Demo lazysizes: 功能強大的圖片延遲載入工具，可以首先載入一個低質量的圖片，然後再載入高質量的圖片 progressbar.js: 簡潔美觀的進度條，扁平化 pigshell: 一個由 Javascript 實現的Shell, 將互聯網當做一個大的文件系統, 通過 cd/ls/cat…..等命令, 可以訪問 Facebook/Twitter/Google Drive 等網路服務 spectrum: Js實現的顏色選擇器 (Colorpicker) jQuery.countdown: jQuery 倒計時插件 summernote: WYSIWYG 富文本編輯器 awesomplete: 非常輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀 switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器 trix: Basecamp 公司出品的富文本編輯器，簡潔小巧 sensor.js: 在智能移動設備瀏覽器上，通過HTML5的api使用移動設備的功能。定位、運動、傾斜等 hyhyhy: 用於創建 基於 HTML5 的 演示文稿 swipebox: jQuery 插件，用於處理移動端的觸摸事件 FileAPI: 前端用戶處理文件（拖放、多文件上傳等） Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬體加速 matter-js: 2D 物理效果引擎，碰撞、彈跳等 jQTouch: 用於輔助創建手機端的 Web 應用，支持主題、Zepto.js 等 snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫 c3: 基於 D3 的圖表庫 echarts: 企業級圖表庫，百度開發 parallax.js: 一個用於響應智能手機 orientation 的庫 jQuery-Animate-Enhanced: jQuery 動畫庫的一個增強，用於現代瀏覽器 wysihtml: 富文本編輯器，適用於現代瀏覽器 slip: 一個通過滑動或者拖拽來操控列表的庫 evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持 PhotoSwipe: JS 的一個圖片展示庫 focusable: 是頁面上一個元素高亮的庫，有圖有真相 firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML5 mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架 interact.js: 一個適用於現代瀏覽器的，用於處理 手勢、拖放、縮放等的庫 rebound-js: 實現部分物理效果，Facebook 出品 basket.js: 基於 LocalStorage 的資源載入器，可以用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存 iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各種事件，不依賴任何的庫，且插件豐富, 大眾點評的手機端列表滾動就是用這個庫處理的 metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品 accessible-html5-video-player: Paypal 出品的 Video 播放器 loading: 幾種 Loading 效果，基於 SVG flippant.js: 一款能夠漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過作為源碼學習還是不錯的 move.js: 基於 CSS3 的前端動畫框架 scrollReveal.js: 使元素以非常酷帥的方式進入畫布 (Viewpoint)，看 Demo Modernizr: 一個用來檢測 HTML5 和 CSS3 支持情況的庫 foundation: 另一款前端模版框架，類似於 Bootstrap Flat-UI: Bootstrap 的一款主題，簡潔美觀 iCheck: 一款漂亮的 Checkbox 插件 Swipe: 非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮後的大小約 5kb slick: 功能異常強大的一個圖片滑動切換效果庫 SocialButtons: 漂亮的社交按鈕 sweetalert: 一個非常美觀的用於替換瀏覽器默認 alert 的庫 web-animations-js: Javascript 實現的 Web Animation API vivus: 可以動態描繪 SVG 的 JS 庫, 支持多種動畫 plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器 timesheet.js: 基於 HTML5 CSS3 時間表 slideout: 一個非常美觀的側滑菜單
包管理工具 Package Managers
NPM
菜鳥教程NPM 使用介紹 http://www.runoob.com/nodejs/nodejs-npm.html 淘寶 NPM 鏡像 https://npm.taobao.org/ npm 模塊安裝機制簡介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html npm包搜索地址 https://www.npmjs.com/
Bower
Bower中文網 http://www.bowercn.com/ Bower：客戶端庫管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html
Yarn
yarn中文網 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依賴管理 YARN 簡介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/
編輯器 Text Editors
WebStorm
官網下載 http://www.jetbrains.com/webstorm/download
VScode
官網下載 https://code.visualstudio.com/ vscode 插件精選 - 獻給所有前端工程師https://segmentfault.com/a/1190000006697219
SublimeText
官網下載 https://www.sublimetext.com/
SublimeCodeIntel: Sublime Text 的代碼補全工具，支持多種語言 Emmet：一個用於提高開發效率的編輯器插件，前身是Zen coding SublimeLinter: 一個提供代碼質量檢測的插件 SublimeTmpl：快速新建指定的模版文件 Syntax-highlighting-for-Sass：sass代碼高亮插件 MarkdownEditing: Sublime Text 強大的 Markdown 擴展, 提供快捷鍵, 主題等 ApplySyntax: 輔助檢測語法插件 CTags: Sublime Text Ctags 支持插件, 需要安裝 ctags sublime-react: React 代碼高亮
Atom
官網下載 https://atom.io/
HBuilder
官網下載 http://www.dcloud.io/
JS框架 JS Frameworks
Backbone
Backbone.js API中文文檔http://www.css88.com/doc/backbone/
AngularJs
中文官方文檔https://angular.cn/ angularjs中文網http://www.apjs.net/ angularjs教程http://www.angularjs.net.cn/ Angular 基礎入門http://www.cnblogs.com/micua/p/angular-essential.html angular-masonry: Masonry 的 AngularJS 插件，用於瀑布流 angular-schema-form: 根據 JSON 生成響應的 Form 表單 restangular: Angular 中用來處理 RESTful API 的插件，可替代 $resource ng-cordova: Cordova 常用組件的 Angular 版本 angular-translate: Angular 的國際化 (I18n) ng-inspector: Chrome 插件，用於調試 Angular angularjs-style-guide: AngularJS 代碼風格 ngReact: React 的 Angular 插件，可以在 Angular 中使用 React Components material: Google Material Design 效果的 Angular 實現 angular-local-storage: Angular 插件, 提供了對 localStorage 的友好支持, 並對不支持的瀏覽器使用 cookie 優雅降級 angular-filter: 一組有用的 Angular Filters bindonce: Angular 插件, 用於減少 Watcher 的數量, 提升性能
React
英文官方文檔https://facebook.github.io/react/docs/hello-world.html 中文官方文檔http://reactjs.cn/react/docs/getting-started-zh-CN.html gitbooks手冊https://hulufei.gitbooks.io/react-tutorial/content/introduction.html 阮一峰react入門http://www.ruanyifeng.com/blog/2015/03/react.html 阮一峰React Router入門http://www.ruanyifeng.com/blog/2016/05/react_router.html React Router 中文文檔https://react-guide.github.io/react-router-cn/ react-redux 中文文檔http://cn.redux.js.org/docs/react-redux/index.html 阮一峰Redux 入門教程http://www.ruanyifeng.com/blog react: React 框架源代碼 react-native: Facebook 出品的使用 React 開發 IOS 原生應用的框架 react-hot-loader: 實時調整 React 組件效果 grunt-react: React 的 Grunt 組件, 用於將 JSX 編譯成 JS touchstonejs: 基於 React 的手機應用前端框架 essential-react: 基於 React, ES6, React-Router的一個應用腳手架 react-router: React 路由解決方案
Vue
vue官方http://cn.vuejs.org/ vuex官方http://vuex.vuejs.org/zh-cn/ vue-router官方https://router.vuejs.org/zh-cn/
UI框架 UI Frameworks
Bootstrap
最受歡迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/
Ionic
一款接近原生的Html5移動App開發框架 會html css js就可以開發apphttp://www.ionic.wang/
Foundation
Foundation 中文網 迄今為止最好的響應式前端框架http://www.foundcss.com
FrozenUI
移動端服務的前端框架http://frozenui.github.io/
materializecss
基於Material Design的主流前端響應式框架http://www.materializecss.cn/
mui
最接近原生APP體驗的高性能前端框架http://dev.dcloud.net.cn/mui/
AntDesign
和react配合的UI框架https://ant.design
eleme
和vue配合的UI框架http://element.eleme.io/
JS預處理 JS Preprocessors
TypeScript
TypeScript 入門教程 菜鳥教程http://www.runoob.com/ TypeScript中文網https://www.tslang.cn/ TypeScript教程gitbookhttps://www.gitbook.com/
CoffeeScript
CoffeeScript 中文http://coffee-script.org/ CoffeeScript 實用手冊 極客學院http://wiki.jikexueyuan.com/project/coffeescript/
過程自動化 Process Automation
Grunt
Grunt中文網http://www.gruntjs.net/
Gulp
gulp.js 中文網http://www.gulpjs.com.cn/ gulp詳細入門教程http://www.ydcss.com/ 前端構建工具gulpjs的使用介紹及技巧http://www.cnblogs.com/2050/p/4198792.html Gulp開發教程https://www.w3ctech.com/topic/134
模板引擎 Templating
Handlebars
handlebarsjs官網http://handlebarsjs.com/ Handlebars中文文檔http://www.360doc.com/content/ Handlebars.js 中文文檔http://keenwon.com/992.html Handlebars的使用方法文檔整理http://www.tuicool.com/articles/fqQFN3
Haml
haml官方文檔https://github.com/haml/haml haml入門http://blog.csdn.net/napoay/article/details/50491363
Jade
Jade 官方的英文文檔http://www.w3cplus.com/html/how-to-use-jade.html Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html 帶你學習Jade模板引擎視頻http://www.imooc.com/learn/259
構建工具 Build Tools
RequireJS
RequireJS 英文網http://requirejs.org/ RequireJS 中文網http://requirejs.cn/ require.js的用法-阮一峰http://www.ruanyifeng.com/blog
seajs
seajs文檔http://seajs.org/docs/ SeaJS從入門到原理http://www.tuicool.com/articles/FfEJv2u
Browserify
官網http://browserify.org/ githubhttps://github.com/substack/node-browserify/
Webpack
Webpack 中文指南http://webpackdoc.com/ webpack的實例http://www.vichily.com webpack的入門http://www.vichily.com 一小時包教會 —— webpack 入門指南http://www.w2bc.com/Article/50764
CSS預處理器 CSS Preprocessors
Sass
sass入門http://www.w3cplus.com/sassguide/ sass參考手冊http://sass.bootcss.com/docs/sass-reference/ SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/
Less
less中文網http://lesscss.cn/ less快速入門http://less.bootcss.com/
stylus
stylus中文文檔-張鑫旭http://www.zhangxinxu.com/jq/stylus/
修改
阿里云云棲社區，彙集阿里技術精粹，點此關注（文字鏈接地址：https://www.zhihu.com/org/a-li-yun-yun-qi-she-qu-48/activities）
在大公司做前端幾年，突出的感受是覺得前端的細節實在是太多太豐富，總的來說，前端並不太需要工程師非常的smart但是很需要積累，解決方案更偏重細節更偏重語言特性的理解，更需要微觀的考慮問題，相對後端來說更需要有一些折衷和權衡（很多時候來源於IE的存在以及在國內份額的居高不下）。
前端的技術更新換代快，設備層出不窮，所以要求開發者能夠不斷與時俱進，多追一下新技術新設備的潮流。同時，開發者要能有眼光，敢於付出時間成本（當然永遠篤信Apple設備是主流也不失為一種選擇），學習再學習。
從學習的層面來說，我認為需要在以下方面逐漸提高個人能力：
1. 掌握HTML基本標籤（div, span, table, form, input, a, style, table, tr, td, meta..）和屬性（id, class, name, value, float, , 事件屬性），對於大多數顯示屬性可以藉助w3cschool來速查，了解get和post的異同。掌握CSS中的重要屬性，如布局屬性margin, padding，位置屬性position，顯示屬性display——這些想必都是老生常談。了解HTML5帶來的特性如animation等。
2. 深入理解JavaScript的語言特性，如JS的類和對象，閉包，prototype等。因為腳本語言的模塊化較差，維護成本高，故良好的設計和統一的規範更顯重要性。
3. 面對瀏覽器兼容性，能夠有能力找到瀏覽器的共性和不同，擅長用健壯的解決方案解決兼容性問題，通過定量分析（如瀏覽器的使用份額）做出產品功能性、實現優雅性和項目進度的抉擇。
4. 理解並掌握至少一門JavaScript library，新手不妨直接選擇jQuery，簡單而主流，熟練掌握library的dom selection, event handling，用jQuery的AJAX介面實現前後端通信。有餘力的話，可以研習下引領潮流的Node.js。
5. 從頭到腳的完成一個獨立域名的網站或網頁，同樣支持pc和mobile（有自己的app當然更好），有條件的話，了解CDN的工作。
6. 深入理解client side latency的成因，能夠分析出造成網站性能問題的瓶頸，擅長用行業通用方案（減少http數量，壓縮下載文件的大小，lazy load，pre-cache）來解決延遲問題。能夠使用數據即量化考量機制來監控網站的性能。
7. 擅長藉助Google和社區解決實際問題，盡量不要一次次的刷網頁重試，在前端的世界裡，嚴謹同樣比猜測更重要。
8. 緊追形勢，培養對新設備，前端新型技術的熱情。當看到一個發展方向的市場價值時可以投入課餘時間，勇於做第一個吃螃蟹的人。
周三繼續更新，暫時挖個坑。
感覺是最近幫推校招的原因，這個話題居然推送到時間軸上來了，個人水平有限，歡迎同行溝通討論。
PS：建議提問者把標題中的本科生改成大學生或者學生，文憑只是敲門磚之一，沒必要過分看重或者看輕。?
相比較一代前端們，本人從業時間並不算太久，只是從學生時代一路自學而來，混得碼齡不短，有幸待過幾家還不錯的團隊和公司，收穫了一些稍微可以簡單嘮嘮經驗。
目前團隊有坑位（北京／杭州），歡迎私信簡歷。
－－－－－－
草草掃了一眼其他答案，被贊同的多是在堆資源鏈接，或Roadmap的帖子，說到Roadmap之前easy寫職業規劃書的時候，幫大叔搞過一份，翻翻在何處，可以適當都貼一下，不過感覺意義不大，每個人適合的方式和角度不同，用傳統的範式填鴨，或許適得其反。
先針對問題中的問題進行回答再聊聊個人看法吧。
－－－－－－
1. 問題中提到 「前端開發知識複雜且富有變化，大學又不教授相關的課程。」
任何技術深入的玩下去都是這樣，並不僅限於前端，所以如果在折騰的路上遇到了什麼狀況，請堅定信念繼續前行，不要抱著「xx方向難，來玩前端會容易一些」的想法選了前端，然後再抱著「前端好麻煩，xx方向好像簡單」的心態來回跳轉，想清楚你想幹什麼，要什麼再開始行動，會更好一些，不過既然能夠提出這個問題，我相信這位童鞋應該不屬於這個範疇。
據我所知，部分大學是開設或者開設過web開發相關的課程的，如果你運氣好，學校有老師引著你前行，且學且珍惜，如果運氣不好，那麼自己努力就好了 ^ ^。
2.問題中提到「 如果你現在在本科階段，你會如何更有效合理的制定計划去學習前端開發？讓自己基礎紮實，又充滿熱情。」
這其實算是一個蠻高的要求，很多時候，有規劃比沒規劃已經好非常多了，更何況這個規劃還要效果撥群，能夠帶來技術積累的同時，讓身心愉悅。
先打一劑預防針，在學習的過程中，你一定會遇到非常多困難和問題，不過與之對應的是解決問題之後的成就感和個人能感受的到的成長，以及越來越多的朋友和戰友。
時間規劃是針對有能夠遵守多數規則按部就班，能夠合理動態調整優先順序，有一定時間觀念的童鞋的，如果你沒有，那麼請趁早培養，如果你已經有一定的良好行為習慣基礎，善用合理的工具能夠提升你的效率，諸如：更合適的提醒工具，筆記工具，GTD，開發工具等，這個需要單獨拿出來聊。
前端學習規劃，暫且按下不表，後面集中聊（樹立正確的目標，然後定製自己的路線圖，不要盲從）。
3. 問題中提到「另外，有什麼規勸和建議對現在有意於前端開發領域的本科生說的？」
建議把標題中的本科生改成大學生或者學生，文憑只是敲門磚之一而已，不要過分看重或者看清；
真對有意學習，而不是堅定入行的童鞋說幾句。
前端的泡沫從前幾年興起到這一兩年迅速被排出，不同層級的童鞋分化越來越大，已經不適合抱著「混日子」或者「找份簡單的技術工作」的童鞋了，如果你確定對web開發領域有興趣，喜歡折騰可視化，交互體驗，想打造出有價值的產品給許多人用，看好未來web的發展，前端的大門會一直為你敞開，你會收穫很多。
－－－－－－－
那麼，回過頭來，先聊聊初衷和目標吧。
如果確定要投身一個行業，初衷和目標很重要，確定你的動機和目的，可以在一定程度上避免你在有限的時間裡做了多餘的事情，從而身心疲憊，錯失一些好的結果。（興趣愛好請和工作一定程度分離）
投身前端，或者說投身程序員大軍的初衷可以是很有情懷的"想做能看的到的產品服務上億人"，也可以是"寫一段代碼，每天費幾億人的手機電量"小小邪惡一下，也可以是"為了成為代碼大師"的純潔情愫，亦或者"創造更多的商業營收價值"。
當然當然，你只是為了好找工作，也OK的，不過有可能會經過歲月洗禮而被一波又一波的新人浪花早早拍死在沙灘上，不想當將軍的士兵不是好廚子！
接下來說一下目標，為何要把初衷和目標分開說呢，因為目標一定是要可執行的，舉例：進入某公司，做成某產品，掌握何種技能，薪酬達到多少（傳說中的面向工資編程，黑人微笑）
有了初衷和目標，不能保證你自學成功，但是至少可以讓你可以在自學的路上，少走彎路，用有限的體力走的更遠一些。
－－－－－－－
想要在職業上前行的阻力稍微少一些，內功和外功都需要具備一些（是不是莫名的和各家公司要求匹配呢）：
- 硬素質：編碼能力，領域技能，技術視野，工程技能
- 軟素質：工作能力，工作心態，職業素養
// 好像有點多，選1，2點聊聊
先說編碼能力，除了了解某類語言語法／數據結構／基礎演算法之外，多寫多想是不外法門。
但是不能傻寫，不需要重複大量寫已實現內容，單個技能點掌握之後，將實現進行歸納抽象，並且記得找找看有沒有現成工具可以替代，或者更好實現可以復用。
在掌握基礎之後，不需要死磕spec，或者基礎在已有的領地上築起高牆，應及時走出小圈子，開始學以致用，可以參考文末虛擬的例子。
領域技能，雖然前端技能是通用的，但是不同細分領域的能力略有不同，比如：針對零售批發的淘系電商，針對企業或者開發者的管理平台，針對餐飲、機票等行業的細分平台，面向前端行業的前端領域工具。。。
－－－－－－－
為了方便成文，舉一個可以執行的例子，先虛擬一個初衷和目標："用自己微不足道的能力改變雲計算產品現在無力吐槽的體驗"、"進入某阿，某雲的某體驗技術部，改變現在無力吐槽的產品體驗"（適齡童鞋歡迎直接私信簡歷，不用看後面的了，職業規劃玩笑勿當真）
好了，這些都明確了，可以為具體的學習規劃來進行準備了：
－ 初步了解或者打聽這群Geek佬在做什麼產品，面對用戶群體是誰，做出來的東西是真賺錢還是忽悠情懷（這去一家公司的基本誠意，同時了解你的職業在該公司和該細分行業的屬性，判斷你喜歡不喜歡）
－ 初步了解一下這些產品中使用的前端技術，提前準備和學習一些，既可以學以致用，又不會錯學一些落後低效的事情走彎路。（2017年還從prototype，jq，mootools搞過來？還在用zepto，jqui堆頁面？或者還在折騰腳手架，發布工具，調試環境？
－ 初步了解一下該公司前端／其他崗位的團隊分布、軟硬實力，招聘時間
有了前置信息，可以將目標勾勒更清晰：
"熟悉weex、rn／ng、react後去試試去某雲某體驗技術部，可以做做跨端產品／核心控制台玩，招聘時間窗口是每年x月～x月，可以直接找內部誰誰來內部推薦。"
到了這一步，你未來可能使用的技術棧也清楚了，剩餘可用時間也明確了，按照上面提到的時間規劃的方法或者工具做一個時間表，踏實的去學習實踐，時間點之前開始積極溝通聯繫相關團隊或者公司招聘人員，結果應該不差的。
（如果哪位的團隊願意授權讓我黑下，我可以換個團隊例子，233）
A.看書吧，推薦給你：
CSS類：
《精通CSS：高級Web標準解決方案（第2版）》
HTML類：
我看的是移動端的手機開發，其實他們的基礎都差不多，只是開發手機的時候，需要注意的點多點而已。
《HTML5移動應用開發入門經典》 （基礎入門不錯）
《HTML5移動Web開發實戰》 （哈哈，我覺得較坑）
《JavaScript面向對象編程指南》 （可以看看，也值得一看，但我覺得這書貴了點，裡面的東西一般般）
JAVASCRIPT類：
初級：
《javascript高級程序設計》 （俗稱 高程3）
《javascript權威指南》（俗稱 犀牛書）
《編寫可維護的JavaScript》 （讓你知道編輯風格的，需要看看）
《JavaScript語言精粹》 （入門很好）
中級：
《JavaScript啟示錄》（當來入門來看，可是入門者會覺得沒意思，當你想深入js後再看，深入理解javascript）
高級：
《基於MVC的JavaScript Web富應用開發》
《JavaScript設計模式》
《JavaScript框架設計》
其它JS類：
《Node js開發指南》
《深入淺出node.js》
《node.js實戰》
《深入淺出CoffeeScript》
（1）看作者 一定要看作者的經歷
（2）看出版社 因為看書 你會喜歡一種出版社的風格 哈哈
（3）看圖書目錄 一定要仔細看，目錄都無法吸引你的書，還是別看了吧！
1. 了解前端基礎知識，可以上 w3school 在線教程 上將html, css, js三部分的內容認真地，完整地看一遍。
2. 學習了基礎知識之後，動手實踐，學校里一般都會有網站社團之類的，會承接一些校內、校外的網站製作，加入進去，從簡單的網頁做起。要點是哪裡不會就查哪裡（這裡就是為什麼要先完整地了解基礎知識，不然你都不知道要查什麼東西），向學長請教，或者百度，google。
3. 有了一定的經驗以後，可以到圖書館找一些進階的書籍看了。js方面推薦一定要看《javascript高級程序設計》，《javascript權威指南》可以當工具書查。
這樣就差不多入門了。讓我娛樂地盜張圖
詳解：
在完整APP的遷移之後，終於可以好好寫這些內容了。第一篇就是對之前的《前端技能圖譜》進行一些細緻的解釋。當然這些是個人的經驗，所以可存在一些區別，不過總的來說還是差不多的。
入門
在我理解下的基礎知識，就是我們可以寫一些基本的樣式，並能對頁面的元素進行操作。舉例來說，就是我們用Spring和JSP寫了一個博客，然後我們可以用jQuery來對頁面進行一些簡單的操作，並可以調用一些API。因此，我們需要基本的HTML / CSS知識。只是要寫好CSS並不是一件簡單的事，這需要很多實戰經驗。隨後，我們還需要有JavaScript的經驗，要不怎麼做前端呢？
同時，我們還需要對DOM有一些基礎的了解，才能做一些基本的操作，如修改顏色等等。在這種情況下，最簡單的方案就是使用jQuery這樣的工具。不過，如果可以自己操作DOM是再好不過的了。
中級篇
中級篇就更有意思了，現在我們就需要對頁面進行更複雜的操作。Ajax和JSON這兩個技能是必須的，當我們要動態的改變頁面的元素時，我們就需要從遠程獲取最新的數據結果。並且我們也需要提交表單到伺服器，RESTful就是必須要學會的技能。未來我們還需要Fetch API，ReactiveX這些技能。
除此我們還需要掌握好HTML的語義化，像DIV / CSS這也會必須會的技能，我們應該還會使用模板引擎和SCSS / SASS。而這個層面來說，我們開始使用Node.js來完成前端的構建等等的一系列動作，這時候必須學會使用命令行這類工具。並且，在這時候我們已經開始構建單頁面應用了。
高級篇
JavaScript是一門易上手的語言，也充滿了相當多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來編寫更好的前端代碼，現在人們有了ES6、TypeScript和WebPack來做這些事。儘管現在瀏覽器支持不完善，但是他們是未來。同樣的還有某些CSS3的特性，其對於某些瀏覽器來說也是不支持的。而這些都是基於語言本來說的，要寫好代碼，我們還需要掌握面向對象編程、函數式編程、MVC / MVVM / MV*這些概念。作為一合格的工程師，我們還需要把握好安全性（如跨域），做好 授權（如HTTP Basic、JWT等等）。
工程化
這個標題好像是放錯了，這部分的內容主要都是自動構建的內容。首先，我們需要有基本的構建工具，無論你是使用gulp、grunt，還是只使用npm，這都不重要。重要的是，你可以自動化的完成構建的工具，編譯、靜態代碼分析（JSLint、CSS Lint、TSLint）、對代碼質量進行分析（如Code Climate，可以幫你檢測出代碼中的Bad Smell）、運行代碼中的測試，並生成測試覆蓋率的報告等等。這一切都需要你有一個自動構建的工作流。
兼容性
雖然我們離兼容IE6的時代已越來越遠了，但是我們仍然有相當多的兼容性工作要做。基本的兼容性測試就是跨瀏覽器的測試，即Chrome，IE，Firefox，Safari等等。除此還有在不同的操作系統上對同一瀏覽器的測試，某些情況下可能表現不一致。如不同操作系統的字體大小，可能會導致一些細微的問題。
而隨著移動設備的流行，我們還需要考慮下不同Android版本下的瀏覽器內核的表現不致，有時候還要一下不成器的Windows Phone。除此，還有同一個瀏覽器的不同版本問題，常見於IE。。
前端特定
除了正常的編碼之外，前端還有一些比較有意思的東西，如CSS3和JavaScript動畫。使用Web字體，可惜這個不太適合漢字使用。還有Icon字體，畢竟這種字體是矢量的。不過Icon字體還有一些問題，如瀏覽器對其的抗鋸齒優化，還有一個痛是你得準備四種不同類型的字體文件。因此，產生了一種東西SVG Sprite，在以前這就是CSS Sprite，只是CSS Sprite不能縮放。最後，我們還需要掌握一些基本的圖形和圖表框架的使用。
軟體工程
這一點上和大部分語言的項目一樣，我們需要使用版本管理軟體，如git、svn，又或者是一些內部的工具。總之你肯定要有一個，而不是 2016.07.31.zip這種文件。然後，你還需要一些依賴管理工具，對於那些使用Webpack、Browserify來將代碼編寫成前端代碼的項目來說，npm還是挺好用的。不過就個人來說，對於傳統的項目來說我總覺得bower有些難用。我們還需要模塊化我們的源碼文件，才能使其他人更容易開始項目。
調試
作為一個工程師來說，調試是必備的技能。大部分瀏覽器都自帶有調試工具，他們都不錯——如果你使用過的話。在調試的過程中，直接用Console就可以輸出值、計算值等等。如果你的項目在構建的過程中有一些問題，你就需要debugger這一行代碼了。
在一些調用遠程API的項目里，我們還需要一些更複雜的工具，即抓包工具。在調試移動設備時，像Wireshark、Charles這一類的工具，就可以讓我們看到是否有一些異常的請求。當然在這個時候，還有一個不錯的工具就是像Chrome自帶的遠程設備調試。對於移動網站來說，還要有Responsive視圖。
測試
我遇到的很多前端工程師都是不寫測試的，於是我便把它單獨地抽了出現。對於一個前端項目來說，正常情況下，我們要有單元測試、功能測試，還有要一些UI測試來驗證頁面間是否可以跳轉。對於依賴於第三方服務的應用來說，還要有一個Mock的服務來方便我們測試。如果是前後端分離的項目，我們還需要有集成測試。
性能與優化
要對Web應用進行性能優化，可能不是一件容易的事，有時候我們還知道哪些地方可以優化。這時候人們就可以使用Yahoo的YSlow，或者我最喜歡的Google PageSpeed來檢測頁面的一些問題，如有沒有開啟GZip、有沒有壓縮、合併、Minify JS代碼等等。
我們還應該藉助於NetWork這一類的工具，查看頁面載入時，一些比較漫的資源文件，並對其進行優化。在一些情況下，我們還需要藉助如Chrome的Timline、Profiel等工具來查看可以優化的地方。
設計
前端工程師還需要具備基本的UI技能。多數情況下拿到的只是一張圖，如果是一個完整的頁面，我們就需要快速分割頁面布局。而依賴於不同的頁面布局，如響應式、網格、FlexBox布局也會有不同的設計。而有些時候，我們就需要自己規劃，製作一個基本的線框圖（Wireframe）等等。
SEO
如果以搜索引擎作為流量來源，我們還需要考慮頁面的內容，除非你用的是競爭排名。像Sitemap可能就不是我們考慮的內容，而我們還要考慮很多點。首先，我們需要保證頁面的內容是對於搜索引擎是可見的，並且對應的頁面還要有基本的Title、Description和Keyword。然後在一些關鍵的字體，如欄目標題等等可以用H2之類的大字的地方就不要放過。同時在頁面設計的過程中，我們還需要考慮一些內部鏈接的建設。
它即可以提供頁面的可見度，又可以提高排名。最後，如果你是面向的是Google等支持結構化數據的搜索引擎，你還需要考慮一下MicroData / MicroFormat這一類東西。
原創地址：GitHub - phodal/awesome-growth: Growth APP" Project, Links, Blogs, Books, Resources
學習前端自學的話，你必須需要很強自制力，有成功自學過的經驗，遇到問題沒人幫你解決，你只能查找資料。也沒有實戰項目給你做，也沒有老師給你安排作業。雖然網上有這方面相關的資料。光看視頻教程是學不會前端的，想深入學習沒有一個好的老師你自學只會懂得前端的一些基礎知識，而且不精通，現在社會上好多做前端開發工程師的，但又有多少幾個優秀的web前端開發工程師呢？相信你們也知道國內也不多這方面的人才，為什麼沒有多少優秀的前端工程師呢？因為他們沒有通過系統學習，但是只會表面的知識，沒有去深入學習，有點成就就滿足了。所以大部分人都不願意去深入學習了，安於現狀。實戰很重要 慢慢積累多讀書 w3school 確實很好 我也才剛剛開始學習前端 同樣有很多不明白 不過慢慢起步 現在感覺還不錯 點擊鏈接加入群【網頁製作學習群】：https://jq.qq.com/?_wv=1027k=49ZhqMS
我記得我一開始學習編程的時候 想要做一個前端網站 (學校作業) 我硬是不會 其實真的非常簡單 我只是想要做一個簡單地網站 左邊有一個menu 列表 可以供選擇 右邊可以顯示內容 當時前端一點都不會 學校也沒有交就開始讓我們自己去探索去做 後來才發現真的是 學習編程最好的方法就是自學加實踐，我和一群大牛組建了一個web前端資源學習群：前面一部分是611，中間一部分是428，後面一部分是142，想學習的就來，不是來學習的或搗亂的就不加了，沒興趣浪費時間在你身上， 我後來還是沒有做出來 記得很清楚還去百度問別人應該怎麼做 結果大神們說了好多 我還是一點都不明白 原因就是因為當初自己一點前端都不懂 根本CSS Javascript HTML 都沒有怎麼學 只想著快一點把東西做出來 而忽略了重點不是做出來東西 是在做的過程中學會東西
所以基礎很重要 一定要打好 現在的自己也是 同樣是菜鳥一個 但是也在慢慢成長慢慢學習 因為大神也是菜鳥過來的 唯一可以做的就是自己多學多做 當然 同時感謝那些願意為你耐心解答你可能在大神看來很愚蠢的問題 也同時不要不耐煩別人問題簡單地問題 同時 如果可以 自己多Baidu 或者Google
感覺編程是一條寂寞的路 只能自己走下去 所以要學會自己找到自己的答案 解決自己的問題 PS：雖然我現在也是不太適應 而且老是在遇到問題就跑去問我同是程序員的男朋友的時候 被他投來深深地鄙視的眼神 然後說 同學 你要思考呀 要懂得Google呀
所有的學習方法都是相通或相似的！此處我給前端新手們一些意見，經供參考 
一、打好紮實的計算機科學知識基礎
如果是軟體工程、計算機或相關專業的學生，請先學好自己本專業的基礎課程。不管是用什麼方法，因為這些計算機基礎要麼助力你的職業發展，要麼將成為日後技術的累贅。如果你是非相關專業的，更是要從不同的渠道涉獵和深究計算機科學的知識。
二、理論與實踐結合
Learning by doing 是工程學科最好的學習方法。但是很多人會把重點放在後者，其實不然，learning才是核心，doing只是一個手段。learning的載體則是書，特別是系統知識的書籍。看書講究一個方法，不管是小說，散文還是技術書籍，都有不同的閱讀方法和技巧，對於不同的人或許還有不一樣。就我個人而言，在新入一個技術領域會先大致的瀏覽該領域最權威評價最高的百科類書籍，從目錄入手，從全局了解整個知識體系，然後再根據實際需求和興趣按章節學習。
前端這個領域知識細節更是豐富，更需要有個整體了解。首先是三大塊Javascript+CSS+HTML，對應的書籍可以是《javascript高級程序設計》+《精通CSS：高級Web標準解決方案（第2版）》+W3CSCHOOL HTML教程。這些書不僅可以讓你總覽全局，完全可以輔助你到中後期的發展（所以說前期買好基礎裝備很重要啊，賣出去多不划算2333）。除了這些書各位還可以參考其他回答中列舉的書，以及相關的規範文檔（這個能記下來很屌還能裝逼用）
書有了才需要Do，怎麼做？從小實驗到小項目到中型項目。一步步來不用著急。小實驗是輔助自己對書的理解，讓自己印象更深刻，而且可以比對容易混淆的概念。小項目可以是類似TODOMVC（github上可以搜到）這樣的項目，結合了JS,HTML,CSS三者，綜合開發會使自己更明白三者在前端當中的意義。中型項目最好是自己有個想法，然後便開干吧。
此外，在過程中，也要積極使用網路，上面會有很多可以解決自己問題的答案，但是切記我們需要的不是答案，而是思路。
三、廣度與深度交叉
這一點在上面也有簡單的闡述。廣度優先深度隨後，然後從深處跳出來在縱覽全局，依次交替進行，這樣會得到螺旋上升的提高。
四、向優秀者學習
社區很重要，對於剛入門的你，雖然靜下心學習很重要，但是加入到社區交流中會讓你更有動力。在社區中知道或結識很多牛人大神：國內有哪些前端開發牛人？ - JavaScript，一方面知道自己需要努力的路還有多遠，另一方面在活躍的社區中更讓自己充滿能量。不僅是國內，還要關注國外的牛人們。如果我一下子給你列出來你都關注完了也沒啥意思，所以請靠自己！
五、關注界內時訊
關注界內的消息可以讓自己了解最新的技術、工程方法，從而避免自己閉門造車，修正自己的學習軌跡。不過也要避免盲目跟隨大眾潮流，要選擇合適自己和自己項目的技術。這裡大家可以使用Feedly去關注一些前端博客、微博和源，每天都看一看。最好國內外都要涉獵。
戒驕戒躁。共勉。
算不上什麼前端大神，說一下我的建議僅供參考
第一步，先看一本前端入門的書＋《Javascript權威指南》：前端入門的書隨便哪本都行，主要是了解一下前端HTML + CSS + Javascript大致是怎麼回事，有個概念，腦海中留個大致輪廓就好，非要推薦的話，可以看看《HTML5權威指南》，Apress的書都還不錯。入門之後，啃一下《Javascript權威指南》這本JS中的聖經，傳說中的犀牛書。成為一個優秀的前端工程師的充要條件是什麼我不知道，但我覺得至少完完整整的啃過一次犀牛書肯定是一個必要條件。這一步完成就算入門了吧。
第二步，練習實踐打代碼：如果有課程大作業的話，可以好好做做不要划水。要是沒有的話，可以在Website Templates上找幾個模版，自己實現一下它的樣式和動效，練一下手。之後可以嘗試著去接一些外包做做，或者在老師的實驗室、學校的組織社團里做一些這方面的前端coding的工作。總得來說，就是要練手。說實在的，前端很多的工作搬磚性質挺強的，所以無它，唯手熟爾。個人建議，第二步可以在犀牛書看到12章左右的時候，就開始了。這一步走了大半年能算上道了吧。
第三步，在實踐的過程中學習各類流行的庫、框架和工具：打代碼的過程中，總會接觸到一些庫啊，框架啊，工具啊等等，有的是因為突然感覺效率不高，然後自己找了一些用，有的是因為某個項目或者工作里要求使用某些庫和框架。在這種時候，建議不要通過書或者視頻來學習這些庫和框架，而是通過他們的官方文檔來進行學習。原因有三點，首先，因為前端的發展很快，緊跟腳步還是滿重要的，書和視頻這種東西都有滯後性，等好的書和視頻都出來了，說不定就已經流行大半年了。其次，就是其實書和視頻中所講的所有內容，其實基本上都能從這些庫和框架中的官方文檔中找到，所以學會通過文檔來學習才是真正一勞永逸的正確姿勢。最後，看文檔其實是一個使用工具的過程，無論什麼語言、框架和庫，記住所有細節顯然是不太現實的，學會如何快速的利用文檔回憶或者查找相關的技術點也是作為一個優秀工程師必備的技能。第三步可以和第二步同時進行。另外建議庫和框架有的可以會用就行，不必深究，但是有些優秀的、流行的還是可以好好學一下，深挖一下，比如jQuery，Angular，React，Bootstrap，Pure，Ionic，Framework7等等。這幾個都能用得熟練的話，算得上合格了吧。
第四步，學習研究一些優秀庫和框架的源碼、實現與思想：庫和框架說到底都是工具，用多了，作為一個有追求的、好奇的工程師，總歸會想研究一下這個工具的源碼、實現和其設計思想，在這個過程中，你可以閱讀上世界上最優秀的前端程序員寫的代碼和使用的設計思想，對你自己的姿勢水平提升會有很大的幫助。之前在阿里面試的時候，二面的leader建議我如果想看源碼的話，可以看看雅虎的YUI，是一個非常學院派的庫。當然看看jQuery肯定也沒問題，挺好的。但是不建議一下子就看Angular，React這種這麼大而全的框架，可以深究一下整體的設計思想和部分部件的源碼吧。這一步搞了大半年的話，算得上一個優秀的前端工程師了。
第五步，嘗試加入一些開源庫和框架的工作：研究多了，總會感覺某些框架或者某些庫有些小瑕疵，想自己試試。或者之前自己經常寫的一些樣式和功能想抽象出來，弄出一個通用的組件和庫什麼的。這個過程，俗稱造輪子。可能不一定造出的輪子比現有的好，但是在這個過程中，你會漲很多姿勢水平，而且造著造著，誰不定就能造出一個大家都喜愛用的輪子。達到這一步，我覺得你能算得上一個大牛級別的前端工程師了。
第六步，加入頂級庫、框架的核心開發組或者研究、開發語言本身：這一步完全不了解，可以作為一個目標，個人感覺到了這一步，可以算的上前端中的大神了。例如之前在新浪，現在在鏈家的鳥哥，是PHP的核心開發組成員，這種級別，足以稱得上大神。
其他：
1. 構建工具推薦使用grunt＋npm＋bower
2. 編輯器推薦使用sublime，IDE推薦使用webstorm
3. 個人勉強算得上是第三步吧，正在邁向第四步，所以第四步開始，你可以認為是我的YY～
從個人經驗來看。至少在前端領域，追求系統是很低效的。
只需要知道大概路徑。做一個非常粗糙的東西，然後不斷的完善知識點即可。
路徑是這樣的：
切圖-&> 一個頁面 -&> 一個小項目 -&> 找個工作
不斷的重構甚至是重寫代碼。東西勉勉強強交出去，或者勉勉強強的完成。有條件去看看別人的代碼，不斷修改自己的代碼。如果發現更好的寫法，就回來完善原來的代碼。遇到問題查w3school，去網上搜索。
總之就是，不斷的寫，不斷的完善。有點對美的追求。
在這個過程中，會接觸各種各樣的框架，各種各樣的庫。寫一段時間代碼，對技術的品味會逐步提高，明白什麼是過眼雲煙的誘惑，什麼是應該追求的本源。
最近寫了一篇關於前端一些常見輕便耐用的UI框架的小總結，很多小夥伴私信問我，要怎麼學習前端，沒有明確的方向，為了感謝大家的關注點贊打賞和喜歡，決定把前端的學習進階之路稍微整理一下，也為了自己能在工作之中思路更加的清晰。姑娘水平能力火候不夠尚在學習中，如有不足，歡迎批評指正補充。
初級階段
阿里矢量圖標庫：http://www.iconfont.cn/
ps使用教程：http://www.16xx8.com/
JavaScript教程：http://www.runoob.com/js/js-tutorial.html
css教程：http://www.runoob.com/css/css-tutorial.html
css3教程：http://www.runoob.com/css3/css3-tutorial.html
HTML教程：http://www.runoob.com/html/html-tutorial.html
HTML5教程：http://www.runoob.com/html/html5-intro.html
jQuery 教程：http://www.w3school.com.cn/jquery/index.asp
Ajax教程：http://www.runoob.com/ajax/ajax-intro.html
HTTP1教程：http://www.runoob.com/http/http-methods.html
HTTP 2教程:http://www.runoob.com/http/http-tutorial.html
jQuery EasyUI教程：http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html
W3C標準教程：http://www.w3school.com.cn/
HTML5Web 存儲：http://www.runoob.com/html/html5-webstorage.html
JSON教程：http://www.runoob.com/json/json-tutorial.html
canvas教程：http://www.runoob.com/html/html5-canvas.html
CSS 預處理語言：http://less.bootcss.com/
Css類庫Sass工具教程：http://www.w3cplus.com/blog/tags/302.html
眾所周知css並不能算是一們真正意義上的「編程」語言，它本身無法未完成像其它編程語言一樣的嵌套、繼承、設置變數等工作。為了解決css的不足，開發者們想到了編寫一種對css進行預處理的「中間語言」，可以實現一些「編程」語言才有的功能，然後自動編譯成css供瀏覽識別，這樣既一定程度上彌補了css的不足，也無需一種新的語言來代替css以供瀏覽器識別。於是css預處理語言SASS就應運而生了。
進階階段
互聯網的快速發展和激烈競爭，用戶體驗成為一個重要的關注點，導致專業前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工程師更是稀缺，學完以上的基礎，做完項目，差不多就可以了嗎？答案是No，想要成為一個更加優秀的工程師，進階階段攻略必不可少。
快速開發框架和基礎庫
Express簡介：http://www.runoob.com/nodejs/nodejs-express-framework.html
MVC簡介：http://www.runoob.com/design-pattern/mvc-pattern.html
jQuery ：http://www.jq22.com/jq1-jq4
Zepto教程：http://www.runoob.com/w3cnote/zepto-js-source-analysis.html
Swiper 教程：http://www.swiper.com.cn/
iScroll教程： http://wiki.jikexueyuan.com/project/iscroll-5/
Sea.js 手冊與文檔：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html
MooTool 中文手冊：http://www.chinamootools.com/
模塊化
ES6 Module整理：https://segmentfault.com/a/1190000007499196
CommonJS中文網：http://www.php.cn/js-tutorial-360130.html
webpack 教程：http://www.runoob.com/w3cnote/webpack-tutorial.html
browserify 教程：http://www.gulpjs.com.cn/docs/recipes/browserify-with-globs/
JS模塊化工具requirejs教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html
ECMAScript 語法 : http://www.w3school.com.cn/js/pro_js_syntax.asp
Gulp構建化工具官網:https://gulpjs.com/
SuperSlide.js教程： http://www.superslide2.com/
zoom.js教程：http://lab.hakim.se/zoom-js/
Node.js教程:http://www.runoob.com/nodejs/nodejs-tutorial.html
UI框架：這裡就不一一介紹了，參考上一篇文章：《前端最全的框架總結》
WeUI：http://www.runoob.com/w3cnote/weui-for-weixin-web.html
Highcharts 圖表教程：http://www.runoob.com/highcharts/highcharts-tutorial.html
ionic 教程：http://www.runoob.com/ionic/ionic-tutorial.html
Framework教程 ： http://www.w3cplus.com/resource/tags/187.html
NPM 使用介紹:http://www.runoob.com/nodejs/nodejs-npm.html
Framework即架構，它是一個語言開發軟體，提供了軟體開發的框架，使開發更具工程性、簡便性和穩定性。NET
Framework通過COM
Interop（COM互操作）技術支持COM+和MTS。一個傳統的COM應用程序能夠調用一個.NET組件，同時.NET組件（在.NET中稱為.NET
Assembly）也能夠調用一個COM組件。這一非常強大的雙向互操作特性使你可以在應用程序中混合使用兩類技術。
高級階段
在前端這個行業摸爬滾打久了，自然學到的東西會越來越多，在大多數人眼裡，互聯網前端開發是一個有著高薪水、高職業榮譽感的行業。沒錯，隨著互聯網大環境的快速崛起，HTML5的發展，絕對屬於既有「錢景」還有前景的的朝陽行業。高收入、前景光明，即使對前端開發的要求越來越高，也還是有許多新人願意來一試身手，紛紛打破頭往這個行業裡面涌。從小白到前端大神的華麗轉身就在此咯
PHP教程：http://www.runoob.com/php/php-tutorial.html
Ruby教程：http://www.runoob.com/ruby/ruby-tutorial.html
MySQL教程：http://www.runoob.com/mysql/mysql-tutorial.html
Redis 教程:http://www.runoob.com/redis/redis-tutorial.htm
MongoDB 教程：http://www.runoob.com/mongodb/mongodb-tutorial.html
Hybrid混合式開發： http://www.infoq.com/cn/articles/hybrid-app-development-combat/
Linux教程:http://www.runoob.com/linux/linux-tutorial.html
Vue.js 入門教程：http://www.runoob.com/w3cnote/vue-js-quickstart.html
AngularJS教程：http://www.runoob.com/angularjs/angularjs-tutorial.html
React.js 教程：http://www.runoob.com/react/react-tutorial.html
Require.js 教程： http://requirejs.org/
BackBone中文文檔：http://www.css88.com/doc/backbone/
Knockout.js 教程：http://www.aizhengli.com/knockoutjs/knockoutjs.html
Ember.js教程：https://emberjs.com/
ECMAScript6:http://blog.csdn.net/daily886/article/details/53765658
微信小程序開發資源匯：http://www.runoob.com/w3cnote/wx-xcx-repo.html
移動端教程：http://www.runoob.com/w3cschool-app
完整線路圖：http://blog.csdn.net/u011047006/article/details/52597178
polymer中文網：https://polymer-zh.cn/
Deft.js官網：http://deftjs.org/
http://ASP.NET MVC教程：http://www.runoob.com/aspnet/mvc-intro.html
拓展技能
前端的技術多到學不完，所以，對於開發中常用的，一定要多看多練，做到對某一項精通，其餘的都是換湯不換藥，再輔助性道德進行學習，可以不斷拓展自己的知識面，下面是一些拓展技能，雖不涉及技術，但一定可以提高自身的競爭力。花瓣，必應，千圖本是設計師的網站，作為前端工程師，有時也會充當UI的角色
SEO優化:http://www.searcheo.cn/post/seo.html
站長之家：http://www.chinaz.com/
Python基礎教程：http://www.runoob.com/python/python-tutorial.html
必應網：https://cn.bing.com/
花瓣網：https://huaban.com/
千圖網：http://www.58pic.com/
開發工具
Web市場上有很多Web前端開發工具，有的是開源的，可以免費的使用它們用來教學或調試程序，有的使用方便，有的擁有強大的功能等，每一種都有不同的優勢。我們可以從中學習適合自己是工具。Web前端開發工具種類很多，所以極大地滿足了不同需求的開發人員的不同需求等等。這些平台很有趣，交互性強，特別適用於初學者。
Markdown菜鳥教程網：http://blog.csdn.net/simplebam/article/category/6685809
Eclipse 教程：http://www.runoob.com/eclipse/eclipse-tutorial.html
ps使用教程：http://www.16xx8.com/
HBuilder 使用教程:http://www.runoob.com/w3cnote/hbuilder-intro.html
WebStorm使用教程：https://www.jetbrains.com/webstorm/
Dreamweaver：http://www.qinxue.com/220.html?sysref=dreamweaver
Github 簡明教程：http://www.runoob.com/w3cnote/git-guide.html
SVN 教程：http://www.runoob.com/svn/svn-tutorial.html
Google使用全攻略：https://www.w3cschool.cn/googlesyqgl/
nodepad++：
輕量化，軟體下載下來只有6MB，解壓後不過10MB左右，其中還包括了語言文件幫助文件等。綠色開源，Notepad++是一款符合GPL協議的開源軟體，同樣可以在官方下載ZIP包解壓即用。和很多文本編輯器一樣，提供了代碼補全，代碼高亮功能，但其中有的需依賴插件的擴展。
Fireworks：
是Adobe推出的一款網頁作圖軟體，軟體可以加速 Web 設計與開發， 是一款創建與優化 Web 圖像和快速構建網站與 Web 界面原型的理想工具。Fireworks 不僅具備編輯矢量圖形與點陣圖圖像的靈活性， 還提供了一個預先構建資源的公用庫，
Sublime：
Sublime
Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text
的主要功能包括：拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。Sublime Text
是一個跨平台的編輯器，同時支持Windows、Linux、Mac OS X等操作系統。
編譯工具：
Grunt 教程：http://www.w3cplus.com/blog/tags/372.html
Gulp 基於流的自動化構建工具 ：http://www.gulpjs.com.cn/
Brunch 構建工具：http://hao.jobbole.com/brunch/
Yeoman構建工具：http://www.jianshu.com/p/9f3e6bcdb274
webpack：http://www.runoob.com/w3cnote/webpack-tutorial.html
babel編譯工具：http://www.ruanyifeng.com/blog/2016/01/babel.html
Git版本管理：http://www.uml.org.cn/pzgl/201204285.asp
前端工具庫：http://www.qdfuns.com/tools.php
另外，還有很多工作中使用的工具，在下一篇文章《前端工程師必備工具》有完整的介紹，敬請期待。未完待續。。
前端書籍和網站推薦：
在閑暇之時，怎麼能少了書籍來打發時光，因此，再來一波滿滿的乾貨，我們的大前端，作為一門知識，怎麼能少實實在在的書籍？
一百本優質前端書籍百度雲盤鏈接：http://pan.baidu.com/s/1b88n6Y
一些不錯的編程學習網站：http://www.runoob.com/w3cnote/code-website-recommend.html
前端開發面試題
當以上這些知識都學完之後，那就開啟你的求職之路吧，求職之時，要經過筆試，機試，面試三大流程，最重要的就是筆試了，如何在筆試之中嶄露頭角，那就是把網上所有的面試題都背誦一遍，分分鐘秒殺一批人，順利入職就不難了。
http://www.360doc.com/content/16/0702/17/13518188_572450563.shtml
技能匯總：前端技能匯總：http://www.runoob.com/w3cnote/frontend-knowledge-structure.html
項目中必備
30組常用前端開發組件庫：http://www.luoxiao123.cn/1196.html
在我看來，組件化其實就是把各種常用的功能封裝好，便於下次調用。例如對話框，.文件上傳
，富文本編輯器，日曆，樹形菜單，表格分頁，表單驗證等等，當然了，也可以根據項目需求，自己寫組件進行封裝，以便循環利用。
前端大神的GitHub上的項目：http://www.qdfuns.com/notes/14464/27e8f350150aeb6534f83dbdbb590d33.html
總結完這篇文章，突然覺得前端的路太漫長，要學習的東西非常的多，希望自己早日成為一個大神
前端開發神器：http://tools.udn.yyuap.com/
註：本文作者祈澈姑娘，轉載請聲明
我認為一名合格的web前端工程師必須得掌握HTML、CSS和JavaScript。只懂其中一個或兩個還不行，你必須對這三門語言都很熟悉。也不是說必須對這三門語言都非常精通，但你至少要能夠運用它們完成大多數任務，而無需地頻繁地尋求別人的幫助。如果你想從零基礎開始學習，可以關注我
web前端工程師是設計加開發的綜合體，web前端工程師是在開發人員中最直接面向產品，面向用戶的設計人員，一個開發團隊的成果是要靠web前端工程師去展現，因為用戶不會去關心後台的處理有多麼強大 ；在設計人員中web前端工程師是直接面向開發人員的設計人員，向開發人員以一種計算機語言的方式傳遞其設計理念，web前端工程師在整個團隊中是很關鍵的。
Web前端工程師要掌握的基礎知識和技能包括：
1 、網頁的基本結構（HTML + CSS）
HTML 是一種標記語言，而不是編程語言，最基本是標籤是和，CSS是用來定義如何顯示HTML元素的。對 HTML+CSS很容易入門，但很多人不夠深入，舉幾個例子： 標籤是作什麼用的？margin-left與left有什麼區別，應該在什麼情況下使用？再出個DIV+CSS布局問題：一個寬度不確定的DIV裡面放三個水平對齊的DIV，左右兩個DIV寬度固定為150px，中間那個DIV充滿剩餘的寬度。如果這些問題你目前還不知道，對那個布局問題幾分鐘內不能解決，說明你對HTML+CSS還不夠深入。
2、 瀏覽器是怎麼展現網頁的
不同內核的瀏覽器對網頁的渲染是不一樣的，目前瀏覽器都有客戶端調試工具，下圖展現一個google首頁在IE9下的載入細節：
在做web性能優化時，對瀏覽器渲染及細節要進一步了解。說個比較有用的知識點：目前瀏覽器並行載入的上限是6，老版本的瀏覽器會有所不同。
3 、網頁的生命周期
不同的web框架下，頁面的生命周期會有所不同，大體還是一樣：客戶端發送GET請求，伺服器返回相應頁面，客戶端完成操作及數據，然後POST給伺服器。一定要對數據的傳遞(前台與後台,頁面之間)的細節瞭然於心。
4、DHTML DOM BOM Javascript AJAX
這是Web前端開發的重中之中，大多數時候我們都在和他們打交道。說幾個注意點：javascript是單線程編程，所謂的javascript非同步編程只不過是計劃在未來的某個時間上執行相應事件而已；詳細了解DOM事件機制；客戶端存儲（HTML5中增加了localStorage和 sessionStorage）；javascript不像伺服器端語言那樣嚴謹，調試不是很方便，所以一開始要養成嚴謹的javascript編輯習慣；javascript很強大很靈活，不要幻想短時間內熟練（更別說精通）它，並寫些框架、類庫，初始階段還是先用熟練已成熟的框架（比如 jquery）當入門；一定要熟練使用客戶端調試工具。
5 、伺服器端語言開發經驗，PS切圖技術
Web前端開發介於設計與開發中間，所以兩端的東西都得懂點。編輯語言是相通的，之前編寫過伺服器語言，對學習javascript是十分有益的，從圖片轉成靜態HTML頁面，少不了PS切圖技術。
6 、瀏覽器的兼容性
由於歷史原因 ，瀏覽器的兼容性一直都折磨web前端工程師的地方，雖然有W3組織，並制定了一些規範，雖然瀏覽器產商都正在努力改進並接近其規範，但現實網路環境中各種內核、各種版本的瀏覽器都有一席之地。解決瀏覽器兼容性靠經驗積累。
8 、快速學習能力和主動學習意願
web前端的發展很快，從事這一行業一定要有快速學習能力和主動學習意願，這樣才能適應web產品的要求。在web前端領域沒有絕對的是與非,解決一個問題的方法有很多，但我們要找到一個更合適的方法，找到一個更合適的方法需要經驗作積累，總之web前端入門容易，想熟練很難，需要更多的主動學習意願。
9 、良好的溝通能力
優秀的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關，比如項目經理、設計師、最終用戶、開發工程師，前端工程師位於這幾類人的交匯點上，這些角色的要求你都得照顧好，平衡這四類人的需求，拿出一個比較合適的方案。由此可見溝通能力對前端工程師要求更高。
優秀的web前端工程師應該具備快速學習能力。推動Web發展的技術並不是靜止不動的。如果沒有快速學習能力，你就跟不上Web發展的步伐。你必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化，既然踏上了web前端開發之路，那就堅強地走下去吧！如果你想從零基礎開始學習web前端開發，可以關注我。
羅列知識起不到太大作用，很多人都是只收藏而不看。如何形成前端知識體系。我感覺解答這個問題需要一定深度的思考，以及一定長度的篇幅。
這個問題難就難在，它不是孤立的一個問題。它與「如何高效學習」、「如何學好英語」這些問題的答案有一些交集，屬於通用學習方式。
知識體系的形成與完善，不是一朝一夕能達到的，需要一定時間的積累。那麼，時間達到了就一定完善了嗎？為什麼有的人工作兩三年了，知識體系依舊停留在初級水平呢？所以思路應該聚焦在how。
所以我打算從「道」和「術」兩個層次來分析。
「道」可以解釋為「認知」或者是「意識」，放在前端技術領域，我們應該具備的意識包括不限於：
1. 知識敏感
2. 徹底理解
3. 宏觀視野（知識關聯能力）
4. 動手動手動手
「道」這個東西，只可意會，難以解釋的很清。就拿知識敏感來說，有的人平時遇到問題，網上一搜代碼解決了事，從未思考是由於什麼深層的原因造成，他的知識只停留在「經驗」層面。有的人卻能從問題中挖掘到相關的知識點，並串聯到其他相關的知識點上。
意識這個東西，很感性，說千遍萬遍也無法使一個人「被動」擁有。以上是我總結的，你且細細理解並自我審查，自己是否具備以上個人意識。
「術」則是具體可實施的方法，我總結一些自己使用過的，供大家參考：
1.豐富知識來源
要完善知識體系，首先得有多方知識來源，不同的來源可以相互補充。
（1）微博/微信公眾號上關注行內大牛，以及各技術社區/平台的官方號。如果你關注的夠全，基本上其他渠道的資訊和技術文章都會匯聚過來。
（2）如果你對某塊知識缺少基本的了解，則需要看書來打好基礎。比如你會切圖，學js就要先看JavaScript權威指南。你想從頭學nodejs，最好也先找本教程系統學習。
（3）至少專註沉浸於一個社區，比如掘金、SegmentFault都是不錯的（我早年在博客園，現在活躍度不行了）。社區能給你的除了知識，還有伴隨著交流的思考和實踐。或者至少加個技術交流QQ群。
2. 享受孤獨，閉關修鍊
停止隨意收藏文章，光收不練假把式。你需要定一個明確計劃，花費大片的業餘時間，去攻克某塊知識。張鑫旭大神在畢業後閉關半年時間鑽研前端，司徒正美寫框架的時候每天早晨7點就開工，前端早讀課的情封每天早晨6點準時發文。
準備好迎接一段孤獨乃至痛苦的經歷，這是你吸收固化知識的必經之路。
3. 輸出倒逼輸入
這是我常說的一個方法，也是我自己感受最深的。寫博客、寫公眾號、發小密圈，或者是在論壇給人解答問題。一方面表達一個知識點能對你的理解進行審閱，另一方面則帶給你很大的驅動力。
所以建議找到合適自己的陣地，然後在上面開始輸出。一開始會枯燥，能堅持一年就看到成效了。
4. 尋找歷史
了解一些技術體系的發展歷史，對你的整體把握是有幫助的，尤其是前端新人，在新技術的不斷出現之下知識面會非常割裂。儘管你不能像我們這些「老人」一樣再去經歷一次，但也是可以找一些相關文章來尋找歷史的。
去專門搜索關鍵字，比如「前端模塊化開發的發展歷程」、「前端打包技術的發展歷程」、「js非同步編程的發展歷程」，「MVC、MVP、MVVM的前世今生」、「前後端分離的各種方案」，發動腦筋去尋找關鍵詞，你總能搜到那些介紹技術歷史的文章。
5. 主動串聯知識
你可能有這樣的經歷，在解決某一個問題的時候，突然又看到了其他相關的知識。比如在頁面上用iframe嵌入一個子頁面，為避免出現滾動條，你動態調整iframe的高度。當iframe里的頁面跨域的時候，你發現沒辦法訪問內部的文檔，必須得通過頁面通信來處理。這時候就涉及「跨域的頁面間通信」這個知識點了。然後又一個閃念，能不能通過css把滾動條給隱藏了呢？這就是自定義滾動條相關的知識了。
抓住一閃而過的念頭，抽絲剝繭，順藤摸瓜，而不是解決完問題就算完了。這樣能讓你將知識串聯，形成體系。
6. 反覆閱讀
記憶是需要強化的，有時候看過的一些理論知識，由於工作中長時間不用，也就模糊了。對此的解決辦法就是，平時只要是在知識源看到不錯的文章，都細細看一遍，不管是新知識還是舊知識，以達到強化的目的。
7. 知識歸類練習
前端知識體系的內容，網上一搜就好多，我這裡不再重複羅列。如果你看到密密麻麻的一團沒有頭緒，可以進行這樣一個練習：拿一張白紙，開始羅列自己能想到的知識體系內容。分類的維度自己把握，比如：瀏覽器、js、css、開發框架、開發技巧、構建、測試、部署。
自己寫一遍，跟看別人寫好的，是有很大差別的。不信你試試，看自己寫的就是清晰，看別人的就是亂。
以上是我的一些個人思考總結，肯定是比較片面的，因為這個問題仁者見仁。為了得到更加完善的答案，我在安姐的小密圈發起提問：「 技術人在逐步完善知識體系的過程中，有哪些切實可行的高效手段呢？ 」
而安姐給的答案也是相當簡潔：
- 需要什麼學什麼。
- 突然對什麼特別有熱情，就真的動手去學。
做到這兩條，就差不多了。
針對本科生放送幾個福利：
1.GitHub Student Developer Pack
包含眾多在線服務平台的優惠計劃，最有用的包括：
- 兩年的Github的Personal plan，可以創建無限的私有repo
- 50美刀的DigitalOcean優惠券，選5刀一月的plan的話可以用近一年
- 此外還有AWS的優惠，namecheap的免費域名和ssl證書等
2.https://www.jetbrains.com/student/
只要你提供學生證明
包含大名鼎鼎的IntelliJ IDEA，WebStorm在內的所有jetbrains公司的ide免費用！
3.Microsoft DreamSpark
免費為學生提供包含Visual Studio和SQL Server/Windows Server在內的軟體等。
4.Apple 教育優惠
買Mac或iPad免費送beats耳機，有時候也會打折襖，最多的時候便宜700多。
=====================================
相信有了這些利器，你一定能更好地學習前端開發。
更多前端學習的詳細內容：前端學習路徑 - 余博倫的文章 - 知乎專欄
http://fe.congm.in - Web前端導航
不斷完善中..
何許這會對前端學習和工作有所幫助
首先，做前端的話，你的眼光要看遠。現在技術更新很快，如果你還在用什麼幻燈片，燈箱效果，那你真不是做前端的料。只能說你是應付人員，或者說就是只會就應用別人寫的效果代碼而已。
其次，要提升自己的價值。不要學會div+css,就不想學其它的技術了，要時時苛刻想到自己的危險處境，像懂div+css的人太多了，網上教程3天學會div+css，10天精通的資料一天堆，我也是從那時代過來的。多去學點更多能提現你自身價值的東西，比如除div+css之外，可以學習一些後台語言php，java之類的。
最後，分享，就是自己的價值要表現出來。中國沒有jquery，沒有smarty,這麼好用的東西，中國缺的並不是能力，是分享。以為寫一個小小的東西就以為自己了不起，把自己的東西隱藏起來，其實這個我們的現狀，很不好。
第一、UI+色彩，籠統點說就是體驗+美感，這個有點不好表述清楚，如果你有美術天賦或者美術基礎，這部分就上手快了，如果沒有，就需要關注下UI+色彩，先從用戶角度去感受互動網頁、APP之類的應用，她們為什麼美，你用起來為什麼爽，她們為什麼丑，用起來為什麼不爽，培養自己的體驗+美感，如果你不能形成或者說培養出有辨識、獨立的美感（僅針對前端），那麼請放棄前端這個工作吧，即使你對HMTL、CSS、JS、FW/PS/AI融匯貫通，那也只能做一個苦逼的前端碼農（原諒我的用詞）...
第二、掌握HMTL、CSS、JS（以記事本熟練手寫代碼為出師依據），學會熟練使用基本的圖像處理軟體（FW/PS/AI），掌握圖像基本知識（解析度，DPI，點陣圖，矢量，Web支持格式及差異化處理）
第三、模仿兩三個知名PC、Mobile站前端，獨立完成前端UI效果和交互應用（這個就是發現問題、找資料解決問題的過程）鞏固和加強第二部分的知識，學習並使用前端開發中的各種調試工具。這個時候你會發現JQ（學習並掌握它），你還會發現Bootstrap等第三方前端框架，請先無視N多的前端框架，他不是你的進階目標，了解下就行。
第四、適當的了解下後端開發編程語言和面向對象的思維以及MVC模式，這個時候可以找小項目和後端工程師配合實習了，如果能跟前端老鳥一同做項目那是最好，這個階段，不能浮躁，發現哪些基礎知識不足，趕緊自己惡補吧...
經歷3-5個以上的前端項目歷練，完成上面的四個過程（1-3年），你就入門了，歡迎你加入前端工程師的大家庭，剩下的就看你自己了！
如果真的選擇這個職業，來自一個前端老鳥，帶出過幾個的優秀前端，在這裡與你共勉之，戒驕戒躁！首先把本科生去掉，然後再去學習HTML(5)+CSS(3),重中之重JS，可以了解一些後端語言，對於你面試有很好的幫助，學習什麼東西無關你的學歷，感興趣就行。
推薦閱讀：
※想要從零學起前端技術，有哪些靠譜的培訓學校？
※如何學習色彩？
※很多海報上加上一堆字母感覺很高級，可是那些字母都是什麼意思呢？
※公司或個人如何應對客戶看效果圖的要求？以免作品被抄襲或模仿。
※24 歲女生轉行做 Web 前端晚嗎？