網站開發開發大致分為前端和後端，前端主要負責實現視覺和互動效果，以及與伺服器通訊，完成業務邏輯。其核心價值在於對使用者體驗的追求。可以按如下思路學習系統學習：

基礎知識：

1. html + css 這部分建議在 w3school 線上教程 上學習，邊學邊練，每章後還有小測試。 之後可以模仿一些網站做些頁面。

2. javascript 要學的內容實在很多，如果沒有其他程式語言的基礎的話，學起來可能要費些力，還是建議先在 w3school上學習。之後建議馬上看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的程式碼就行，自己就不用嘗試了。

對於習慣看影片學習的同學，以上內容也可以在 慕課網-國內最大的IT技能學習平臺 上學習。雖然我沒用過，但好幾位同學推薦過了，大概看了下，內容還不錯。 進階： 有了以上基礎，就可以進行一般的靜態網頁設計，不過對於複雜的頁面還需要進一步學習。

1. css。截至今日（2015.12.08），天貓、淘寶、支付寶都已停止對ie6,7的支援，未來相信大多數網站都會停止對ie6，7的支援，ie8的市場份額也不像兩年前那麼高了（天貓即將停止對IE8的支援，2016.12.13），webkit核心已成為市場主流。對於css的學習，

我推薦分三塊：“基礎概念”，“css2.1規範”，“css3規範”。必看 精通CSS（第2版） (豆瓣)，看完這本書你應該對：盒子模型，流動，block，inline，層疊，樣式優先順序，等概念非常瞭解了。

這本確實有些年頭了，但基礎概念部分講述非常清晰，可以稱之為經典。ie6，7相關的內容可以不看。css3的部分可以參考：CSS3實用指南 (豆瓣)。這本書同樣有些老，只是最新出版的書中沒發現有特別好的。

2. javascript。上面提到內容還不足以讓你勝任js程式設計。在有了基礎之後，進一步學習內容包括：

a) 框架。

推薦 zepto，簡單易用，在w3school簡單學習js後，直接上手 zepto 即可完成一些簡單的專案。zepto 原始碼簡單清晰，也適合新手閱讀。補充： 可以使用 codecademy 學習 javascript，zepto，使用者體驗真的很好（感謝 TonyOuyang ）。最近比較熱門的框架是React, VUE, Angular這些, 根據需要稍作了解即可。隨著ie瀏覽器市場份額的下降，以及移動端的發展，標準原生js已經可以在實際專案中使用（目前還需要藉助es5shim、babel等），重點還是ES5, ES6, ES7。

b) javascript 語言正規化 。

這個名字可能並不恰當，只是我找不到可以描述“面向物件”，“函式式”這個兩個概念的概念。javascript不完全是一個面向物件的語言，它的很多設計理念都有函式程式語言的影子，甚至說如果你不用面向物件，完全可以把它理解成一門函數語言程式設計語言。

javascript的很多語言特性，都是因為他具有函式式語言的特點才存在的。這部分推薦先學習面向物件的基本理論，對封裝，繼承，多型等概念要理解，維基百科，百度百科會是你的幫手，另外推薦《object oriented javascript》，應該有中文版。

對與函數語言程式設計可以參考這篇文章：JavaScript 中的函數語言程式設計實踐

c) javascript 語言內部機制。必須弄清如下概念：js中變數的作用域，變數傳遞方式，函式的定義環境與執行環境，閉包，函式的四種呼叫方式（一般函式，物件的方法，apply，call），以及四種呼叫方式下，‘this"指向的是誰。這部分內容你會在《javascript語言精粹》中詳細瞭解。

d) dom程式設計，這個web前端工程師的核心技能之一。必讀《dom程式設計藝術》，另外《高效能javascript》這本書中關於dom程式設計的部分講的也很好。

e) ajax程式設計，這是另一核心技術。ajax建議在網上查些資料，瞭解這個概念的來龍去脈，百度百科，維基百科上的內容就足夠了。真正程式設計是很容易的，如今幾乎所有框架都對ajax有良好的封裝，程式設計並不複雜。另外，ajax未來幾年會被 Fetch Standard 取代，也需要了解。

另外關於xhr2，cors（跨站資源共享），formData檔案上傳，也需要了解。 f) es5, es6。現在開發js大部分基於es5的，ie8以下透過es5-shim。但利用一些工具，現在已經可以直接寫es6程式碼了，尤其在reactjs，nodejs型別的專案中。

對於從es5，es6每個階段js發生了哪些變化都需要系統學習，學習順序建議是 JavaScript基礎 -> es5 -> es6，越靠前的越重要。一些參考連結：ECMAScript 5 compatibility tableECMAScript 6入門ES5 « 張鑫旭 3. html5。

需要了解html都提供了哪些api，然後專案中用起來。這部分沒有什麼難理解的，關鍵在於能用html5解決業務問題，以及不支援html5的瀏覽器的降級方案。這部分體現了前端的一個思想：面向未來程式設計，儘早將新技術引入業務中來，而不是過分考慮相容性問題，進而導致面向過去程式設計。 再進一階 · 程式碼層面： 有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的程式碼了。但要想成為更專業的前端，你還需繼續努力。

更高的要求大概還有四方面：1易維護，2可測試，3高效能，4低流量（移動端）。

1. 易維護。對於頁面你該理解‘樣式’，‘資料’，‘行為’三者分離，對應的當然就是css,html,js。對於js程式碼，你最好了解設計模式，重構，MVC等內容。

2. 可測性。就是保證你的程式碼能溝通單元測試100%覆蓋到所有分支

3. 高效能。必讀《高效能javascript》

4. 低流量。移動端關注比較多，PC端現在可以不用太關注了 再進一階 · 工程層面： 前端專案同樣面臨軟體生命週期的各個環節，首先是程式碼管理，你必須學會使用svn和git。其次是程式碼的構建，如今前端程式碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模組合併、各種編譯，必須要學會使用grunt、gulp、webpack、rollup等前端構建工具，以及前端模組管理的方式，amd，cmd，es6 module 等等。

成都朗沃web前端培訓，是西南地區首家開設web課程的培訓機構，線下培訓已有12年教學經驗，自主研發了更適合企業需求的web培訓課程，保障學員的就業問題，培訓全程小班+面授的教學模式，全日制教學，web課程老師都具備10年以上開發工作經驗!

其實沒有什麼捷徑，親自動手，一步一步來即可，不能好高騖遠。

第一步: 用 HTML + CSS 仿照幾個美麗的靜態頁面。當你看到現在大部分的網頁都覺得能大約猜到怎樣做，並且花時刻真的能做出來的時候，即可進入下一步。注意，這個時候請你不要管瀏覽器相容性或者太過注意程式碼的優雅結構，因為沒必要。做到能相容現代瀏覽器，內容和樣式基本完全分離即可。這大約需求半個月到一個月的學習時間。

第二步: 用 HTML + CSS + JS 寫幾個有互動的頁面。例如，你能夠寫一個美麗的註冊頁面，它能夠驗證各種輸入是否符合條件並且有一個用原生 JS 實現的日期選擇器（Date Picker）。或者，寫一個美麗的，有動畫的相簿。注意，這個階段請使用原生 JavaScript。相同的，相容現代瀏覽器即可。這大約需求半個月的學習時間。

第三步: 入門一門後端語言。依照你的狀況，就 php 吧。有了上面的經驗，php 入門之後，相信你能夠做一個美麗的無使用者留言版了。請把資料存貯在檔案中，因為你還沒有學習 SQL 嘛。這大約需求半個月的時間，如果你學習能力強，一個星期也不是沒有可能。

第四步: 入門一個關係資料庫。比如說 MySQL。DDL 和 CRUD ，請一定要熟練。恩，這個階段不要談什麼最佳化，那是扯淡。現在，你大約能夠做一個多使用者的部落格程式了。這大約需求半個月的時間。

首先，你必須是一個合格的“頁面仔”，這個叫法不好聽，但很生動。

我們都知道，所有呈現的內容都是基於HTML網頁的。

如果你的HTML、CSS(包括現在的HTML5+CSS3)基礎不會，或者不夠紮實，都很難在有大的進步，或者你的JS很好，但佈局基礎不行，還是不能算合格的web前端。

其次，前端主要負責實現視覺和互動功能，以及與後端伺服器通訊，完成業務邏輯。現在前端的核心價值在於對使用者體驗的極致追求。

那麼我們靠什麼來提升使用者體驗和人性化操作，讓使用者覺得體驗牛x、舒服呢?(當然細分厲害的公司，會有專門的使用者體驗攻城獅)當然是我們自始自終的主角JavaScript了，畢竟它最初就是為瀏覽器而生的指令碼語言。

然而，JS這門語言並不是一種強型別語言，更像是一種解釋型語言，所以很多屬性，在不同的瀏覽器環境解釋有很大不同導致，效果和效能千差萬別，而且很多屬性之長，之多，之巨都很有工作量。

之後，就出現了jQuery這種的框架神器，由於其好用，簡單，效果多樣，相容完美，高效率等特性，迅速席捲全世界，所以如果想入門，jQuery這個東西你是逃不掉的，而且利用它簡單的語法，你會很快將一些效果實現出來，迅速提升興趣。

再後，既然涉及到視覺和使用者體驗，那麼UI設計知識，你肯定要涉及或者懂一些設計方面的技能和基本素養，比如PS的一些基本操作，切圖，和顏色值(比如會改個字，隱藏個圖層，改個尺寸，變個顏色什麼滴)，螢幕適配方案等，講道理說：平時並不需要我們做，但技能包裡絕對要有。

最後，伺服器知識+後端語言基礎，這個職責和話題就比較hight了，到後面我們會一一解釋。

總之，web前端同樣是程式設計師，由於前端是位於後端程式和介面設計師之間的崗位，相當於中間橋樑，要完成三者的對接，涉及到廣泛的知識，規模大到工程級，也就有了前端工程師的說法(某人總結，很是到位)。

最後，學習分兩種方式

1、自學能力強、能夠堅持、遇到問題能夠自己解決若樓主是屬於這一類人，建議你可以去網上找一些資料，買一些書籍自學

2、若是自控能力和解決問題能力差點，建議還是報一個班至少有良好的學習氛圍，系統化的學習，有老師隨時解答問題。我朋友之前在中公優就業學習，現在薪資還挺不錯的，可以去了解下。

首先學習 HTML，學會寫基本的頁面。然後學習 CSS，學會美化頁面，學會佈局。然後學習 JavaScript，學會操作 HTML 元素。推薦優就業網課，講的比較詳細。

程式設計的關鍵在於多練習，學習前端非常方便的一點在於瀏覽器可以直接開啟 HTML 檔案檢視效果，HTML 檔案中引入 CSS 檔案和 JavaScript 檔案可以直接在瀏覽器檢視效果，即時反饋程式碼的效果。

熟悉了前端基礎之後，可以學習 HTML5、CSS3、jQuery 和 Bootstrap，jQuery 和 Bootstrap 是前端的兩大神器，雖然 jQuery 現在用得少了，但是學習一下還是很有必要的。Bootstrap 的應用就非常多了，很多網站的頁面佈局都是用的 Bootstrap，這個是必須學習的。

接下來可以學習 ES6 和 Node.js，現在純前端已經離不開 Node.js，很多前端工具都是需要 Node.js 來執行的，也可以向全棧發展。同時可以學習 CSS 預處理器，比如 LESS/SASS 或者 PostCSS。

接下來可以學習傳說中的前端三大框架了，建議先學習 Vue，入門更加容易一點，然後學習 React，最後學習 Angular。當然三大框架也可以不用都學。在學習使用框架的時候，自然會接觸到很多工具，比如 npm、webpack、babel 等等，這裡需要學習的東西就非常的多了。當然更需要對框架的深入學習，做到知其然並知其所以然。

報培訓班啊，而且面授的那種，不然自學先不說難度怎麼樣，就說知識點的時效性，你自學的速度一定沒有優就業課程更新的速度快，因為他們有專業的課程研發團隊，時刻對接市場上的公司用人需求

首先Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點。要想學習Web可以參考以下順序瞭解一下，

第1階段、前端核心基礎、第2階段，HTML5 + CSS3 + 移動端核心、第3階段，移動端、第4階段，伺服器端、第5階段，JavaScript高階、第6階段，前端必備、第7階段，高階框架、第8階段、小程式

在技術領域，有太多的東西會迅速的過時，如果想在這個領域長期處於不敗之地，那就一定要有好的學習方式並持之以恆，鍛鍊自己的學習能力不斷的吸收新知識，突破自己，要記得，技術永遠沒有上限。

前端初始的知識點，都不算很難，但是內容比較多，此時在學習的時候需要戒驕戒躁，一定要沉下心來， HTML為結構，CSS是樣式，JS是功能等等，梳理好清晰的知識點思維導圖，這部分內容其實並沒有想象中的那麼難。

在學習時還需要注意以下幾個方面：

1、制定一個系統的學習計劃。HTML5雖然難度不大，但是內容卻比較多，在學習的過程中要循序漸進，一個比較常見的計劃就是依次學習HTML5、CSS和JavaScript，JavaScript是學習的一個重點。一個好的學習計劃，能夠讓自己在學習的時候更加專注，每完成一天的任務，都會有一種成就感，久而久之，對於程式語言的學習就會更有興趣和動力。而且一個良好的學習計劃，會讓自己的效率提高不少。

2、實戰編寫能力是重中之重。實踐是學習HTML5的重要環節，由於HTML5的細節比較多，要想詳細的掌握這些內容一定是透過自己不斷寫程式碼來加深印象和查缺補漏的。切記程式語言是一門技術，如果沒有大量的實踐練習，是很難將HTML5中的知識點掌握的，如果瞭解了各個知識點的內容而不去練習，不用多久就會將這些知識點給忘記，到時候再去返工複習，平白會浪費不少自己的寶貴時間和精力。

3、技術想要進步，交流是很關鍵的一種途徑。交流的方式也有很多種，不一定是要和同行們透過聊天工具才算是交流。現在因為網際網路的發展和進步，我們能夠在各個搜尋引擎上找到我們想要的知識點，這些知識點就是這個行業的前輩們，將他們的學習思維或是工作時編寫程式的技巧等分享給我們。現在前端開發的技術更新速度還是比較快的，幾乎每隔一段時間就會有新的框架，我們如果不去和其他人交流，只是閉門造車的話，進步只會越來越慢，甚至還會退步。

4、前期就要養成清晰、整潔的程式碼編寫習慣。有一個良好的程式碼規範習慣，不僅方便我們自己檢測自己的程式碼，在以後的工作中也能為同項目的同事們節省出大量的時間和精力。

學習前端肯定是要分階段來學習，把每一個階段搞懂，一步一腳印，之後才能找到一份合適的工作。

第一階段：Web網頁基礎

HTML入門基本內容，CSS+DIV的基礎知識，選擇器，盒子模型，網頁佈局，Photoshop

第二階段：Web程式設計基礎

學習路線：JavaScript基礎，BOM和DOM模型，事件處理，jQuery，互動及動畫，jQuery優質外掛，文件處理，陣列和物件操作

第三階段：Web程式設計高階及全棧開發

學習路線：JavaScript高階程式設計，原型模式，jQuery外掛開發，模組化元件開，AJAX，Express(Node.js)，Mongodb，RequireJS，MongoDB

第四階段：響應式網站開發

學習路線：HTML5/CSS3，響應式原理及佈局，Bootstrap，前端依賴管理，CSS預處理語言（Less+Sass），Grunt/Gulp自動化構建工具，Angular4

第五階段：框架與專案管理

學習路線：Grunt/Gulp，Webpack模組載入器&打包工具，MVC（backbone）架構前端，VUE2，React

同樣，自制力的強弱決定了你是否能開拓自己的視野。

希望以上黑馬先鋒學院的建議能對你產生幫助。

第一，網上找一份好的教程

第二，身邊最好有一個懂的成手，最起碼在你遇到bug的時候能幫你調bug，要不然很可能就會死在一個bug上，從入門到放棄！

第三，勤奮+毅力+耐心

下面是真正的乾貨：

《初識前端與移動開發到專案開發影片》教程分享給大家

簡介：

第一階段（1-2天）

學會寫出最簡單的HTML頁面，認識什麼是HTML, HTML基本的語法規範是什麼，HTML基本骨架的組成。學習最常見的標籤，比如排版標籤，圖片標籤，連結標籤， 以及路徑的兩種方式。然後學習一些佈局標籤，比如div，span，列表， 表格 以及表單， 最後透過前面學習的標籤，完成註冊、登入頁面。雖然標籤很多，會培養大家查閱文件的能力，提高自己動手，解決問題的能力。

第二階段（3-7天）

該階段主要學習CSS樣式， 並且能完成 結構與樣式 相分離的靜態頁面佈局。學習CSS基本語法格式，書寫位置， 基本選擇器和複合選擇器，字型和文字的樣式等， 初步理解CSS如何控制網頁樣式，以及帶來的巨大優勢。 能深入理解標籤的盒子含義。

還有最重要的浮動佈局，接下來會帶領大家學習定位，包括四種定位方式及其區別，子絕父相的重要性，定位的層級關係，完成頁面常見的定位效果。

最後，會帶領大家學習一些高階技巧，包括使用者介面樣式，精靈技術， 滑動門技術等，對前面技術綜合練習。

學完該階段的課程之後，就可以把網頁美工給與的PSD效果圖還原為HTML+CSS靜態頁面，並且是實現結構與樣式相分離，標準的程式碼。

第三階段（8-9天）

學習了這麼多的基礎知識，應該聯絡一個案例了，本階段，為大家講解京東的專案

第四階段（10-12）

本帶領大家學習HTML5新增的標籤，樣式以及屬性。學習CSS3過渡、2D/3D變換，漸變、動畫以及伸縮佈局。本階段還有攜程網的小專案，透過學習專案，加深對所學知識的理解

java方向:html+css+jquery+java+ssh(spring hibernit+sttuts2) 人狠話不多，要學有點多，或者搞php方向，還要懂一兩個資料庫～所以要想做全套還是有點難，選前端或者後端吧！

學會寫出最簡單的HTML頁面，認識什麼是HTML, HTML基本的語法規範是什麼，HTML基本骨架的組成。學習最常見的標籤，比如排版標籤，圖片標籤，連結標籤， 以及路徑的兩種方式。然後學習一些佈局標籤，比如div，span，列表， 表格 以及表單， 最後透過前面學習的標籤，完成註冊、登入頁面。雖然標籤很多，會培養大家查閱文件的能力，提高自己動手，解決問題的能力。

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

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

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

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

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

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

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

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

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

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

1、寧學Java，不學web。

2、我以前就是web開發，從大學時學習HTML、CSS、JS開始，以前會這三樣就可以找到前端工作，後來web大爆發，手機端大爆發，Angular、Vue這些框架的出現，大大加深了學習的難度。這也沒什麼，認真學習一下也能正常使用。但是後面就越來越魔幻了，各種各樣五花八門的東西層出不窮。你如果換工作，有些公司的筆試面試就開始作妖，要求你講底層實現，要求你手寫底層，要求你樣樣精通。這就導致你向上跳槽很難。

3、學web入門很簡單，初級：學好HTML、CSS、JS、Jquery。中級：需要深入研究Javascript這門語言，同時學習Typescript。高階：精通angular、Vue。神級：靈活運用各種別人造好的輪子（外掛）並在不同裝置（電腦、手機、平板）、不同系統（windows、mac、iOS、Android）、上都能很好的執行，保證使用體驗的一致性。