結合個人經歷總結的前端入門方法，總結從零基礎到具備前端基本技能的道路、學習方法、資料。由於能力有限，不能保證面面俱到，只是作為入門參考，面向初學者，讓初學者少走彎路。 互聯網的快速發展和激烈競爭，用戶體驗成為一個重要的關註點，導致專業前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也 ...
結合個人經歷總結的前端入門方法，總結從零基礎到具備前端基本技能的道路、學習方法、資料。由於能力有限，不能保證面面俱到，只是作為入門參考，面向初學者，讓初學者少走彎路。
互聯網的快速發展和激烈競爭，用戶體驗成為一個重要的關註點，導致專業前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工程師更是稀缺。個人感覺前端入門相對容易，但是也需要系統地認真學習，在打好基礎後堅持學習，成為優秀前端工程師也只是時間問題。
學習任何知識最重要的都是興趣，如果經過一段時間的學習感覺不喜歡，那可能強迫自己學習是很痛苦的，效果也不會好，畢竟這很可能就是以後很多年生存的技能。
不過隨著互聯網行業的發展，前端必然是Web開發人員需要學習的知識，有時候是沒有專業前端工程師一起合作的，所以即使不做專門的前端工程師，掌握基本的前端技能為工作帶來方便。
必備基礎技能
以下是個人覺得入門階段應該熟練掌握的基礎技能：
HTML4，HTML5語法、標簽、語義。
CSS2.1，CSS3規範，與HTML結合實現各種佈局、效果。
Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作，HTML5新增功能。
一個成熟的客戶端javascript庫，推薦jquery。
一門伺服器端語言：如果有伺服器端開發經驗，使用已經會的語言即可，如果沒有伺服器端開發經驗，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實現簡單登陸註冊功能就足夠支持前端開發了，後續可能需要繼續學習，最基本要求是實現簡單的功能模擬。
在掌握以上基礎技能之後，工作中遇到需要的技術也能快速學習。
基本開發工具
恰當的工具能有效提高學習效率，將重點放在知識本身，在出現問題時能快速定位並 解決問題，以下是個人覺得必備的前端開發工具：
文本編輯器：推薦Sublime Text，支持各種插件、主題、設置，使用方便
瀏覽器：推薦Google Chrome，更新快，對前端各種標準提供了非常好的支持
調試工具：推薦Chrome自帶的Chrome develop tools，可以輕鬆查看DOM結構、樣式，通過控制台輸出調試信息，調試javascript，查看網路等
輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對比尺寸，以及前面的到的Chrome develop tools，
FQ工具：lantern, 壁虎漫步
小編也在前端混了有幾年，整理了一些學習資料，對web開發技術感興趣的同學，歡迎加入新建的Q群：603985993，不管你是小白還是大牛我都歡迎，希望大家誠心交流！還有大牛整理的一套高效率學習路線和教程與您免費分享，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!
學習方法和學習目標
方法：
入門階段反覆閱讀經典書籍的中文版，書籍中的每一個例子都動手實現併在瀏覽器中查看效果。
在具備一定基礎之後可以上網搜各種教程、demo，瞭解各種功能的實際用法和常見功能的實現方法。
閱讀HTML，CSS，Javascript標準全面完善知識點。
閱讀前端牛人的博客、文章提升對知識的理解。
善用搜索引擎。
目標：
熟記前面知識點部分的重要概念，結合學習經歷得到自己的理解。
熟悉常見功能的實現方法，如常見CSS佈局，Tab控制項等。。
入門之路
在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合，實際工作中也是這樣，一個簡單的功能模塊都需要三者結合才能實現。
動手是學習的重要組成部分，書籍重點講解知識點，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡單教程，照著教程實現功能。以下是一些比較好的教程網址
可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題（帶參考答案）。
原生javascript是需要重點掌握的技能，在掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大，這方面的書籍有《Learning jQuery》或者去jQuery官網。
建一個https://github.com/賬號，保存平時學習中的各種代碼和項目。
有了一定基礎之後可以搭建一個個人博客，記錄學習過程中遇到的問題和解決方法，方便自己查閱也為其他人提供了幫助。
經常實用Google搜索英文資料應該經常找到來自http://stackoverflow.com/的高質量答案，與到問題可以直接在這裡搜索，如果有精力，註冊一個賬號為別人解答問題也能極大提高個人能力。
經典書籍熟讀之後，可以打開前面必備基礎技能部分的鏈接。認真讀對應標準，全面掌握知識。
繼續提高
有了前面的基礎之後，前端基本算是入門了，這時候可能每個人心中都有了一些學習方向，如果還是沒有。可以參考前面必備技能部分提到的那兩個項目，從裡面選一些進行發展學習。以下是一些不錯的方面：
Grunt：前端自動化工具，提高工作效率
less css：優秀的CSS預處理器
bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美
requirejs：AMD規範的模塊載入器，前端模塊化趨勢的必備工具
Node.js：JavaScript也可以做後臺，前端工程師地位更上一步
AngularJS：做Single Page Application的好工具
移動端web開發：智能手機的普及讓移動端的流量正在逐步趕超PC端
Javascript記憶體管理：SPA長期運行需要註意記憶體泄露的問題
High Performance JavaScript(Build Faster Web Application Interfaces)
Best Practices for Speeding Up Your Web Site：重要技能
語言基礎
JavaScript：
作用域鏈、閉包、運行時上下文、this
原型鏈、繼承
NodeJS基礎和常用API
CSS：
選擇器
瀏覽器相容性及常見的hack處理
CSS佈局的方式和原理（盒子模型、BFC、IFC等等）
CSS 3，如animation、gradient、等等
HTML：
語義化標簽
其他
有些東西不是考敲碼就能弄好的，我參與實習的時候感受到了很多，這些是我遇到的也是我感覺自己做的不好的地方
對於業務的思考：我個人這方面非常欠缺，所以放在最前面，在敲碼前要多思考業務
交流和溝通能力：這個非常重要，前端同時需要與項目經理、產品、交互、後臺打交道，溝通不善會導致很多無用功，延緩項目。
知識管理、時間管理：input和output的平衡，output是最好的input。如何做好分享，參與社區，做好交流，作好記錄。
對新技術的渴望，以及敢於嘗試。
入門書
入門可以通過啃書，但書本上的東西很多都已經過時了，在啃書的同時，也要持續關註技術的新動態。這裡推幾本我覺著不錯的書：
《JavaScript高級編程》：可以作為入門書籍，但同時也是高級書籍，可以快速吸收基礎，等到提升再回來重新看
《JavaScript權威指南》：不太適合入門，但是必備，不理解的地方就去查閱一下，很有幫助
《編寫可維護的JavaScript》和：
《Node.js開髮指南》：不錯的Nodejs入門書籍
《深入淺出Node.js》：Nodejs進階書籍，必備
《JavaScript非同步編程》：理解JS非同步的編程理念
《JavaScript模式》和《JavaScript設計模式》：JavaScript的代碼模式和設計模式，將開發思維轉變到JavaScript，非常好的書
《JavaScript框架設計》：在用輪子同時，應當知道輪子是怎麼轉起來的，講解很詳細，從源碼級別講解框架的各個部分的實現，配合一個現有框架閱讀，可以學到很多東西
《Dont make me think》：網頁設計的理念，瞭解用戶行為，非常不錯
《CSS禪意花園》：經久不衰的一部著作，同樣傳遞了網頁設計中的理念以及設計中需要註意的問題
《高性能JavaScript》和《高性能HTML5》：強調性能的書，其中不只是性能優化，還有很多原理層面的東西值得學習
《HTML5 Canvas核心技術》：我正在讀的一本書，對於canvas的使用，動畫的實現，以及動畫框架的開發都非常有幫助
《HTTP權威指南》：HTTP協議相關必備，前端開發調試的時候也會經常涉及到其中的知識
《響應式Web設計》：技術本身不難，重要的是響應式網頁的設計理念，以及移動先行的思想
《JavaScript語言精粹》：老道的書，也是普及JavaScript的開發思維的一本好書，非常適合入門
一些不錯的網站
github：沒啥好說的，多閱讀別人的源碼，多上傳自己的源碼，向世界各地的大牛學習
codepen：感受前端之美的必選之地，裡面有很多酷炫的效果和優秀的插件
echojs：快速瞭解js新資訊的網站
stackoverflow和segmentfault：基本上各種問題都能在上面獲得解答
google web fundamentals：每篇文章都適合仔細閱讀
static files：開放的CDN，很好用
iconfont：阿裡的矢量圖標庫，非常不錯，支持CDN而且支持項目
html5 rocks: 一個不錯的網站，很多瀏覽器的新特性以及前沿的技術，都能在這上面找到文章
css tricks：如何活用CSS，以及瞭解CSS新特性，這裡可以滿足你
JavaScript 秘密花園 JavaScript初學必看，非常不錯
w3cplus：一個前端學習的網站，裡面的文章質量都挺不錯的
node school：一個不錯的node學習網站
learn git branch：一個git學習網站，交互很棒
前端亂燉：一個前端文章分享的社區，有很多優秀文章
正則表達式：一個正則表達式入門教程，非常值得一看
各路大牛的博客：這個太多了，就不貼了，知乎上有很全的
各種規範的官方網站，不懂得時候讀規範
前端的定位
前端的定位關乎到你需要吸收什麼樣的知識和技能，決定在技術世界里你對什麼需要格外敏感。如果你認為前端僅僅停留在切頁面，實現交互和視覺的要求，那你對前端的認識還停留在初級階段。
阿裡終面的時候我問了考官這麼個問題：前端技術日新月異，範圍越擴越寬，標準越來越豐富，似乎任何一個觸角都能伸出很遠。怎麼給前端一個合適的定位？考官給我分析了半天，然後總結成一句話，就是用戶和網站的聯結者，用戶體驗的創造者（原話不是這樣，但大體是這個意思）。
也就是說前端的終極目標其實就是創造用戶體驗，提升用戶體驗，以用戶體驗為中心。不管你是從交互設計上下手，還是從性能優化出發，或者改進工作流提升工作流效率，最終都是為了創造和提升用戶體驗，最終都要體現到用戶體驗這一點上來。我認為這個總結非常有道理（當然“用戶體驗”這個詞太寬泛了，並且不僅僅是前端工程師的範疇，比如開發後臺的時候對一個數據處理過程進行優化，提升了整體性能，這也是對用戶體驗的一個提升）。
現在的前端工程師做到一定階段不可避免會接觸到很多比切頁面、實現視覺要求、實現交互等更深入的問題，比如前端自動化、圖像編程、性能優化等等，再往後推一點就是PHP/JSP/ASP/nodeJs，過去後端模板一般屬於後端的範疇，現在隨著前端架構的演進，可能會讓你去寫後端模板的代碼，需要用到後端語言（PHP/Java/C#等），這就是所謂大前端（然而這與前端的定位並不是相背離的，大前端處理的依然是與用戶接觸的部分，仍然是對用戶體驗的優化）。
可能最常見或者被談論最多的就是node，其實這幾種技術選型都可以，bat三家據說百度用PHP比較多，阿裡用node比較多。
以上是我對前端以及衍生出來的技術路線的一些淺薄理解，學習一個領域掌握它的整體上的走向和趨勢還是挺重要的。
