寫給同事的前端學習路線

前端要學習三個部分:HTML,CSS,JavaScript(簡稱JS),所以首先明確三個概念:
HTML是內容層,它的目的是表示一個HTML標籤在頁面裏是個什麼角色。
CSS是樣式層,它的目的是表示一塊內容以什麼樣的樣式(字體、大小、顏色、寬高等)顯示。
JS是行爲層,它要作的是當用戶觸發某些行爲時,會給內容和樣式帶來什麼樣的改變。

1,HTML,CSS部分。
HTML/CSS初學,就照着http://www.w3cschool.cn/的實驗作,把http://www.w3cschool.cn/index-6.htmlhttp://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





學習完成後就是一個較爲熟練的HTML/CSS使用者了.這時候若是想繼續深刻學習相關類庫和框架,推薦Sass和Compass,推薦兩篇阮一峯的博客: http://www.ruanyifeng.com/blog/2012/06/sass.html http://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方面的編程思想。
感謝豆瓣白烏鴉童鞋分享~
相關文章
相關標籤/搜索