標籤：

Web 前端怎樣入門？

11-25

css+html5+javascript同時學的模式對嗎？

7.2 更新

被私敲的煩了，私信不回，要問問題可以去值乎付費提問。

對於絕大部分零基礎轉行的同學來說，你要做的不是想著怎麼快速入門前端，而是應該補回計算機基礎知識，擁有最基本的專業素養。可以直接拉到答案的最後了……

統一更新下前端現狀：

文本編輯器：VS Code + 一系列插件

包管理工具：npm

JS：緊跟每年更新的ES標準，強烈推薦上TypeScript

CSS：多了個PostCSS，以及CSS Modules等一系列模塊化方案……

框架：React全家桶，Vue全家桶，本身就是全家桶的Angular（至少擅長其一）

構建工具：webpack

流程工具：npm script足夠了，實在不夠再用gulp

額外值得強烈推薦的：函數式編程，響應式編程（RxJS）

----------

3.5 更新

大家還是別點贊了吧，這個答案似乎給了很多人前端入坑很簡單的錯覺，十分惶恐…

----------

11.25 更新
至今 1570 贊，3452 收藏，有點被嚇到了。
其實這個回答主觀性很強，不適合大多數人，所以收藏的意義不大。
----------
原答案：

五角場文秘職業技術學院，大三狗一枚。
剛刷完IFE最終任務之一，來分享下自己過去三個月的前端學習經歷。
我的提交 百度前端技術學院

前端是幹什麼的我就不贅述了，推薦看這個答案：Web 建站技術中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什麼？ - 張秋怡的回答
直接進入正題。前端入門是一個螺旋上升的過程，既要反覆看書，也必須抓緊時間實踐。

IFE是一個絕佳的練習平台，題目都是開源的。15年的學習資料比較多，而16年的題目題量較大，難度也稍大，新手很容易在task1-6喪失信心，那個任務實在是太麻煩了。所以我個人建議先刷15年的task1和task2，都是很基礎的題目了，不會做也可以參考別人的代碼。

  • IFE2015：ife/2015_spring/task at master · baidu-ife/ife · GitHub
  • IFE2016：百度前端技術學院

我把這三個月大致分為三個階段。

1. HTML + CSS
前端的入門門檻極低，體現在HTML和CSS上。運行環境就是瀏覽器，推薦Chrome。你需要的只是一個文本編輯器，推薦Sublime Text 3，有不少好插件比如Emmet，谷歌搜一下很容易了解到的。當然你非要用記事本的話，也不是不行的。剛入門查閱資料可以用 w3school 或者 MDN 。

HTML和CSS不是編程語言，前者只是結構標籤，後者則是樣式配置，入門是非常簡單的。網上資料也有很多，推薦慕課網 HTML+CSS基礎課程。
我當時是看了一本書 Head First HTML and CSS，講得淺顯易懂，不過價格比較感人，也是只翻一遍的書，沒有必要買了。
迅速刷一遍慕課網，對HTML和CSS有個大致印象就好。想鞏固HTML標籤可以去看看16年的task1-1。
HTML5的API可以先放一放，回頭再看。

接下來就是深入學習CSS了。推薦：

  • 《CSS權威指南（第3版）》。很枯燥的一本書，但我確實不知道哪本書更適合了。花兩三天硬啃下來就好了。屬性細節不必記憶，以後用到肯定要再查的。著重點放在大局上，比如盒模型，浮動和定位這些，抓住重點快速過一遍。
  • 《CSS3 專業網頁開發指南》。CSS3也是需要掌握的內容。但這裡還是以了解為主，知道CSS3有什麼內容就好，記憶屬性是枯燥且毫無意義的。

以上內容用時5天左右，下面是實踐。
學了幾天HTML和CSS了，應該也有點成果了。打開IFE2015 task1，寫個靜態頁面吧。

我X，完全寫不出來。

這是正常的。去看下別人的代碼吧，看一小部分就開竅了。忘掉的屬性就查書或者w3c，多嘗試，不斷踩坑才有進步。

畫完第一張圖後，別著急往下寫。你的代碼肯定會有如下問題：

  • 胡亂的代碼縮進
  • 毫無章法的屬性順序
  • 滿頁的div
  • 不停地寫id和class

重寫吧，是的。重寫之前先看一份代碼規範 GitHub - ecomfe/spec: This repository contains the specifications.。當然代碼規範不是唯一的，我最早看的是這一份，所以代碼風格也一直維持到現在。
再去看一下別人提交的代碼，多看幾份。當然自己也要判斷，不能聽風就是雨啊，人家寫得不好你再去重寫一次，等於你也有責任對不對。
開始重寫了，會發現功力大增，寫代碼速度也快了很多的。
寫到第三張頁面的時候，應該比較熟練了。如果看到布局就大概知道應該怎麼寫了，那就可以進入JavaScript的學習了。
以上內容用時10天左右。

進階部分可以回頭再看：

  • 掌握預處理工具Sass，自動化工具Gulp。
  • 閱讀Bootstrap源碼。
  • 《CSS揭秘》，極其驚艷的一本書，涵蓋了CSS3的很多奇技淫巧，雖說有些地方不太實用，但讓人眼前一亮，很值得看。

2. JavaScript

這是至關重要的階段。

  • 強烈推薦《JavaScript高級程序設計（第3版）》，俗稱紅寶書。前七章是重中之重，必須反覆閱讀，直至完全理解，期間可配合其他書一起讀。DOM，事件流，表單，JSON，Ajax與最後幾章也相當重要。其餘章節可以略讀或跳過（比如瀏覽器嗅探，XML以及那些列舉大量API的章節，完全可以用到再查）
  • 推薦《JavaScript語言精粹》，俗稱蝴蝶書。超薄的一本，半天就可以看完。JavaScript是一門有很多坑的語言，我個人是喜歡把這些坑點全部搞清楚的，但這本書卻避而不談了，剩下的也就是所謂的「精粹」了。但清晰地過一遍知識點總是好的。
  • 強烈推薦《你不知道的JS》。精彩至極的一本書，將JavaScript的坑一網打盡。之前搞不懂的問題，比如閉包，this之類的都可以在這裡找到答案。
  • ES6也是必學的內容，推薦阮一峰老師的《ES6 標準入門》。但這本書以API居多，所以還是留個大概印象，以後寫到類似的地方，查一查有沒有ES6更簡潔的寫法就好，不必死記硬背。以及需要學會Webpack的使用，Babel和模塊化就靠Webpack了。
  • 不太推薦《JavaScript權威指南》，也就是犀牛書。那就是一本字典……

進階：

  • 《JavaScript設計模式與開發實踐》，設計模式是必須了解的內容，這本是寫得不錯的。
  • 《高性能JavaScript》，紅寶書作者的另一力作，講了一些優化技巧與性能瓶頸問題，值得一讀。

以上內容用時1個月左右，中途可穿插IFE2015 task2的題，比2016年的要簡單。
這些書全部刷完的話，應該可以跟人談笑風生了。
開始實踐，IFE2016階段二的題，想怎麼刷就怎麼刷吧。如果有編程經驗的話，應該沒什麼壓力了。

3. JavaScript框架
這部分就比較自由了，每個人點的技能樹都不一樣的。前端的發展是爆炸式的，換工具比翻書還快，所以還是以看文檔為主了。
目前主流框架經常被提及的是React，Angular，Vue。知乎搜一搜就有相當多的優秀答案了。不過這個答案也有時效性，說不定過兩年這些框架全都被淘汰了呢【逃
學習至少一種框架，把IFE2016刷通關吧。耗時1個半月左右。

進階：看各種源代碼。這也是我最近打算做的事情，但是好像期末考要到了TAT

最後補充一下，計算機基礎知識是很重要的。由於本人有OI的經驗所以稍微占點優勢。再推薦幾本書，抽空還是要看看的：

  • 《深入理解計算機系統》，CSAPP，也是我們專業這學期的課程（但是我的專業明明是EE啊）。
  • 《計算機網路 自頂向下方法》，看名字就知道必讀了吧。
  • 操作系統好書挺多的，推薦一本 Operating Systems: Three Easy Pieces ，英文不夠好就《現代操作系統》吧。
  • 演算法和數據結構，推薦兩本：《演算法導論》《數據結構與演算法分析》。似乎演算法和數據結構與前端關係不大，但作為一個碼農，不要求你寫紅黑樹，至少快速排序和二分查找這種要會寫的吧。

話說這幾本中文的，都是機械工業出版社的啊……

後記：其實學的內容越多，就越感到自己知識面的匱乏。這個答案本應還有4,5,6甚至更多的，但由於本人只學了三個月，水平有限，目前只能達到這個程度了。寫得不對的地方，望大牛們指正，輕拍。謝謝大家~

------------

驚人的點贊收藏比……只收藏不點贊的都是壞銀QAQ

編輯於20171020

昨晚收到了百度的offer，也算圓滿結束了我的秋招之路，秋招參加面試的幾家單位滴滴、華為、拼多多，以及我老家的中移物聯網都收到了錄用offer（至於我最後去了哪兒，這就是個迷了）。秋招參加了面試的就這幾家，他們的offer也算是給我自學前端的一個認可了吧。

這裡給自學前端的，以及打算入門前端或者即將找工作的一些小建議吧：

關於項目：很多人問我怎麼接項目，其實我接的項目真的很low，以前都是接的外包，外包除了能掙點錢，由於開發周期短、沒人檢查你的代碼質量，其實學不到什麼東西。

簡歷上面的幾個項目也是實驗室和校內的項目，當然簡歷被刷也是常有的事，比如網易、京東、騰訊就沒給我面試機會。所以項目不夠有亮點的，最好可以找人內推。然後我每次面試自我介紹都是著重介紹我的「電子科技大學助理管理系統」，真的是一聽就很low的項目，然而我確實在裡面花費了很多心血，從項目的需求、選型、開發、重構、優化等等過程親力親為，因此，無論你的項目看起來多麼low，只要你認認真真在裡面做了事情的，公司都會認可你的。

然後就是我的感覺大公司都很看重基礎，不要覺得會react、vue、angular....幾十種框架就很牛逼了，他們只要你懂得其中一種就夠，注意是「懂」，不僅僅是「會」。

總而言之，先打好基礎，再研究工具。能實習就去實習。

小感慨：看了自己以前的回答，發現自己從科研走不通選擇了自學前端，然後拿了互聯網的offer之後又沒有選擇互聯網。用一個朋友的話來總結自己吧，其實我一直在路上，至於什麼時候找到自己想要的喜歡的適合的，還在尋找吧，但我一定會在把每件事情都做好。

祝各位熱愛互聯網和前端開發的朋友們都能實現自己的理想和抱負吧～

編輯於20170227

首先感謝大家的點贊，這裡統一回答一下評論中出現的問題：

1.能不能分享這些電子書？

答：其實我是很樂意分享的，但是考慮到版權問題，大家還是到正規的售賣電子書的地方買吧，抱歉咯~ 不過我可以很樂意的分享我目前正在撰寫的Gitbook Web Practice BooK · GitBook (平時對前端知識的總結)

2.如何接外包？

我覺得這個應該是很容易吧 ==，我以前也是不知道，最開始是在我們學校的BBS看到有人的項目找前端的，就接的。（不過建議是在接之前，自己先動手寫過幾個網頁） 然後接了一次，就會有人又來找你。還有就是我們學校外面盤踞了好幾個專門做外包的小公司，他們也招做兼職的。不過接活兒的時候一定要注意先多了解一下這個項目，有沒有原型圖，時間線，技術要求，對方是否靠譜等。

3.打個小廣告

上面也介紹了，自己為了找工作，拚命的在補基礎知識，並且想把這些知識寫成書中。目前就完成了HTML和HTTP部分，不過還是希望大家關注一下，戳這裡哦—— Web Practice BooK · GitBook

另外有人問我Git： daisyHawen (Hawen) · GitHub

以下是原文：

好多人提到百度前端學院，是的，作為一個從百度前端學院受益的人來說一說：

2016.3做了百度前端學院系列，確實學習了不少東西。因為其實很多時候做很多東西都是項目驅動型的，如果不給你布置一個什麼任務，你根本沒有決心學習下去。

然後另一個就是 慕課網。因為慕課網上面的教程好多都是免費的，而且技術也很新。

而且我覺得我看視頻的效率比看書要高。

學了一年了，說一下我的心路歷程

首先第一步必然是W3cschool

另外我覺得菜鳥教程也不錯

HTML 教程 | 菜鳥教程

CSS 教程 | 菜鳥教程

JavaScript 教程

jQuery 教程 | 菜鳥教程

Bootstrap 教程

（不得不說MDN才是王道）

第二步 然後，說一下，我學習的慕課網課程：

  • 最基礎的課程：

HTML+CSS基礎課程

http://www.imooc.com/u/1974843/messages

JavaScript入門篇-JavaScript入門視頻教程

學習HTML、CSS、JS入門

  • 學習IDE，和GIt

快樂的sublime編輯器_sublime編輯器使用

版本控制入門

  • CSS進階
  • 學習一些CSS3的特效，有好多，這裡只列了一部分

十天精通CSS3_css3入門視頻教程

CSS3實現漂亮ToolTips效果

css3實現網頁平滑過渡效果

形形色色的下拉菜單

CSS3絢麗照片牆

CSS Sprite雪碧圖應用

按鈕特效-慕課網

Sass入門篇_Sass入門視頻教程

  • HTML進階
  • 主要是學了H5的Canvas

HTML5之元素與標籤結構

HTML5音樂可視化

炫麗的倒計時效果Canvas繪圖與動畫基礎

Canvas繪圖詳解

HTML5離線應用實戰演練

  • js進階

jQuery源碼解析（DOM與核心模塊）

  • 嘗試做一個完整的系統

H5+JS+CSS3實現七夕言情

CSS3扁平化風格博客

商城分類導航效果

手把手教你實現電商網站後台開發

  • Node.js React.js以及前端工具webpack gruntfile

進擊Node.js基礎(一)-慕課網 進擊Node.js基礎(二)-慕課網 node+mongodb 建站攻略(一期)-慕課網 node建站攻略(二期)

React入門視頻教程 React實戰--打造畫廊應用(上)-慕課網 React實踐圖片畫廊應用（下）

Grunt-beginner前端自動化工具

學習時長居然有1046小時，當然也有可能是因為我忘記關實驗室電腦了。不過後來當你入門了之後，我建議看視頻還是來得太慢了，還是看API文檔好。

(更新於20171020 後來，我又買了好多付費教學視頻來看，什麼性能優化類看，什麼源碼解讀類的也看，不僅僅限於如何搭建一個網站了)

第三步 就是百度前端學院了

當然光學這些還是不夠的，這期間自己還接了幾個外包來練手。

一個是管理系統，另一個類似於借貸寶一樣的web系統

還有看書：

以上是我的書單，當然我還沒看完。

目前就看了

  • HTML與CSS3權威指南
  • javascript權威指南
  • HTTP權威指南
  • javascript+dom編程藝術
  • (更新於20171020 現在基本上看完了，還有Vue.js權威指南，Node與Expres開發指南，實戰ES2015，阮一峰老師的那本ES6....)

最後最後，善於寫博客自己總結

非常害羞的給出的自己的blog，寫得很粗糙，平時主要只是為了記錄自己學習過程中的體會。

Daisy花園

然後也試著用jekyll和gitio搭了博客，但是疏於管理 ，看看就好, Daisy花園

我平時還是比較喜歡在CSDN上寫（估計這點會被吐槽，因為不符合程序員的極客思維），但是我覺得CSDN也是markdown語法，寫起來也挺方便的啊。

而且在上面我找到了成就感啊

現在已經開始有排名了

後記
想說研一這一年很辛苦：
有導師這邊的事：一邊在研究雲裡面的訪問控制（發了一篇EI），寫了一篇國內核心（然而這居然不能掛自己的名，這也是我放棄了科研的原因），還參與了中國雲桌面標準的擬定。
還要上課：昨天看學分，發現要求只用修25個學分，自己修了30個。
另外還接了外包項目，所以經常翹課熬夜加班啊。
因此很多時候學習前端都是偷偷摸摸，導師一出現立馬調到word或者matlab界面，然後還翹了很多選修課，不過回頭看看自己的收穫還是蠻多的。
然而前端技術正在日益更新，而且裡面還有很多知識點技術點掌握不牢實，所以，這一年繼續加油。
爭取明年這個時候可以找一個理想的前端工作。

最後再說一點，遇到bug一定要用google，stackoverflow上面有很多好的問題解答。

難得寫得這麼用心，您就點個贊再走唄~

學習前端就好比如蓋房子~

html就充當了房子結構這部分，也是房子的基礎。

css呢，就好比咱們房子的裝修，牆面什麼顏色，什麼風格，什麼地板...這些給房子改變風格，樣式的就是css

javascript呢，就好比這個房子的功能，房子需要製冷吧，需要暖氣吧，也需要上下水吧。這些功能性的就相當於是javascript

例子可能不是很恰當，只是幫助大家有個初步的認識~

方法步驟、工具以及開發的案例展現

1、前端工具箱（dreamwear/sublime/Photoshop/SVN等）

2、零基礎入門（html，CSS）

前端開發概況、代碼入門

頁面基本結構、文檔聲明、編碼聲明、css語法、style屬性、link和style標籤、id屬性、基本樣式、Border 、Background、 Font、盒模型、文本設置...

常用標籤集合

header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd...絕對路徑、相對路徑、標籤語義化、標籤嵌套規範、SEO...

常用選擇器標籤類型劃分

d、class、類型選擇、包含選擇、群組選擇、通配符、選擇器優先順序、標籤樣式初始化訂製方案、超鏈接及偽類劃分、標籤類型劃分及特性、inline、inline-block、block..

浮動進階

浮動的作用、浮動的特性、文檔流、浮動的各種問題、clear、BFC(塊級格式化上下文)、觸發BFC的條件、Haslayout、Haslayout的觸發條件...

定位

relative相對定位、Absolute絕對定位、Absolute絕對定位、Fixed 固定定位、inherit 繼承、static靜態定位、默認值、zIndex層級問題、margin負值、透明度...

表格和表單

表格標籤、表格樣式重置、單元格合併、表單元素、表單相關的屬性操作、表單默認樣式初始...

兼容性問題處理

兼容性問題總結、浮動在IE6，7下的各種問題、表單在低版本IE的問題、處理低版本IE對新增標籤的支持、CssHack、條件注釋語句、PNG問題、透明度的問題、固定定位在IE低版本的處理方式...

整站進階

樣式規劃、favicon、Css Sprite、Data URI、隱藏元素、測試工具使用、滑動門、等高布局、三列布局、未知寬高圖片在容器內水平垂直居中、文本水平垂直居中、多行文本水平垂直居中...

css3入門

transition、屬性選擇器、nth-of- type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高級、H5表單新增屬 性、E:not(s)、E:target、E::selection、background-clip...

移動端布局

測試環境Emulation、viewport、 window.devicePixelRatio、物理解析度、Media Queries、rem、window.screen、移動端布局相關問題、 window.deviceorientationevent、橫豎屏判斷...

Animation和Transform

瀏覽器前綴、keyFrames、Animation調 用、播放次數設置、動畫偶數次調用順序、Animation的問題、無縫滾動、動畫播放|暫停、rotate旋轉、deg、skew斜切、scale縮 放、translate位移、transform-origin、transform的執行順序問題...

Bootstrap前端開發框架

Html語法規範、CSS語法規範、Less 和 Sass 中的嵌套、class 命名、選擇器、Normalize.css、柵格系統、排版、代碼、響應式工具...

3.項目實戰

PC端的企業網站布局（例：sony官網）
PC端的電商類網站布局（例：京東商城）
移動端常見頁面布局（例：微信活動頁/商城）

推薦圖書：

學習前端書籍自然不可少，這裡給大家推薦《html 5與 css 3權威指南》，雖然主要是講解html5+css3，但倒也是一本好的入門書籍。該書比較系統，覆蓋面也比較廣。技術新穎，所有知識點都緊跟 html 5與css 3的最新發展動態（html 5和css 3仍在不斷完善之中）；也有比較強的實戰性（包含246個示例頁面），不僅每個知識點都 配有精心設計的小案例（便於動手實踐），配合案例，也比較生動有趣。該書不僅能滿足你全面而系統地學習理論知識的需求，還能滿足你需要充分實踐的需求。

本次整理了一些web前端視頻資料，註冊賬號就能免費下載，初級、中級、高級的任君選

下載鏈接： web前端開發工程師_web前端開發視頻教程

個人認為學習前端可能又分為下面幾個階段；

第一階段——HTML標籤的學習

超文本標記語言(HyperText Mark-up Language 簡稱HTML)，「超文本」就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

html是一個網頁的骨架，就好比是蓋房子的結構~這也是前端頁面的基礎。試著想一下，如果一個房子連磚頭和水泥都沒有，後面的步驟又有什麼意義呢？所以我們必須完全掌握HTML的基本結構和常見的標籤，屬性。有了一個好的開始，距離成功已經一小半啦~

關於HTML怎麼記憶、學習？可能一上來死記硬背，也不會有太好的預期。而且還有可能被嚇到？

「我去！這麼多標籤！怎麼記得玩？」

個人感覺有兩點可以嘗試：

1，語義化的去記憶。比如ul li這個就是列表，button就是按鈕，table就是表格。其實這也是html5所倡導的，語義化標籤。

2，試著寫一個一個小的demo，也許就只是一個列表，一個表格，或者一個按鈕。也許寫著寫著你就懂了呢？

學習HTML就是要自己不斷的去寫，去嘗試。看著自己的代碼能跑起來，有了心目中的效果，這種心情還是很開心的！給大家推薦一個網站，w3cSchool，這裡面有在線的代碼編輯器。可以邊寫邊看到效果~

ok~學習完成html後，我們來到第二階段——css

去給我們的房子裝修一番吧~

第二階段——CSS的學習

CSS，層疊樣式表—— （Cascading Style Sheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對 網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文 本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。

CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面布局，就基本上掌握了大半啦~這時我們就以及能夠對網頁中各個元素進行精準的排版，做出符合我們意願的網頁啦！

關於CSS的各種屬 性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是「border」，那我們需要右側邊框做一些改 變，那就是「border-right」。很明顯，接下來按照我們的需求還有「右邊框的寬度——border-right-with」，」右邊框顏色—— border-right-color」等等等，諸如此類~

完全就是我們需要什麼，只要憑著需求去尋找。

說完裝修，我們終於要給房子打造一些功能啦~follow me~

第三階段——JavaScript

JavaScript一種直譯式腳本語言，是一種動態 類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在 HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

簡單來 說，javascript是一個可以運行在瀏覽器上面的語言（當然現在基於一些庫/框架已經遠不只是在瀏覽器上了），它可以操控瀏覽器，讓瀏覽器聽從我們 的命令。這有點像一個電視劇和遙控器，而javascript就是我們的遙控器。瀏覽器根據javascript的指令，做出相應的反饋。比如操作 DOM（也可以理解成為操作HTML），可以操作CSS。有了javascript就可以讓我更加靈活動態的操控HTML,CSS.

嚴格來說、HTML和CSS還算不上真正的「語言」，而javascript卻是如假包換的腳本型語言，既然是語言，那就會有字元串，數組，對象等等。而我們的javascript可以處理這些與數據有關的工作，比如給數組排個序，去個重等等。

而我們依靠javascript可以做些什麼呢？網頁上常見的輪播圖，網站的註冊功能，提交我們的留言，刷新獲取新聞等等。當然，我們強大的javascript遠不止此啦~以後再為大家深入介紹~

然而因為歷史原因，比如我們灰常「尊敬」的 IE 瀏覽器~出了一套自己的javascript標準，沒有和主流javascript標準兼容啊！！作為一個前端er是不是應該把更多精力用在有意義的地方呢，而不是解決兼容。。。

所以，似乎我們還需要一個利器，來讓我們更快速的開發~沒有錯，這就是我們的——jQuery！

第四個階段——jQuery

jQuery是一個兼容多瀏覽器的 javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人 John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開 發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

如果繼續用蓋房子做例子，jQuery更像是一個裝修隊。我們只需要關注我們的房子設計本身，把我的想法，理念告知這個裝修隊，讓它來給我們處理那些雜七雜八的事情。比如會不會吵到鄰居？怎麼協調物業？幹活總得有人手的，對吧...

jQuery的優點我就不挨個說啦，一句話，jQuery是你更上一層樓的利器，也是我們前端er一大利器！

Web前端學習小建議

這裡跟大家扯一扯學習前端的小方法，是我自己的學習方法，大家湊合看看，倒也不一定對~

在寫css前，其實html的結構要是比較合理的，這樣寫css也會比較順手。在寫一個網頁之前，建議先琢磨幾分鐘，不要上來就寫。多去看看別人是怎麼寫的，然後結合自己的項目，心中有一個大致規劃。可以先把最外層輪廓寫好，先不著急去寫某一個具體的部分。

這裡給大家分享一些小技巧：

1、使用reset.css

火狐和IE這兩種不同的瀏覽器，在繪製CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。（可以去網上找一下，很多的）

2、CSS縮寫

CSS縮寫簡化了你的CSS代碼，更重要的是，它讓你的代碼更加整潔易懂。

不是像這樣創建CSS

.header {

background-color: #fff;

background-image: url(image.gif);

background-repeat: no-repeat;

background-position: top left;

}

而是像這樣創建CSS

.header {

background: #fff url(image.gif) no-repeat top left

}

3、理解class和id

這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點「.」和井號「#」來標識。簡單來說id就是用來標識那些單獨不重複的樣式，而class是可以重複使用的。

4、實用的&

&也叫鏈接列表，在與&或&正確搭配的時候非常好用，尤其是用在導航菜單樣式上。

5、少用&多用&

CSS最大的優勢之 一是使用&達到樣式上的靈活多變。不同於&，&里的內容不會 被鎖在單元 格&中。可以說幾乎所有的表格布局都可以在&和樣式的正確使用下完成。當然，有大量表格內容時，還是 用 &吧。

6、CSS調試工具

在設計CSS時，能夠得到頁面布局的預覽對於優化CSS樣式和糾錯是很有幫助的。這裡有一些免費的CSS調試工具推薦給你，你可以把它裝在瀏覽器上：比如FireFox Web Developer、DOM Inspector、Firebug等

7、!Important

所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也只會採用被標記的那條。

.page {

background-color:blue !important;

background-color:red;

}

比如上面的例子，因為background-color:blue 被標記為!important ，即使後來有把背景改成紅色的語句，也只採用被標記的那條。!important 用來強制使一個樣式避免在之後的編碼中被修改，遺憾的是IE不支持。

牢記以上小技巧，也許你的css技能突然就起飛了呢？

關於javascript的一些小技巧，下次我再整理給大家~一次性看太多，大家是不是也有點暈？

學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什麼苦。。。既然學習這麼痛苦，為什麼不快樂一點學呢？

anyway~希望大家可以成為一個優秀的前端er！

原文鏈接：前端知識庫-博客-雲棲社區-阿里雲

前端開發全面知識庫，包括HTML5，CSS3和js的基本框架知識，以及DOM和BOM操作的基礎知識和一些基本工具和IDE。學習本篇，你將了解到以下知識。

核心 Core

HTML5

W3C http://www.w3school.com.cn/html5/ W3C https://www.w3.org/html/ig/zh/wiki/HTML5 菜鳥教程 http://www.runoob.com/html/html5-intro.html HTML5中文門戶 http://www.html5cn.org/

CSS3

W3C CSS教程 http://www.w3school.com.cn/css/index.asp W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp 菜鳥教程CSS教程 http://www.runoob.com/css/css-tutorial.html 菜鳥教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html CSS參考手冊 http://css.doyoe.com/

JS

W3C http://www.w3school.com.cn/js/ 菜鳥教程 http://www.runoob.com/js/js-tutorial.html 廖雪峰js教程 http://www.liaoxuefeng.com js標準參考教程-阮一峰http://javascript.ruanyifeng.com/

jQuery

W3C http://www.w3school.com.cn/jquery/ 菜鳥教程 http://www.runoob.com/jquery/jquery-tutorial.html 極客學院 http://wiki.jikexueyuan.com/project/jquery-tutorial/ 廖雪峰 http://www.liaoxuefeng.com/wiki/ 參考手冊 http://www.css88.com/jqapi-1.9/ 參考手冊 http://www.runoob.com/manual/jquery/

ES6

阮一峰ES6 http://es6.ruanyifeng.com/ 極客學院 http://wiki.jikexueyuan.com/project/es6/ JavaScript 標準參考　阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html

插件

parallel.js: 前後端通用的一個並行庫 zepto: 用於現代瀏覽器的兼容 jQuery 的庫 totoro: 穩定的跨瀏覽器測試工具 TheaterJS: 一個用於模擬人輸入狀態的 JS 庫 stellar.js: 前端用於實現非同步滾動效果的庫，現已不再維護 skrollr: 另一款實現一步滾動的開源庫，使用人數眾多，可實現各種狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是開發人員可以基於 web 技術構建 IOS7 程序 regulex: 用於生成 正則表達式 的可視化流程圖 markdown-it: 新型 Markdown 解析器，快速，支持插件 multiline: 用於 Javascript 中的多行文本，類似於 Ruby 的 HERE Doc screenfull.js: 全屏插件，支持各大瀏覽器 lunr.js: 類似於 Solr, 但是用於瀏覽器上的全文搜索引擎，可以為 JSON 創建索引，離線也可以使用 jquery.hotkeys: jQuery 插件，用於綁定熱鍵 breach_core: Javascript 編寫的 Browser (瀏覽器) octocard: 用於生成 Github 信息卡片的庫 github-cards: 用於生成 Github 信息卡片的庫 money.js: 輕量級貨幣轉換庫，web 和 node 皆可用 accounting.js: 輕量級的數字、貨幣轉換庫 javascript-algorithms: Javascript 實現的各種演算法集合 lazy.js: 類似於 underscore, 但是會延遲執行，某些場景下，性能會有很大的提升 seajs: 前端模塊載入器，解決模塊化、依賴等問題 jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫 js.js: Javascript 實現的 javascript JIT jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大 todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫 localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者 localStorage, 提供一致的介面 EventEmitter: 瀏覽器版的 EventEmitter jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據 knockout: 前端 MVVM 框架，用於開發富前端應用 mermaid: 可以根據文本生成流程圖，類似於 Markdown 的語法 js-sequence-diagrams: 另一款可以根據文本生成流程圖的庫，類似於 Markdown 的語法 flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品 zoomooz: jQuery 插件，用來處理瀏覽器縮放 fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方 mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React backbone: 強大的前端 MVC 庫，鼻祖級前端庫，最初為了配合 Rails 來模塊化前端應用，兼容性良好 (兼容到 IE6)，插件豐富，性能良好 jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持 jquery.scrollTo: 在頁面上以一個元素為起始以動畫的方式移動(ScrollTo)到另一個元素， 支持回退等 jScrollPane: 自定義的滾動條，讓所有瀏覽器都顯示一樣的滾動條 onepage-scroll: 提供類似於 iPhone6 展示頁類似的效果，適用於單頁應用，兼容到 IE8 scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好 ScrollMagic: 神奇的滾動交互效果插件，可以在滾動的過程中設置各種各樣的動態效果 infinite-scroll: 滾動載入，滾動到最下到自動載入， Paul Irish 大神之作 animatable: 僅僅依靠 border-width 和 background-position 實現的各種動態效果，看真相 Fluidbox: 頁面上內嵌圖片的放大縮小效果，類似於 Medium 中的效果 jquery-validation: jQuery 的一個插件，用於校驗 Form 表單 BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果 emscripten: 一款基於 LLVM, 可以將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度 qrcode-generator: 各種語言的二維碼生成工具 device.js: 一個可以檢測設備類型的工具，可以讓我們根據不同的設備來為其定製響應的 Javascript 和 CSS jquery-qrcode: jQuery 插件，用來生成二維碼 Wookmark-jQuery: jQuery 的一個插件，可以用來實現瀑布流的效果 isotope: 可以用來過濾、排列布局，實現美觀的動態布局切換效果，Demo lazysizes: 功能強大的圖片延遲載入工具，可以首先載入一個低質量的圖片，然後再載入高質量的圖片 progressbar.js: 簡潔美觀的進度條，扁平化 pigshell: 一個由 Javascript 實現的Shell, 將互聯網當做一個大的文件系統, 通過 cd/ls/cat…..等命令, 可以訪問 Facebook/Twitter/Google Drive 等網路服務 spectrum: Js實現的顏色選擇器 (Colorpicker) jQuery.countdown: jQuery 倒計時插件 summernote: WYSIWYG 富文本編輯器 awesomplete: 非常輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀 switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器 trix: Basecamp 公司出品的富文本編輯器，簡潔小巧 sensor.js: 在智能移動設備瀏覽器上，通過HTML5的api使用移動設備的功能。定位、運動、傾斜等 hyhyhy: 用於創建 基於 HTML5 的 演示文稿 swipebox: jQuery 插件，用於處理移動端的觸摸事件 FileAPI: 前端用戶處理文件（拖放、多文件上傳等） Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬體加速 matter-js: 2D 物理效果引擎，碰撞、彈跳等 jQTouch: 用於輔助創建手機端的 Web 應用，支持主題、Zepto.js 等 snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫 c3: 基於 D3 的圖表庫 echarts: 企業級圖表庫，百度開發 parallax.js: 一個用於響應智能手機 orientation 的庫 jQuery-Animate-Enhanced: jQuery 動畫庫的一個增強，用於現代瀏覽器 wysihtml: 富文本編輯器，適用於現代瀏覽器 slip: 一個通過滑動或者拖拽來操控列表的庫 evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持 PhotoSwipe: JS 的一個圖片展示庫 focusable: 是頁面上一個元素高亮的庫，有圖有真相 firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML5 mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架 interact.js: 一個適用於現代瀏覽器的，用於處理 手勢、拖放、縮放等的庫 rebound-js: 實現部分物理效果，Facebook 出品 basket.js: 基於 LocalStorage 的資源載入器，可以用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存 iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各種事件，不依賴任何的庫，且插件豐富, 大眾點評的手機端列表滾動就是用這個庫處理的 metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品 accessible-html5-video-player: Paypal 出品的 Video 播放器 loading: 幾種 Loading 效果，基於 SVG flippant.js: 一款能夠漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過作為源碼學習還是不錯的 move.js: 基於 CSS3 的前端動畫框架 scrollReveal.js: 使元素以非常酷帥的方式進入畫布 (Viewpoint)，看 Demo Modernizr: 一個用來檢測 HTML5 和 CSS3 支持情況的庫 foundation: 另一款前端模版框架，類似於 Bootstrap Flat-UI: Bootstrap 的一款主題，簡潔美觀 iCheck: 一款漂亮的 Checkbox 插件 Swipe: 非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮後的大小約 5kb slick: 功能異常強大的一個圖片滑動切換效果庫 SocialButtons: 漂亮的社交按鈕 sweetalert: 一個非常美觀的用於替換瀏覽器默認 alert 的庫 web-animations-js: Javascript 實現的 Web Animation API vivus: 可以動態描繪 SVG 的 JS 庫, 支持多種動畫 plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器 timesheet.js: 基於 HTML5 CSS3 時間表 slideout: 一個非常美觀的側滑菜單

包管理工具 Package Managers

NPM

菜鳥教程NPM 使用介紹 http://www.runoob.com/nodejs/nodejs-npm.html 淘寶 NPM 鏡像 https://npm.taobao.org/ npm 模塊安裝機制簡介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html npm包搜索地址 https://www.npmjs.com/

Bower

Bower中文網 http://www.bowercn.com/ Bower：客戶端庫管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html

Yarn

yarn中文網 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依賴管理 YARN 簡介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/

編輯器 Text Editors

WebStorm

官網下載 http://www.jetbrains.com/webstorm/download 前端網破解版下載 http://www.qdfuns.com/tools

VScode

官網下載 https://code.visualstudio.com/ vscode 插件精選 - 獻給所有前端工程師https://segmentfault.com/a/1190000006697219

SublimeText

官網下載 https://www.sublimetext.com/ 前端網破解版插件版下載 http://www.qdfuns.com/tools SublimeCodeIntel: Sublime Text 的代碼補全工具，支持多種語言 Emmet：一個用於提高開發效率的編輯器插件，前身是Zen coding SublimeLinter: 一個提供代碼質量檢測的插件 SublimeTmpl：快速新建指定的模版文件 Syntax-highlighting-for-Sass：sass代碼高亮插件 MarkdownEditing: Sublime Text 強大的 Markdown 擴展, 提供快捷鍵, 主題等 ApplySyntax: 輔助檢測語法插件 CTags: Sublime Text Ctags 支持插件, 需要安裝 ctags sublime-react: React 代碼高亮

Atom

官網下載 https://atom.io/

HBuilder

官網下載 http://www.dcloud.io/

JS框架 JS Frameworks

Backbone

Backbone.js API中文文檔http://www.css88.com/doc/backbone/

AngularJs

中文官方文檔https://angular.cn/ angularjs中文網http://www.apjs.net/ angularjs教程http://www.angularjs.net.cn/ Angular 基礎入門http://www.cnblogs.com/micua/p/angular-essential.html angular-masonry: Masonry 的 AngularJS 插件，用於瀑布流 angular-schema-form: 根據 JSON 生成響應的 Form 表單 restangular: Angular 中用來處理 RESTful API 的插件，可替代 $resource ng-cordova: Cordova 常用組件的 Angular 版本 angular-translate: Angular 的國際化 (I18n) ng-inspector: Chrome 插件，用於調試 Angular angularjs-style-guide: AngularJS 代碼風格 ngReact: React 的 Angular 插件，可以在 Angular 中使用 React Components material: Google Material Design 效果的 Angular 實現 angular-local-storage: Angular 插件, 提供了對 localStorage 的友好支持, 並對不支持的瀏覽器使用 cookie 優雅降級 angular-filter: 一組有用的 Angular Filters bindonce: Angular 插件, 用於減少 Watcher 的數量, 提升性能

React

英文官方文檔https://facebook.github.io/react/docs/hello-world.html 中文官方文檔http://reactjs.cn/react/docs/getting-started-zh-CN.html gitbooks手冊https://hulufei.gitbooks.io/react-tutorial/content/introduction.html 阮一峰react入門http://www.ruanyifeng.com/blog/2015/03/react.html 阮一峰React Router入門http://www.ruanyifeng.com/blog/2016/05/react_router.html React Router 中文文檔https://react-guide.github.io/react-router-cn/ react-redux 中文文檔http://cn.redux.js.org/docs/react-redux/index.html 阮一峰Redux 入門教程http://www.ruanyifeng.com/blog react: React 框架源代碼 react-native: Facebook 出品的使用 React 開發 IOS 原生應用的框架 react-hot-loader: 實時調整 React 組件效果 grunt-react: React 的 Grunt 組件, 用於將 JSX 編譯成 JS touchstonejs: 基於 React 的手機應用前端框架 essential-react: 基於 React, ES6, React-Router的一個應用腳手架 react-router: React 路由解決方案

Vue

vue官方http://cn.vuejs.org/ vuex官方http://vuex.vuejs.org/zh-cn/ vue-router官方https://router.vuejs.org/zh-cn/

UI框架 UI Frameworks

Bootstrap

最受歡迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/

Ionic

一款接近原生的Html5移動App開發框架　會html css js就可以開發apphttp://www.ionic.wang/

Foundation

Foundation 中文網 迄今為止最好的響應式前端框架http://www.foundcss.com

FrozenUI

移動端服務的前端框架http://frozenui.github.io/

materializecss

基於Material Design的主流前端響應式框架http://www.materializecss.cn/

mui

最接近原生APP體驗的高性能前端框架http://dev.dcloud.net.cn/mui/

AntDesign

和react配合的UI框架https://ant.design

eleme

和vue配合的UI框架http://element.eleme.io/

JS預處理 JS Preprocessors

TypeScript

TypeScript 入門教程 菜鳥教程http://www.runoob.com/ TypeScript中文網https://www.tslang.cn/ TypeScript教程gitbookhttps://www.gitbook.com/

CoffeeScript

CoffeeScript 中文http://coffee-script.org/ CoffeeScript 實用手冊 極客學院http://wiki.jikexueyuan.com/project/coffeescript/

過程自動化 Process Automation

Grunt

Grunt中文網http://www.gruntjs.net/

Gulp

gulp.js 中文網http://www.gulpjs.com.cn/ gulp詳細入門教程http://www.ydcss.com/ 前端構建工具gulpjs的使用介紹及技巧http://www.cnblogs.com/2050/p/4198792.html Gulp開發教程https://www.w3ctech.com/topic/134

模板引擎 Templating

Handlebars

handlebarsjs官網http://handlebarsjs.com/ Handlebars中文文檔http://www.360doc.com/content/ Handlebars.js 中文文檔http://keenwon.com/992.html Handlebars的使用方法文檔整理http://www.tuicool.com/articles/fqQFN3

Haml

haml官方文檔https://github.com/haml/haml haml入門http://blog.csdn.net/napoay/article/details/50491363

Jade

Jade 官方的英文文檔http://www.w3cplus.com/html/how-to-use-jade.html Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html 帶你學習Jade模板引擎視頻http://www.imooc.com/learn/259

構建工具 Build Tools

RequireJS

RequireJS 英文網http://requirejs.org/ RequireJS 中文網http://requirejs.cn/ require.js的用法-阮一峰http://www.ruanyifeng.com/blog

seajs

seajs文檔http://seajs.org/docs/ SeaJS從入門到原理http://www.tuicool.com/articles/FfEJv2u

Browserify

官網http://browserify.org/ githubhttps://github.com/substack/node-browserify/

Webpack

Webpack 中文指南http://webpackdoc.com/ webpack的實例http://www.vichily.com webpack的入門http://www.vichily.com 一小時包教會 —— webpack 入門指南http://www.w2bc.com/Article/50764

CSS預處理器 CSS Preprocessors

Sass

sass入門http://www.w3cplus.com/sassguide/ sass參考手冊http://sass.bootcss.com/docs/sass-reference/ SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/

Less

less中文網http://lesscss.cn/ less快速入門http://less.bootcss.com/

stylus

stylus中文文檔-張鑫旭http://www.zhangxinxu.com/jq/stylus/

小白必看：web前端學習路線三部曲

初級前端

——主要學習三個部分：HTML,CSS,JavaScript

一、html+css部分：

　 　這部分特別簡單，到網上搜資料，書籍視頻非常多。css中盒子模型，流動，block,inline,層疊，樣式優先順序等這些自學起來也是非常容易。最 後再深入了解下瀏覽器差異性，ie9以下兼容簡單了解就行了，ie9以下瀏覽器被淘汰掉是趨勢，低版本沒必要浪費大量時間去學習兼容主流瀏覽 器，google chrome瀏覽器、firefox瀏覽器、safari瀏覽器、opera瀏覽器即可。瀏覽器差異內容很多，建議在實踐中多多積累。

二、JavaScript部分。

　　1.基礎學習：

　 　難點，也是重點，要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，有很多比較抽象的概念，必須要深入理解，比如閉包、原型、 面向對象、封裝等，要理解透徹。看書是必不可少的，找一本優秀的js書從頭到尾，反覆研究學習，第一遍可以快速翻閱，大體知道了解概念即可，第二三遍就需 要深入學習了。另外，js面向對象編程必須要學習，非常重要，個人推薦一本書， Stoyan Stefanov著，凌傑譯的《javascript面向對象指南》。邊學邊練，實踐出真知。

　　2.jQuery學習：

　 　這些基礎知識掌握好之後，還需要學jQuery,這是一個非常優秀的Javascript庫，大型開發必備。它簡化了Javascript的複雜操作， 消除了Javascript跨平台兼容問題，提供了大量實用方法，有良好的文檔和幫助手冊，是一個非常成熟的Javascript庫。

3.進階學習：

　　有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的代碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：易維護，可測試，高性能，低流量（移動端）

　　　　中高級前端

1.工具學習:
大 型項目中，前端代碼構建已經不是簡單的壓縮一下了，依賴管理、模塊合併、各種編譯步步不可缺少，需要學會使用grunt、gulp等前端構建工具，要學習 的還有：包管理器bower、npm,代碼優化CSS Lint、JSHint、JSLint,CSS預處理器less、sass,代碼管理及版本控制svn、Git,web框架/伺服器Node、 Express,代碼規範、HTML模塊化、css模塊化。

　　2.布局框架學習如Bootstrap.

　　3.新技術html5學習。

　　4.js框架學習，requireJS、AngularJS等，往前端架構師靠近。

　　5.nodejs學習。

/*轉載自網路*/

根據自己經驗做的前端技能樹 前端學習技能樹 希望有所幫助=-=

上W3school把html和css走一遍，然後動手寫幾個頁面，可以自己想像的寫，不過最好仿照一個網站寫。(如沒任何編碼基礎的情況下，大概1-3周)

然後你熟練一點後你就發現頁面上還有這麼寫奇怪炫酷的效果，這時你想將這些效果也弄一弄，然後就開始學習JS，先暫時了解Dom編程這一塊，有趣一點，慢慢來。(大概2-4周)

再然後你會想前端頁面上的內容怎麼與後台進行交換的，這時你需要學習一門後端語言和資料庫（不一定要精通，但一定要了解，並知道數據是怎麼傳遞的，並手寫一個簡單的後台。）
(因為有JS的一些基礎了，開始學習會比較輕鬆，1個月掌握)。

然後重新學HTML.CSS.js，因為目前狀態是什麼都懂一點，現在才算正式開始學前端(現在學習的重點就是css＋js，比如Ajax，json，html5，css3)。

別看學習時間挺長,其實親歷並不是很長(每天下班回去學習那幾個小時,算一天)。

我整理過前端入門書單
前端入門書單 - 前端小記 - 知乎專欄

總地來說，CSS/JS/HTML先大致過一遍，然後可以做點小東西，比如todo list就很經典，還有TodoMVC可以參考借鑒，然後看需要再學別的工具或框架，然後就做具體項目邊做邊學吧。

然後，書籍資料、網上別人整理的文章什麼的，多多善益。

老衲多年前失足跌下懸崖遭遇異緣, 獲得失傳已久上古時期前端天書三卷, 每一卷除了心法之外還有招式. 開篇第一言，「天地不仁，以前端為芻狗」，老衲按照天書苦學修鍊, 相信終有一日，定能成為武林霸主，一統江湖。

老衲自出道以來, 遇到的道友, 功力一般在一二層之間.能到達第三層者，鳳毛麟角。但江湖上興起了學習前端的熱潮，一場血雨腥風即將撒滿神州大地，PHP，js，Java，Python究竟鹿死誰手，不得而知。

為了能使三卷天書造福江湖，奪我前端霸主地位，我說說我對三卷天書的學習心得，雖然我才練到第一卷。

適合看此天書的人有兩種，門派是前端的和門派是非前端的。

你或許會疑惑，其他Python派，PHP系，Java流。。。。為什麼要學你前端的招式。前端在江湖就是招式和武器，刀、槍、劍、戟、斧，其他門派都是專修內力，不重招式。

難道你天真的以為前端只有其形，不得其神，那你錯了，天書第二卷中修鍊nodeJs,輕鬆打通任督二脈，便可修鍊絕世神功！

下面老衲將親授如何練習此功。

是的，前端是門神功，雜亂無章，尤其其中有一門JavaScript的心法，與其他門派心法背道而馳。

所以其他門派學習心法必先廢其功力再練習，否則，走火入魔，萬劫不復！當然如果劍走偏鋒，多派心法齊修，也能修成正果，就像《誅仙》中的張小凡，同時修行天音功法和青雲心法，佛、道、魔三修之大才，成為絕世高手。

所以此天書更適合無任何功力的習武之人，因為上手太容易了，一個Chrome瀏覽器，一個編輯器（sublime,notepad++........）,我們看下前端的學習曲線。

學習三個月便可到第一層，天資聰慧者九個月可到第二層，上古奇才二十七個月可到達第三層。

天書一卷

前端修鍊初期重招式不重心法，七天玩轉HTML各種標籤，七天學習HTML5各種暗器，再花七天學習CSS各種琴棋書畫，讓自己才兼文雅，學比山成。最後花七七四十九天研讀JavaScript，此時你會接觸到一些打坐修心，呼吸吐氣的的心法，之前學的都是江南七怪的雜七雜八，郭靖出去打不過誰的，只有挨打的份，只有學點全真教心法，才能攀岩走壁，套得汗血寶馬。心法中所涉及的閉包，面向對象，Dom,ajax是JavaScript心法之上乘，馬虎不得，乃前端大法根基之所在。得js者得前端，得前端者得天下！

天書二卷

習完天書一卷，你便可下山歷練，行走江湖，斬妖除魔，行俠仗義！記住，打不過就跑！你也會發現，經常打不過人家，你缺把趁手的武器，人家打架姿勢，帥得一匹，用bootstrap，foundation，打得很是漂亮，就拿拔劍的姿勢

看看人家

再看看你的姿勢（建議視頻全屏看，注意劍入鞘的姿勢）

你會發現別人不僅打架的姿勢優美，斬妖除魔的速度也是剛剛的！

原來人家用了vue或者react這樣的法寶，能夠以一敵十。當然行走江湖，要講規矩，什麼TCP，http，你得知道點，不然哪天一不小心就被道上的人做成人肉包子吃了！

當你學完vue或者react這等法寶，你就可以修鍊nodeJs心法，挑戰其他門派，告訴他們，江湖沒你們照樣轉！斬妖除魔更不在話下。

另外，某些非前端心法你也得學一學，比如Git，svn等等，這些是江湖中人一起修鍊的法器，就像學玉女心經，小龍女一個人是搞不定的，得和楊過一起修鍊！這塊安全也很重要，不然難免中間會跑出個尹志平。還有全真教那群道士練的天罡北斗陣和少林派的十八銅人都用此心法。

當你武器裝備精良，內功深厚，打遍周圍無敵手，可以好好研究研究設計模式，看看你不知道的Js上卷和中卷，下卷失傳！

天書第三卷

第二卷我已經看不懂了，我就不扯第三卷了。。。。。等我學完我再更。。。。。

嗚嗚嗚。。。。。一入前端深似海。。。。。。

我半生坎坷，卻多不由我。我欲平凡度日，卻捲入佛道之爭；我欲安心修行，卻成了妖魔邪道；我願真心對人，卻不料種錯情根，待我明白了真心待我是誰的時候……

我已經回不去了，對不對，小灰？

自學前端兩年，樓上的推薦我都基本都試過。現在已經在兩家公司實習，下一個目標是想進大公司。我發現，你想學得好，有時候不止是時間的投資，還應該包括金錢，現在好多前端培訓課程出來，亂七八糟的。我聽過一些，感覺我自學二十分鐘比他講一小時有效果。
我推薦一個樓上都沒有的，VIP視頻列表 這個是妙味課堂，我沒有參加他們的線上線下培訓，我是付費看他們的視頻，這個對我來說已經足夠了，畢竟錢也不是很多。付費意味著有質量的收穫。聽看他們部分視頻感覺還是不錯的。
有些網站為什麼我不喜歡了，就教程視頻來說。好多視頻的錄音者的發音，都帶有口音，麻煩不是人人都是你那條村的，而且清晰度也是一個問題，好多時候根本看不清楚。另外一點是關鍵，麻煩你們把講的知識點，寫下來，不要就會嘴裡說，我想記下來難度要我重新聽幾次啊？不止是PPT必須，還有寫代碼的麻煩備註一下啊，好多時候學員一下就忘記了，有更奇葩的，就是早把代碼寫好了。
最好再推薦我目前感覺最適合初學者的網站，首頁－妙味課堂www.miaov.com，推薦可以試試付費觀看教學視頻。。

我不是推銷的，，，，

從基礎到精通列舉Web前端工程師的學習路線：

HTML5、CSS、JavaScript、JQuery、Ajax是Web前端工程師的核心技術，另外，作為一個合格的前端工程師還需要熟悉互聯網交互設計能力、熟悉後端伺服器運行環境和數據通信協議、掌握響應式布局框架、Bootstrap、AngularJS等最新的JS框架技術。

基礎：HTML,、CSS學習

主要學習HTML標籤、屬性和事件，學習使用CSS來控制網頁的樣式和布局。

基礎知識點：HTML 基本格式、文本、圖像、超鏈接、表格、列表、表單、框架等；

CSS 基礎語法、框模型與背景、文本格式化、表格、顯示與定位、動畫、過渡、2D/3D 轉換、CSS 優化等。

超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染後呈現給用戶。因此，Web前端工程師必須掌握HTML的基本結構和常用標記及屬性。

HTML 的學習是一個記憶和理解的過程，在學習過程中可以藉助Dreamweaver的「拆分」視圖輔助學習。在「設計」視圖中看效果，在「代碼」視圖中學本質， 將各種視圖的優勢發揮到極致，這種對照學習的方法彌補了單純識記HTML標籤和屬性的枯燥乏味。

在學習了HTML之後，我們只是掌握了各種「原材料」的製作方法，要想蓋一幢樓房就還需要把這些「原材料」按照我們設計的方案組合布局在一起並進行一些樣式的美化。開始CSS學習。

CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以復用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。

同時CSS中的盒子模型、相對布局、絕對布局等能夠實現對網頁中各對象的位置排版進行像素級的精確控制。通過此階段的學習，我們就可以順利完成「一幢樓房」的建設。

進階：Javascript，jQuery

做HTML5開發，主要使用JS語言，所以學習JS非常有必要，必要時還要學習一些JS庫。如jQuery。

基本知識點：JS語法、函數、DOM對象、事件處理等。

JQuery：語法、選擇器、JQuery HTML操作、jQuery CSS操作、事件、元素、特效、JQuery Traversing、JQuery常用Plug-in、JQuery擴展、JQuery Mobile

JavaScript是一種在客戶端廣泛使用的腳本語言，在JavaScript當中提供了一些內置函數、對象和DOM操作，藉助這些內容可以來實現一些客戶端的特效、驗證、交互等，使頁面看起來不那麼呆板。

JavaScript的兼容性和複雜性有時候的確讓人頭疼，還好有「大神」做了封裝。

jQuery 是一個免費、開源的輕量級的JavaScript庫，並且兼容各種瀏覽器(jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支持)，同時現在有很多基於jQuery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了開發的時間，提高了開發速度，這也充分體現了其 write less,do more的核心宗旨。

高級：AJAX ，JSON ，XML

ajax是指一種創建互動式網頁應用的網頁開發技術，通過在後台與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。Ajax 的核心是 JavaScript 對象 XmlHttpRequest。

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，易於人閱讀和編寫，同時也易於機器解析和生成(網路傳輸速率)。

框架擴展學習：Bootstrap，jQuery UI，jQuery EasyUI ，jQuery Mobile

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架，並且支持響應式布局。一經推出後頗受歡迎，一直是GitHub上的熱門開源項目。

在項目開發過程中，我們可以藉助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設置，然後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發周期。

拓展：

10大H5、Js 3D遊戲引擎和框架

22款最佳JavaScript框架盤點

常用開發工具：Dreamweaver，Notepad++，Photoshop

10款Web程序員必備的在線CSS工具

Web前端工程師其他技術：

調試工具：Firebug

UI 交互設計：Photoshop設計工具、原型工具AP、互聯網UI交互設計理論

HTTP協議：伺服器端組件原理、HTTP請求（GET、POST、PUT、DELETE等）、HTTP響應、Cookie原理、Session原理、Restful協議

服務端：Java伺服器端技術簡介及Tomcat伺服器、PHP伺服器端技術簡介及Apache伺服器、.NET伺服器端技術簡介及IIS伺服器

響應式布局：使同一份代碼快速，有效適配手機，平板和PC設備。

Web前端技術剛入門時比較快，但想要精通在後續學習中速度則會降下來。因為前端工程師在工作中接觸面比較光，在知識體系上就有一定的廣度，但要成為一個有競爭力的工程師在核心技術上也要有深度，有時就牽涉到取捨的問題。另外，WEB前端技術日新月異，入了門想要有一定的發展就需要不斷的學習與調整。

附兩張Web前端工程師學習圖：

謝邀啦，裡面的大神說的沒錯～我就不再過多摻和啦。
------------
簡單說一下吧：
首先什麼是編程語言？編程語言就是人和機器溝通的需要～機器是個聽話的好夥伴，然後他有他自己的語言，而且只有學會了他的語言才能和他很好的交流，他也能夠更好地理解你，為你服務。

html是一種文本標記語言，用一個個標籤告訴瀏覽器我這裡是標題喲，可以用&標籤，我這裡是段落&

標籤。沒有什麼邏輯判斷能力，不算一門真正的編程語言。但是很重要，幫助瀏覽器理解你的每個部分是什麼東西，是一個網頁不可缺少的根基。

css是一個頁面的樣式表，比如我這個段落要用什麼顏色，什麼字型大小……相當於給頁面進行硬裝修。也相當於告訴瀏覽器指揮每個頁面元素要在哪裡站好。這個還是不算真正的狹義上的編程語言，邏輯性不強～但還是很重要，人靠衣裝，馬靠鞍～這是在給我們的網頁穿衣服，能不重要嗎！！！

js是一門腳本語言，有一定的邏輯結構～這意味著你用這門語言和機器溝通的時候，機器能夠理解更複雜的指令。比如，你可以告訴計算機說當你遇到這個情況的時候，你自己看著辦，如果是甲情況，你就去執行A指令；如果是乙情況，你就去執行B。有了語言之後，頁面就好像活了過來，頁面就能夠響應用戶的操作啦（專業術語叫做事件）。

所以說，這是前端三劍客。有一個html是一個裸體羞羞噠的網頁；有了CSS，頁面穿上了衣服，再也不用非禮勿視啦；有了js，頁面就能和人互動啦，有了一定的生氣。

綜上所述，html+css+js學習沒毛病～

--------------------
前端是一個龐而雜的學科，沒有一蹴而就的捷徑，需要學習很多很多東西，這意味著要潛心去學習，不要學著學著就懷疑人生了。

如果想功利的快速把技能變現，那麼推薦ios開發，封閉的系統環境給學習者降低了很多學習成本（(′-ω-`)不過要給蘋果錢，買設備啦，買開發者帳號啦…）

以上。。。

前端入門還是相對簡單的，畢竟算是鄙視鏈末端（實話實說，別打我）

基礎入門學習曲線還是比較平緩，所以經常有看到各種設計師來搶我們前端的飯碗 逃）


學習路線基本上還是很經典的 HTML-&>CSS-&>JavaScript這一路線，並行學習我不太推薦，畢竟這方面知識還是存在一些依賴關係。

想入門的話，看前面的答案給了一堆參考資料，我認為其實不需要這麼多；我們只要找准了主線，那些資料自己就能搜到，主線就是w3school 在線教程 ，把 HTML CSS JavaScript 部分學完就ok了。

到此差不多就算入門了。學習過程中建議多做點實際項目，如果沒有實際項目，也可以仿站。比如就用css和html把知乎的靜態ui仿出來。

不過當今前端高速發展，基礎入門已經不夠了，後面就該學點進階的東西了。

這時候建議去學學 ES6/7，教程同樣也只推薦一篇，ECMAScript 6入門 這邊在線開源電子書足夠了。

學的差不多就可以去學學 vue.js 官方教程寫的非常好，是一個非常適合學習框架。vue學好了無論是去公司做事情還是入門其他前端框架都能做到胸有成竹。

學寫程序最重要的就是動手，以上所有都建議自己動手實現。

祝題主早日入門前端，也希望我寫的答案對大家有幫助。

點贊加關注，乾貨持續分享中。

先學好計算機基礎，再來談學習前端，要不然再怎麼都是野生程序員

學習路線，先系統學，最好有人帶，然後通過項目練習提升。

1.找兩本書籍系統化學習前端知識。
我入門的時候看的是head first的HTML+CSS和javascript高級程序設計。
2.去Freecodecamp上獨立完成習題
一定要獨立！遇到不懂的地方就用讀查問大招。
3.對於一個很難的點可以去找視頻或者博客文章來看，集中精力攻克直到會為止。
4.找認識的人接活來干，不要錢都行。實在找不到活就把覺得做的不好的某個網站重新做一遍，按自己的想法。比如我就是把學校的一些網站重做了。
多讀文檔！多上github和stack overflow!

第一次在知乎回答問題，哈哈，好緊張～～～這個問題已經看了好多大神的回答，我也分享一下我這個小白學習web前端過程，當然沒有大神們那麼高效，感覺是最笨的方法，僅供參考～*^_^*

先說說我的個人情況和怎麼接觸前端。我專業測控技術與儀器，只會C語言和Linux，自學過Mysql一些基礎內容，但也有學過PLC、Labview、EDA、單片機、Matlab等編程課，不過都偏相於硬軟體相結合。九月初，一次偶然的機會，班裡的艾同學用幾句簡單的代碼，實現一個簡單的個人網頁，當時很好奇，感覺發現了什麼新鮮事物，彷彿一下子就被這技術深深吸引了，從此我開始了前端自學。

一開始學習前端技術還是比較迷茫的，首先不知道從何入手，通過查閱了大量書籍與資料，決定了先從Git開始學習,先保障自己能把作品傳到github上,這對後期提高學習興趣有很大幫助，Git我是從廖雪峰的官方網站學的，裡面有一套完整的Git教程，個人認為比較全和詳細，教你如何安裝軟體、搭建環境變數、上傳文件到庫里、克隆別人的作品、分支管理等一系列基本操作，就不做詳細說明了。

做完這一步過程，你就可以隨時分享你的源碼和參考別人優秀的源碼作品了。然後我開始了HTML、CSS的學習，我用的開發工具是HBuilder，然後開始去W3C把HTML、CSS一整套內容先快速學一遍，記得，一定要動手敲，多思考琢磨。（還有也可以去慕課網，裡面的視頻全是乾貨，老師也比較幽默，學起來也比較輕鬆，不過還是得通過多練）HTML它是簡單的標記語言，一般熟練了就能很快地使用它，就能建立起網頁的基本結構了，學完它，你就得開始學CSS了，CSS它像是一門樣式修飾語言。可以勉強算作弱類型語言，能讓HTML更美觀地呈現出來，好了，學完這兩樣你就可以做出一個靜態的主頁出來了，然後你就可以傳到github上秀秀你的小作品。學習過程一定得給自己一些動力，有好的正向的反饋，不然很難堅持下來。所以你得多動手寫代碼，建議盡自己所能寫一個簡單的個人主頁並把它弄到最好，一步步地修改完善，當你弄出一個好的主頁，那時你就會有滿滿的成就感。（這個階段沒有基礎的同學大概需要兩周時間）當然區間需要你全心投入，認真總結思考，千萬不要三天打魚兩天晒網!然後你就可以開始模仿一些作品了，百度、淘寶、京東主頁等，看看他們主頁的靜態布局自己能不能完成，重複訓練，完整地寫幾個頁面下來，大概就能熟練地運用HTML、CSS標籤了。

以上階段我大概花了一個月，因為這些階段在宿舍學，也比較懶散，所以進度也比較慢。然後這時，你如果想往這方向發展的話，得更深一步學習了。然我開始學習PS的一些內容，同樣建議去慕課網學習，能讓你短時間內了解PS前端工程師需要具備的技能，而且那講師很幽默內容也很全。然後你就要學會切圖，把UI設計師psd格式的圖片轉換成用HTML和CSS呈現出來，這時你就得深入學習DIV+CSS了，這能讓你結構更清晰，作品更有效地布局，有助於後期維護修改。

學習了以上內容，我相信你對頁面布局已經不會感到害怕了，接下來只需要去熟練，多寫代碼，爭取短時間能更快更高效地完成。接下來我就開始學習BootStrap框架，以前需要大量的代碼才能呈現出來的導航效果，現在只要添加幾個類，就能很快地呈現，珊欄系統特別好用，而且自帶媒體查詢，能很好適應屏幕大小，你需要去學習它的一些功能對應的類，重複去使用加深印象，如果你需要修改內容也可以在後面添加你想改的樣式（一般不修改原先的內容），沒錯，學習了這些內容以後，你就將學會一個很好的呈現效果的框架，我把之前寫的個人主頁用BootStrap自己去實現一遍，同時獲得了很好的效果。

中間學了幾個小技巧，iconfont字體庫、CssSprite製作、animate CSS、Sublime text3，其中我想說下Sublime text3，簡直就是開發神器，一句指令就能完成十幾句代碼，不過建議初學者還是多熟練敲代碼好，等後續真，正需要開發的時候再深入學習。為了讓頁面有動態效果，接下來我開始學了CSS3，學會了用transition、transform、animation製作一些簡單動態。接下來我就開始學JavaScript了，一些基本內容基礎還是相對簡單，不過到了後面對象、DOM、Ajax就相對費勁了，因為自己現在正處於這個階段，所以也不好分享太多心得體會，等後面再慢慢更新內容。（有人建議JavaScript一些難得內容可以先跳過，如果時間不允許的話，當然學紮實是最好的），然後就得開始學JQuery了，它是一個神奇的JS庫，JS里一些需要很長的代碼它只需幾句代碼就可實現，我也正在學習，所以也不太好說經驗總結，不過它相對原生JS效率明顯比較低，不過也能大大加快開發速率。

以上大概是我目前學習的內容，當然還有一些細節不太好分享，也求一些大神能給我點經驗，如何更好地走web這條路。同時也歡迎各位想學web前端的朋友們可以一起分享經驗，共同進步。我相信當你喜歡上了一件事，你會激發出無限的激情與動力，這就是我學前端的理由，我相信只要你喜歡的事情，肯花時間，符合實際，總歸會收穫好的成果的，加油！（經驗只供參考，歡迎各位交流，如果有不足之處，請指出，必虛心請教，本文不經同意，禁止轉載）

web前端入門看w3cshool就好了，然後找一些psd設計稿去練練，這是目前我認為最好的方法。

我目前在公司也帶人，就是通過這種方法，不出3個月，基本上pc、h5手機、響應式、edm郵件等都可以上手開始做，比市面上培訓出來的好太多了，真話。

我最近恰巧總結了一些自己一路走過來的經歷，在此分享給大家：
前端入門學習指南

覺得做什麼都需要興趣和持之以恆的心，優秀的前端的很難速成。

首先學習之後的目的是為了找到一份工作，所以前端水平只要達到了公司的要求水平就可以了。
但是不同的城市對前端的要去是完全不一樣的，因為我自己是在合肥。我就以這樣一個三線城市的互聯網公司對於前端實習生的要求來談一談。
先說說我自己的情況，我自己自學了兩個月的前端，然後去找到了一份工作。

先從企業招人的角度來說，他們肯定是希望招到厲害的前端，但是他們也知道厲害的技術很少去做前端了。
所以三線城市的公司覺得只要能夠招到網頁製作師就可以了。
什麼是網頁製作師，能夠用css布局，能夠寫一些網頁特效就可以了。
所以對於想從事前端的人來說，只要你能夠用css布局，能夠寫非常常見的網頁特效。基本上就可以試著在三線城市找前端工作了。

現在我具體說說html css JavaScript要到什麼樣的水平，就可以試著找工作了

html常見的標籤，認識，知道怎麼用就可以了。
你可以直接把一些大網站的index.html保存到本地，然後看看裡面的每一個html標籤，認識完了，基本上html水平就可以了

css能夠到仿京東首頁，做html5宣傳頁就可以了


JavaScript能夠寫輪播圖，下拉菜單這樣簡單的網頁特效就可以了。

最後一定要會的就是jquery，畢竟小公司幾乎沒有不用jquery的，能夠用jquery操作dom就行了，即使不熟練也沒有關係，去了公司再好好學習。
慢慢摸索。

現在很多小公司在廣泛的使用bootstrap，這個還是非常建議學習一下的，學習完這個之後，對於移動web的開發也就了解了很多了。

剩下的一些前端技術，自己一個人自學是比較不容易學的，因為沒有業務場景，你只能去模仿demo。自學的效果都是不太好的。
或者就是企業的需求不是很強。

自學效果不是很好的前端技術如下：ajax，JavaScript面對對象和封裝框架
，angular等mvc框架。

企業需求不強的前端技術：canvas 混合app開發 nodejs。


關於學習資料，我自己的學習資料都是在淘寶上面買一些知名培訓機構的視頻教程，只要幾塊錢就行了。
這些教程非常的系統，比自己間斷的在慕課網等一些在線平台學習要好很多。因為系統的學習是非常重要的。


最後的最後，去企業實戰是學習最好的方法。

推薦閱讀：

TAG:Web 開發 | 前端開發 | JavaScript | 前端入門 |