結(jié)合個人經(jīng)歷總結(jié)的前端入門方法,總結(jié)從零基礎(chǔ)到具備前端基本技能的道路、學(xué)習(xí)方法、資料。由于能力有限,不能保證面面俱到,只是作為入門參考,面向初學(xué)者,讓初學(xué)者少走彎路。
互聯(lián)網(wǎng)的快速發(fā)展和激烈競爭,用戶體驗成為一個重要的關(guān)注點,導(dǎo)致專業(yè)前端工程師成為熱門職業(yè),各大公司對前端工程師的需求量都很大,要求也越來越高,優(yōu)秀的前端工程師更是稀缺。個人感覺前端入門相對容易,但是也需要系統(tǒng)地認(rèn)真學(xué)習(xí),在打好基礎(chǔ)后堅持學(xué)習(xí),成為優(yōu)秀前端工程師也只是時間問題。
學(xué)習(xí)任何知識最重要的都是興趣,如果經(jīng)過一段時間的學(xué)習(xí)感覺不喜歡,那可能強迫自己學(xué)習(xí)是很痛苦的,效果也不會好,畢竟這很可能就是以后很多年生存的技能。不過隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展,前端必然是Web開發(fā)人員需要學(xué)習(xí)的知識,有時候是沒有專業(yè)前端工程師一起合作的,所以即使不做專門的前端工程師,掌握基本的前端技能為工作帶來方便。
后期邀請了一些同學(xué)分享學(xué)習(xí)經(jīng)歷。如果有同學(xué)愿意分享,歡迎push

必備基礎(chǔ)技能
前端技能匯總(https://github.com/JacksonTian/fks)這個項目詳細(xì)記錄了前端工程師牽涉到的各方面知識。在具備基本技能之后可以在里面找到學(xué)習(xí)的方向,完善技能和知識面。
frontend-dev-bookmarks(https://github.com/dypsilon/frontend-dev-bookmarks)是老外總結(jié)的前端開發(fā)資源。覆蓋面非常廣。包括各種知識點、工具、技術(shù),非常全面。
以下是個人覺得入門階段應(yīng)該熟練掌握的基礎(chǔ)技能:
HTML4,HTML5語法、標(biāo)簽、語義
CSS2.1,CSS3規(guī)范,與HTML結(jié)合實現(xiàn)各種布局、效果
Ecma-262定義的javascript的語言核心,原生客戶端javascript,DOM操作,HTML5新增功能
一個成熟的客戶端javascript庫,推薦jquery
一門服務(wù)器端語言:如果有服務(wù)器端開發(fā)經(jīng)驗,使用已經(jīng)會的語言即可,如果沒有服務(wù)器端開發(fā)經(jīng)驗,熟悉Java可以選擇Servlet,不熟悉的可以選PHP,能實現(xiàn)簡單登陸注冊功能就足夠支持前端開發(fā)了,后續(xù)可能需要繼續(xù)學(xué)習(xí),最基本要求是實現(xiàn)簡單的功能模擬,
HTTP
在掌握以上基礎(chǔ)技能之后,工作中遇到需要的技術(shù)也能快速學(xué)習(xí)。
基本開發(fā)工具
恰當(dāng)?shù)墓ぞ吣苡行岣邔W(xué)習(xí)效率,將重點放在知識本身,在出現(xiàn)問題時能快速定位并解決問題,以下是個人覺得必備的前端開發(fā)工具:
文本編輯器:推薦Sublime Text,支持各種插件、主題、設(shè)置,使用方便
瀏覽器:推薦Google Chrome,更新快,對前端各種標(biāo)準(zhǔn)提供了非常好的支持
調(diào)試工具:推薦Chrome自帶的Chrome develop tools,可以輕松查看DOM結(jié)構(gòu)、樣式,通過控制臺輸出調(diào)試信息,調(diào)試javascript,查看網(wǎng)絡(luò)等
輔助工具:PhotoShop編輯圖片、取色,fireworks量尺寸,AlloyDesigner對比尺寸,以及前面的到的Chrome develop tools,
翻墻工具:lantern, 壁虎漫步
學(xué)習(xí)方法和學(xué)習(xí)目標(biāo)
方法:
入門階段反復(fù)閱讀經(jīng)典書籍的中文版,書籍中的每一個例子都動手實現(xiàn)并在瀏覽器中查看效果
在具備一定基礎(chǔ)之后可以上網(wǎng)搜各種教程、demo,了解各種功能的實際用法和常見功能的實現(xiàn)方法
閱讀HTML,CSS,Javascript標(biāo)準(zhǔn)全面完善知識點
閱讀前端牛人的博客、文章提升對知識的理解
善用搜索引擎
目標(biāo):
熟記前面知識點部分的重要概念,結(jié)合學(xué)習(xí)經(jīng)歷得到自己的理解
熟悉常見功能的實現(xiàn)方法,如常見CSS布局,Tab控件等。
入門之路
以下是入門階段不錯的書籍和資料
HTML先看《HTML & CSS: Design and Build Websites》1-9章,然后《HTML5: The Missing Manual》1-4章。
CSS先看《CSS: The Missing Manual》,然后《CSS權(quán)威指南》
javascript先看《javascript高級程序設(shè)計》,然后《javascript權(quán)威指南》
HTTP看HTTP權(quán)威指南
在整個學(xué)習(xí)過程中HTML CSS JavaScript會有很多地方需要互相結(jié)合,實際工作中也是這樣,一個簡單的功能模塊都需要三者結(jié)合才能實現(xiàn)。
動手是學(xué)習(xí)的重要組成部分,書籍重點講解知識點,例子可能不是很充足,這就需要利用搜索引擎尋找一些簡單教程,照著教程實現(xiàn)功能。以下是一些比較好的教程網(wǎng)址