我！是要成為前端大神的男人！

結合個人經歷總結的前端入門方法，總結從零基礎到具備前端基本技能的道路、學習方法、資料。由於能力有限，不能保證面面俱到，只是作為入門參考，面向初學者，讓初學者少走彎路。

互聯網的快速發展和激烈競爭，用戶體驗成為一個重要的關注點，導致專業前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工程師更是稀缺。個人感覺前端入門相對容易，但是也需要系統地認真學習，在打好基礎後堅持學習，成為優秀前端工程師也只是時間問題。

學習任何知識最重要的都是興趣，如果經過一段時間的學習感覺不喜歡，那可能強迫自己學習是很痛苦的，效果也不會好，畢竟這很可能就是以後很多年生存的技能。不過隨著互聯網行業的發展，前端必然是Web開發人員需要學習的知識，有時候是沒有專業前端工程師一起合作的，所以即使不做專門的前端工程師，掌握基本的前端技能為工作帶來方便。

後期邀請了一些同學分享學習經歷。如果有同學願意分享,歡迎push

必備基礎技能

前端技能匯總（https://github.com/JacksonTian/fks）這個項目詳細記錄 了前端工程師牽涉到的各方面知識。在具備基本技能之後可以在裡面找到學習 的方向，完善技能和知識面。

frontend-dev-bookmarks（https://github.com/dypsilon/frontend-dev-bookmarks）是老外總結的前端開發資源。覆蓋面非常廣。包括各種知識點、工具、技術，非常全面。

以下是個人覺得入門階段應該熟練掌握的基礎技能：

HTML4，HTML5語法、標籤、語義

CSS2.1，CSS3規範，與HTML結合實現各種布局、效果

Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作，HTML5新增功能

一個成熟的客戶端javascript庫，推薦jquery

一門伺服器端語言：如果有伺服器端開發經驗，使用已經會的語言即可，如果沒有伺服器端開發經驗，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實現簡單登陸註冊功能就足夠支持前端開發了，後續可能需要繼續學習，最基本要求是實現簡單的功能模擬，

HTTP

在掌握以上基礎技能之後，工作中遇到需要的技術也能快速學習。

基本開發工具

恰當的工具能有效提高學習效率，將重點放在知識本身，在出現問題時能快速定位並 解決問題，以下是個人覺得必備的前端開發工具：

文本編輯器：推薦Sublime Text，支持各種插件、主題、設置，使用方便

瀏覽器：推薦Google Chrome，更新快，對前端各種標準提供了非常好的支持

調試工具：推薦Chrome自帶的Chrome develop tools，可以輕鬆查看DOM結構、樣式，通過控制台輸出調試信息，調試javascript，查看網路等

輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對比尺寸，以及前面的到的Chrome develop tools，

FQ工具：lantern, 壁虎漫步

學習方法和學習目標

方法：

入門階段反覆閱讀經典書籍的中文版，書籍中的每一個例子都動手實現並在瀏覽器中查看效果

在具備一定基礎之後可以上網搜各種教程、demo，了解各種功能的實際用法和常見功能的實現方法

閱讀HTML，CSS，Javascript標準全面完善知識點

閱讀前端牛人的博客、文章提升對知識的理解

善用搜索引擎

目標：

熟記前面知識點部分的重要概念，結合學習經歷得到自己的理解

熟悉常見功能的實現方法，如常見CSS布局，Tab控制項等。

我們會與你詳細的免費分享前端當下的行業狀況，學習路線、就業路線和對Java未來的一些規劃讓自己盡量享受最高的待遇。

入門之路

以下是入門階段不錯的書籍和資料

HTML先看《HTML & CSS: Design and Build Websites》1-9章，然後《HTML5: The Missing Manual》1-4章。

CSS先看《CSS: The Missing Manual》，然後《CSS權威指南》

javascript先看《javascript高級程序設計》，然後《javascript權威指南》

HTTP看HTTP權威指南

在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合，實際工作中也是這樣，一個簡單的功能模塊都需要三者結合才能實現。

動手是學習的重要組成部分，書籍重點講解知識點，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡單教程，照著教程實現功能。以下是一些比較好的教程網址

可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題（帶參考答案）

MDN也有很多教程，更重要的是裡面有詳細的文檔，需要查找某個功能時在Google搜索：xxx site:https://developer.mozilla.org

http://www5rocks.com/zh/也有很多優質教程

http://alistapart.com/

原生javascript是需要重點掌握的技能，在掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大，這方面的書籍有《Learning jQuery》或者去jQuery官網

建一個https://github.com/賬號，保存平時學習中的各種代碼和項目。

有了一定基礎之後可以搭建一個個人博客，記錄學習過程中遇到的問題和解決方法，方便自己查閱也為其他人提供了幫助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/這樣的網站註冊賬號，方便實用

經常實用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：重要技能

喜歡小編文章的歡迎關注，歡迎評論，歡迎轉發，小編會繼續努力的！！！！

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！