初級前端

主要學習三個部分：HTML，CSS，JavaScrip

（1）html + css部分

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

（2）JavaScript部分

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

jQuery學習：這些基礎知識掌握好之後，還需要學jQuery，這是一個非常優秀的Javascript庫，大型開發必備。它簡化了Javascript的複雜操作，消除了Javascript跨平臺相容問題，提供了大量實用方法，有良好的文件和幫助手冊，是一個非常成熟的Javascript庫。慕課網學習影片幕課網。學習方法也很簡單，照著產品文件做幾個頁面就行了，不用面面俱到，以後遇到問題查文件就行了。

進階學習：

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

從基本的js,html,css基礎知道打好，後面做一個實際專案功能DEMO，把理論與實際結合一下，後面離級篇可以學習一下vue等前端框架等

路線上講的話，我覺得還是要先考慮個人是否有計算機語言基礎。

如果有JAVA 或者C#等語言基礎的話，過度過來JavaScript就簡單些，起碼js語言基礎學起來要簡單些。這類同學建議可以瞭解JS初步語言邏輯和應用後，主要把CSS,HTML這些前端基礎吃透。

另一類沒有計算機語言基礎的同學，就像我，建議一定要多吃透JS，確定自己基本可以駕馭這門語言的基礎上，逐步結合HTML和CSS進行初步開發。

當然JQUERY雖說是比較老派的JS庫，但是對所有初學者來說都是必要的基礎技能，即使到了工作崗位上，很多時候也是一把鋒利的武器。

在歷經基礎開發能力的建立後，可以進一步熟悉前端三大框架，最好有所側重，建議vue是基礎，react是進階,angular先理解。

移動框架也要了解一些，比如多端混合的uniapp，reactnative,以及我要推薦的Flutter。

以上。

初級前端

主要學習三個部分：HTML，CSS，JavaScrip

（1）html + css部分

這部分特別簡單，到網上搜資料，書籍影片非常多。css中盒子模型，流動，block，inline，層疊，樣式優先順序等這些自學起來也是非常容易。

（2）typescript+vue+nodejs

用這些技術做專案

前端開發人員的地位也日益提高，相應的技術要求要是越來越高，那麼現在想成為一名合格的Web前端工程師應該怎樣學習呢Web前端學習路線圖，希望對初學者有幫助。

一、WEB基礎

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

HTML，它的作用是表示一個HTML標籤在頁面裡是個什麼角色。

CSS，它的作用是表示一塊內容以什麼樣的樣式（字型、大小、顏色、寬高等）顯示。

JS，它的作用是當用戶觸發某些行為時，會給內容和樣式帶來什麼樣的改變。

二、JQuery

學習jQuery相當於封裝一組JS外掛的JS。其目的是操作更方便，編寫更少的程式碼，jQuery條目也非常簡單。這些都是切入點，要學會像JS，只是改變了JQ程式碼。剩下的就跟百度一樣。

三、前端相關框架

JQuery / Bootstrap / Vue.js /React / Angular透過框架幫我我們快速開發程式。

學習前端開發也就這些基本的路線，不求快，只求穩，在學這門語言的時候要多練，尤其對於初學者來說，當然，前端開發是所有語言中工具是最多的一門語言，框架也多

學習一門技術，你得知道必須要學習的內容有哪些，哪些是更重要的，從淺入深瞭解一門技術，紮實的掌握住基礎的知識，才能更好的去學習和運用。

如今在整個技術領域，Web前端開發永遠站在第一線直面使用者體驗，已成為當下網際網路行業緊俏的高階技術崗位，越來越多的人想要學習Web前端，成為一名Web前端開發工程師。

看你的問題，應該也是初學者。一般來說0基礎/初學者，在學習Web前端時很容易陷入理論派以及不知道怎麼去學習，如何系統學習的一些誤區，經常是學一個階段就迷茫了，這個原因大體就是目標不明確，以及學習路線不清晰造成的。

因此，你需要明確Web前端培訓要學哪些東西，學習路線是怎麼樣的。所以你先了解學習路線是很正確的，學習還是要講究章法。

根據你的需求，安妹給你分享我們實用性高並且就業市場反饋很好的前端課程大綱。思維導圖比較大，看著不太清晰，這邊以階段的形式給你分享：

Web前端培訓學習需要哪幾個階段，從哪裡開始學，主要學什麼？以及不同階段配合要做哪些專案實戰？學習完可以實現哪些目標？

第一階段：企業級網站開發流程及規範+靜態頁面製作（html5+css3）

web應用原型製作+靜態頁面製作

·軟體開發流程

·Axure 草圖製作方法

·網頁圖片處理規範+基礎操作流程

·網頁高保真製作

·HTML+HTML5網頁基礎標籤

·CSS+CSS3從入門到實戰

·實戰：企業Axure專案高保真運用及頁面100%靜態還原

“透過本階段學習及專案實訓，你可以掌握web應用開發流程，進行網站業務以及功能分析，對Axure 、ps相關軟體進行基礎操作，完成網站高保真製作。並能根據高保真圖，利用html5+css3進行100%的頁面還原”

第二階段： Web前端核心基礎課程——Web前端原生Js+jQuery+Bootstrap

·JavaScript從基礎到進階

·ES6從基礎到專案運用

·jQuery從使用到設計思想的講解

·Bootstrap的使用及原理講解

·實戰：管理系統商業專案小組實戰訓練與考核

“透過本階段學習及專案實訓，你能夠更好地掌握原生JavaScript，強化學生JS基礎以及dom操作在實際專案中的應用場景，對專案進行響應式開發。以及jQuery和Bootstrap的應用”

第三階段： Web前端進階課程——大web前端全棧開發

·MySQL資料庫操作及正規化理論

·Node.js+Express全棧開發

·自動化構建工具與版本管理器運用（gulp、svn、git）

·less預處理語言入門到專案使用

·HTML5高階應用，canvas畫圖動畫講解

·實戰：企業pc強化課程-電商專案實戰開發

“透過本階段學習及專案實訓，你能夠掌握軟體開發流程，掌握專案自動化構建、熟練使用版本控制器管理專案，規範介面文件，理解模組化程式設計，熟練掌握資料視覺化，從前臺頁面到伺服器、資料庫進行全棧開發。”

第四階段： web前端高階框架課程——前端MVVM框架實戰

·JavaScript高階應用

·Vue.js

·實戰1：利用vue全家桶進行後臺管理專案開發

·實戰2：商業小程式專案開發與實訓

·React.js

“強化Vue框架的相關知識點及應用實踐，高達六週的實戰訓練，極度貼近企業實際應用過程中的一線技術，你可以熟練掌握mvvm前端架構，熟練掌握小程式開發流程。精通react框架及flux架構並進行webapp專案開發。”

以上是我們Web前端培訓課程的框架內容，整個課程共分為四個階段，課程週期共120天，其中專案實戰佔比高達50%以上，其中兩個月會與Java班級完成前後端合作開發大型專案，提前體驗企業級開發的團隊氛圍，在保證基礎知識夯實的基礎上，突出企業實際運用，突出真實企業專案實戰。

5個半月時間內，將透過自主以及團隊合作，完成包括完整靜態頁面、全流程電商專案、小程式專案等在內的5套實戰專案，透過大量的真實企業級專案實戰，在專案的實施中全方位提升技術能力、學習能力和解決問題的能力。

整個學習過程，只要你認真努力地學，用心完成實戰專案，找工作都是順理成章的事情。成功會眷顧每一個努力拼搏的人。

基礎知識：

HTML + CSS 這部分建議在 W3school 線上教程 上學習，邊學邊練，每章後還有小測試。 之後可以模仿一些網站做些頁面。在實踐中積累了一些經驗後，可以系統的讀一兩本書，推薦《Head First HTML 與 CSS 中文版》，這本書講的太細了，我沒能拿出耐心細讀。你可以根據情況斟酌。也可以去w3school和慕課網學習。Javascript 要學的內容實在很多，如果沒有其他程式語言的基礎的話，學起來可能要費些力，還是建議先在 W3school上學習。之後建議馬上看《Javascript語言精粹》，JS是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的程式碼就行，自己就不用嘗試了。對於有需要的小夥伴，推薦找一個培訓班或者裙進行系統學習，下文會講到呢 。有了以上基礎，就可以進行一般的靜態網頁設計，不過對於複雜的頁面還需要進一步學習。jQuery，簡單易用，W3school簡單學習js後，直接上手jQuery即可完成一些簡單的專案。學習方法也很簡單，照著產品文件做幾個頁面就行了，不用面面俱到，以後遇到問題查文件就行了。框架可以幫你遮蔽瀏覽器的差異性，讓你能更專注與Web開發學習的精髓部分。

補充： 可以使用 Codecademy 學習 Javascript，jQuery，使用者體驗真的很好傳統web從業者為什麼必須學習前端開發技能？——學習前端開發是晉升和加薪的捷徑。傳統web從業者，只要精通html+css，簡單的JS效果，切切圖，寫寫網站等就可以了，而如今的前端開發不再只是一個簡單的網站，現在越來越多的雲計算應用程式，比如web QQ接近我們經常使用的QQ的功能。以前用java J2EE、 .Net 、Object C等高階語言開發的應用程式也越來越走向web化、雲端化。 BS架構應用程式已逐漸成為主流。

首先前端相比之下確實比較好學... 另一方面，前端的需求很大，基本上所有的公司一定是要有前端程式設計師的，有很多公司現在的技術棧已經很落後了，甚至有一些公司還沒有用現在流行的框架，還在用jq，你只要會基本的HTML和css，然後學一下jq的API找到一份前端的工作是很容易的，但是工資水平就不說了。

稍微好一點的程式設計師，應該是有一定的框架專案經驗，然後對css和js的運用有一定的心得。框架已經改變了前端目前的生態，熟練使用之後前端的開發已經變得非常容易了，你需要注意類似狀態管理，生命流程管理之類的事情。另外就是類似webpack之類的工具，瞭解一下先慢慢就上手了。

然後前端經常會說全棧這種說法，js的發展趨勢非常迅猛，至少了解一下node的相關知識，這樣會對你前端工作有一定幫助。

能想起來的（其他的以後再補），html+css你要做到：

佈局(flex,grid)->樣式(css3)->CSS動畫->適配->

js方面個人

熟悉各種神奇的方法，比如：

體會js裡面萬物皆為物件的思想，瞭解原型鏈這個神經的設計，瞭解js裡面獨特的神奇的陣列。

《JavaScript語言精粹》是一本不錯的書，很薄的一本書但是內容比較有啟發性，建議可以讀一讀。

之外的，演算法一定要學的，然後瀏覽器的各種video，audio，canvas要了解的，最好深入至少一種API，一技傍身很有好處的。

綜上，看你想做什麼程度的前端程式設計師了，中間的收入差距能差一個數量級...

一定要養成良好的程式碼習慣，寫註釋。

學習路線

一、HTML、CSS基礎、JavaScript語法基礎。學完基礎後，可以仿照電商網站（例如京東、小米）做首頁的佈局。

二、JavaScript語法進階。包括：作用域和閉包、this和物件原型等。相信我，JS語法，永遠是面試中最重要的部分。

三、jQuery、Ajax等。jQuery沒有過時，它仍然是前端基礎的一部分。

四、ES6語法。這部分屬於JS新增的語法，面試必問。其中，關於 promise、async 等內容要尤其關注。

五、HTML5和CSS3。要熟悉其中的新特性。

六、canvas。面試時，有的公司不一定會問canvas，靠運氣。如果時間不夠，這部分的內容可以先不學。但如果你會，絕對屬於加分項。

七、移動Web開發、Bootstrap等。要注意移動開發中的適配

前端培訓零基礎該如何系統的學習？前端開發技術隨著網路科技的不斷髮展得到更快的更新，企業對前端開發技術人員的選擇也是非常苛刻的，並不是只懂得皮毛基礎知識就可以勝任的，企業在更多時候是需要具有豐富開發經驗和程式設計技巧的，所以小夥伴想要從事前端開發行業，就必須進行系統的學習。

對於零基礎小夥伴想要系統學習前端開發技術，比較靠譜的選擇是參加前端培訓，在培訓班不僅能系統的學習前端開發技術知識，還能在有效的時間內積累更多的專案開發經驗，那小夥伴在前端培訓班該如何系統的學習呢？

1.以前端培訓課程內容為主線，積累相關基礎知識

零基礎小夥伴由於對前端開發技術沒有太多的瞭解，在前端培訓班學習開發技術知識的時候，不要好高騖遠，要以前端培訓課程內容為主線，積累相關前端開發技術基礎知識，熟悉HTML、div+css、JavaScript等程式設計基礎，進而學習H5全棧開發技術知識。

2.重視專案實戰案例練習，積累專案實戰經驗

小夥伴在學習前端開發技術過程中，不要只注重基礎知識的學習，更重要的是企業級專案實戰案例的練習，兩者相結合的學習才能更深入的理解前端開發技術知識。前端培訓班專案案例是比較貼切於企業級專案開發實戰的，在練習過程中，小夥伴可以查缺補漏。

3.多交流，培養自身程式設計思維

閉門造車的學習是不可取的，小夥伴在學習前端開發技術知識的過程中，還需要和老師、同學進行交流，交流的過程其實是一個相互學習的過程，在交流中，小夥伴可以學習別人好的程式設計思路，融合到自己的程式設計思路中來，慢慢培養屬於自己的程式設計思維。

小夥伴在學習過程中，還需要找到適合自己的學習方法，確定自己的發展方向，針對性學習，以用為學，養成良好的學習習慣，才能在學習過程中事半功倍。尚矽谷前端培訓是一家線下面授教學，以理論實踐相結合的教學方式傳授前端開發技術知識和開發經驗，讓小夥伴在學習的過程中少走彎路，培訓班還有更多的前端影片供小夥伴下載學習！

http://www.atguigu.com/html5_video.shtml