WEB前端開發初學者必看的學習路線（附思惟導圖）【轉載】

WEB前端開發初學者必看的學習路線（附思惟導圖）

 

不少同窗想學習WEB前端開發，雖然互聯網有不少的教程、網站、書籍，但是卻又不知從何開始如何選取。看完網友高等遊民白烏鴉無私分享的原標題爲《寫給同事的前端學習路線》這篇文章，相信你會有所收穫。

 

前端開發入門學習有：HTML、CSS、JavaScript（簡稱JS）這三個部分。因此在學習以前咱們須要先明確三個概念：

1. HTML——內容層，它的做用是表示一個HTML標籤在頁面裏是個什麼角色。
2. CSS——樣式層，它的做用是表示一塊內容以什麼樣的樣式（字體、大小、顏色、寬高等）顯示。
3. JS——行爲層，它的做用是當用戶觸發某些行爲時，會給內容和樣式帶來什麼樣的改變。

 

 

1、HTML，CSS部分

---

HTML/CSS初學，就照着http://www.w3cschool.cn/的實驗作，把http://www.w3cschool.cn/index-6.html和http://www.w3cschool.cn/index-7.html兩套作完了就入門了，

入門以後，學習CSS的精華，即佈局，推薦李炎恢的教學視頻，佈局這一章：http://edu.51cto.com/lesson/id-14895.html第27章，若是以爲不夠，須要實戰，則再學習接下來的28，29章。注意，這時候必定要老師講一塊代碼，本身就要照着實現一次，切勿只看不作。

CSS還有一個精華部分就是命名規範，找幾個著名網站（好比豆瓣、網易新聞）這類，研究它們的命名規範，我這裏，有一個現成的命名規範可供學習（須要登陸evernote查看）：https://www.evernote.com/shard/s168/sh/7f89cc57-cab2-4712-b61b-9fde25e3ef51/d01c8e34ef05373ec06c3b2f7cfaba82/res/e0b9963b-ba7a-441a-8462-8f87c48e4cda.jpg?resizeSmall&width=832

學習完成後就是一個較爲熟練的HTML/CSS使用者了.這時候若是想繼續深刻學習相關類庫和框架，推薦Sass和Compass，推薦兩篇阮一峯的博客：http://www.ruanyifeng.com/blog/2012/06/sass.htmlhttp://www.ruanyifeng.com/blog/2012/11/compass.html

 

和這本書：《Sass and Compass in Action》http://book.douban.com/subject/6732187/

 

2、JavaScript部分

---

初學者推薦看視頻：http://edu.51cto.com/course/course_id-166-page-1.html，特別注意JavaScript的OOP寫法（重點，可多看幾遍），以及閉包、原型鏈，異步編程部分（次重點），前者寫項目都在用，後者涉及JS這個語言本質特色。

而後須要學習JS和HTML/CSS在瀏覽器下的調試方法，推薦用Google Chrome下的chrome developer tools調試，能夠看這個視頻學習：http://happycasts.net/episodes/40

 

 

看完視頻並通過實踐後，能夠看《Javascript good parts》（http://book.douban.com/subject/2994925/）這本書，沒必要細看，看它的思想便可。用於鞏固，提高JS方面的編程思想。

 

3、web前端學習路線思惟導圖

---

web前端學習路線思惟導圖

圖太大很差展現，看不清楚能夠進入如下連接查看——web前端學習路線思惟導圖在線版：https://www.processon.com/view/link/57d28d0ee4b0942d7a89c9dd

上www.w3cschool.cn下載w3cschool官方app，隨時隨地學編程

 

另外還有個學習路線，在菜鳥網找過來的

 

http://www.runoob.com/w3cnote/web-developer-learn-path.html