凡是學習，都應該從基礎學起，根據我們的教學經驗，前端從HTML和CSS開始學習是最容易理解的，直觀又容易，語法都是標籤，只要記住了這些標籤的功能就可以了做出網頁了，然後再進階學習JS、jQuery，動態語言和靜態語言還是有較大的差別的。學會了這些，再去學習框架，如很經典的MVC框架等，必須清楚理解和靈活使用。

自學學基礎很簡單，但想要深入就特別困難，有老司機帶和沒有人帶學出來的技術完全是不一樣的，特別是在深度、查錯經驗、處理問題上，差別是很大的，

摘自《關於全棧工程師的二三事，學軟體技術還是要先了解》

原文：http://www.toutiao.com/i6424290623385240065

想要學習前端，第一階段就是HTML，div+css的學習。第二階段是JavaScript學習，最後學習bootstrap以及jQuery前端框架的學習。對於HTML、css、JavaScript可以在w3c網上學習，一邊學習基礎，一邊將所學用於實踐。另外Dreamweaver是靜態網頁的視覺化編輯工具，建議切換到檢視程式碼模式下，對照網頁效果學習程式碼知識。掌握了基本的知識後可以使用文字編輯器或者notepad程式碼編輯器，書寫程式碼。主要的一點就是邊學邊動手，熟能生巧對於學好web前端技術還是很有幫助的，希望早日成為web前端工程師。另外要是在學習的過程中有志同道合的學習夥伴最好，每個人有不一樣的問題，不斷的發現問題解決問題，會讓你成長更快。

我說一個付費但是靠譜的。搜尋切圖學院，裡面大概有10個實戰專案真實開發直播影片，從容易到複雜，附psd設計稿。全程都是實戰。

若能掌握裡面的所有內容，比市面上的理論授課容易找工作的多，我們公司是做前端服務的，不是做培訓的，但是期間我帶出過20多個學員，他們目前就業很好。

前端很火，想自學前端的人也多。作為過來人，知道自學的辛苦。製作這份學習路線圖的初心，就是讓想自學前端的小夥伴們有一份系統專業的學習資源和學習指導。於是，在為時將近兩個月的整理之後，就有了這份全面的前端學習資源大禮包！無論你是剛入門的小白，還是已經工作的前端開發者都能從中獲取到你想要的資料！

前端學習路線圖—流程篇：

二、前端學習路線圖—影片篇：

前端影片篇第一階段-準備篇

本階段前端課程共計5個知識點，5個免費影片涵蓋

1、週期與目標：

學習週期：15天

學完後目標：

1、熟悉媒體查詢和響應式設計，使得設計有適配不同的移動;

2、熟悉基礎CSS的格式和CSS盒模式;

3、理解網頁間是如何連結的、如何設計多列布局，可以處理表單欄位和媒體元素;

4、理解如何建立和瀏覽一個基本的網頁。

2、知識點:

1）開發工具的安裝配置的介紹

sublime、webstorm、Visual Studio Code

2）HTML

理解如何瀏覽和建立網頁、基本的語法規範、常用標籤及屬性、網頁之間的連結與跳轉、標籤節點層級節點

3）CSS

基本語法和三種書寫位置、選擇器和格式化排版、盒模型的高階用法、常用佈局模型

4）JavaScript入門

基礎語法和變數、資料型別和資料型別轉換、條件判斷、迴圈語句、函式、陣列等內建物件

5）京東首頁實戰

CSS程式碼抽象與複用、 浮動的盒子佈局、padding 和 margin 使用、層級的使用、定位特性的各種使用場景

教程下載：

前端與移動開發基礎 ：http://pan.baidu.com/s/1jIcd84e（此教程對應知識點1 2 3 5知識點）

2、CSS梅蘭商城專案實戰影片教程 http://pan.baidu.com/s/1pLlRwDl

Javascript教程：

JavaScript基礎影片教程：http://pan.baidu.com/s/1skMeNvB

JavaScript 基礎加強：http://pan.baidu.com/s/1skDXr6t

（此教程對應4知識點）

前端影片篇第二階段-基礎篇

本階段前端課程共計4個知識點，共計1個免費配套影片涵蓋

1、週期與目標：

學習週期：20天

學完後目標：

1、能夠基於jQuery實現炫酷效果和複雜的功能模組；

2、能創造或新增自定義效果到網頁上；

3、能熟練新增標準的動畫效果到網頁上；

4、熟練操作DOM模型。

2、知識點：

1）JavaScript基礎

JS語言的基本構成、變數、資料型別、表示式、選擇結構、迴圈結構、短路語句、函式基礎

2）DOM + BOM

DOM基本結構、節點物件的操作、事件特性及使用、常見的內建DOM物件、常見的BOM功能

3）網頁特效與進階

在網頁特效中常用的程式設計介面、動畫程式設計、事件物件和冒泡、緩動框架封裝和旋轉木馬案例、正則表示式及應用

4）Jquery

選擇器、基本操作API、動畫API、事件API、外掛機制、原理分析、專案實戰

推薦教程

JavaScript 基礎加強 ：http://pan.baidu.com/s/1skDXr6t （對應知識點1）

前端影片篇第三階段——核心篇

本階段前端課程共計5個知識點，合計3個免費影片涵蓋

1、週期與目標：

學習週期：20天

學完後目標：

1、能夠基於jQueryMobile/Zepto等框架進行移動端js功能開發；2、能夠熟練使用html5/css3/ canvas進行移動端頁面和功能效果開發，並且能夠基於原生和框架進行響應式效果開發；3、能夠基於jQuery、bootstrap等框架實現炫酷效果和複雜的功能模組；4、能夠獨立製作電商類，企業類網站，以及常見js動態效果。

2、知識點：

1）HTML5 + CSS3

語義化結構、多媒體 、本地儲存、其他常見API、CSS3 選擇器、CSS3 邊框、背景、陰影、CSS3 過渡和動畫、CSS3 伸縮佈局、Canvas

2）服務端程式設計

端的概念、Web 伺服器的概念、伺服器搭建、XML與JSON

3）PHP

PHP基礎語法 、PHP服務端程式設計基礎

4）AJAX

基本程式設計介面、非同步資料互動、模板引擎的使用、跨域的實現方案、增量載入

5）移動Web開發

響應式佈局、Bootstrap框架深度使用、Zepto.js庫、預編譯CSS

推薦影片：

最新H5+CSS3教程影片 ：http://pan.baidu.com/s/1eSJtHiM（此免費影片對應上述1知識點）

《年最新AJAX教程： http://pan.baidu.com/s/1qXWqpDa（此免費影片對應上述 4知識點）

《傳智前端就業班影片分享：移動web開發課程》http://pan.baidu.com/s/1cuztnw （此免費影片對應上述 5知識點）

前端影片篇第四階段——進階篇

本階段前端課程共計4個知識點，合計2個免費影片涵蓋

1、週期與目標：

學習週期：15天

學完後目標：

1、熟練使用閉包、高階函式、立即執行函式(匿名函式)等；2、熟練使用超程式設計，解決Callback等；

3、熟悉JavaScript基本語法。

2、知識點：

1）面向物件在JS中的體現與實踐

面向物件理論、物件的基本概念、物件的屬性和方法、透過字面量建立物件

2）開發過程中常用的模式與思想

開閉原則、MVC思想、高內聚低耦合、工廠模式

3）JavaScript高階特性

透過建構函式建立物件、原型物件、繼承的多種實現方式、原型鏈、函式的本質以及 Function 建構函式、作用域鏈、閉包、沙箱模式

4）封裝一個自己框架

選擇器框架、CSS操作封裝、屬性操作封裝、其他DOM操作的封裝、事件框架的封裝

影片教程推薦：

JavaScript-高階面向物件影片教程：http://pan.baidu.com/s/1o8POXKm

JavaScript高階框架設計：http://pan.baidu.com/s/1nvNjnnF

1.HTML/CSSHTML和CSS是前端Web開發的基礎。HTML：HyperText Markup Language的縮寫，是一個用來建立網頁頁面的標準標記語言。目前有HTML4.01和HTML5兩個版本。主要實現頁面結構。CSS：Cascading Style Sheets。中文簡稱：層疊樣式表。主要是呈現頁面的樣式。建立頁面的佈局，顏色、字型等內容。

2.JavaScript和jQueryJavaScript主要實現頁面的互動和透過Ajax去後臺進行資料互動。

3.CSS和JavaScript相關的框架CSS框架首選BootStrap，Javascript框架首選Angular和Vue.js。這個可以放到最後階段進行學習。http://suo.nz/2G5Ykr

4.CSS預處理器掌握原生的CSS之後，可以選擇一個CSS預處理器學習，CSS預處理器可以允許定義變數，樣式巢狀、寫方法等好處。Sass和Less，兩選一。

5.版本控制-Git和Github在邊學邊寫的過程，會積累蠻多的程式碼，需要學會使用版本控制進行程式碼管理。目前推薦學習Git，明白Git原理和相關命令。然後把自己的程式碼提交到Github（可以訪問的話），或者國內的碼雲。同時可以將自己做好的個人簡歷以Github(Gitee) Pages方式部署出來（這個後面單獨說明）。

6.響應式設計Responsive Web Design，中文翻譯為：響應式設計，或者自適應設計。可以參考阮一峰寫的部落格。http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

7.測試和除錯技能前端也需要測試。單元測試基礎，端到端測試系統交付給測試團隊必須經過的步驟。單元測試可以使用Mocha和Jasmine等框架。

前端開發語法結構簡單、容易上手，所以零基礎也是可以學習的。

前端開發主要學習三大內容，HTML、CSS、JS，這兩個內容相輔相成，最終透過程式碼的編寫呈現出大家所需要的前臺介面，其中HTML和CSS需要互相結合學習，只學習這兩個只能展現一個靜態介面，如果想要增加動態的效果就必須要學習JS，想要達到Web前端工程師的開發能力這三方面都是需要熟練掌握的。

參加培訓是比較適合初學者的，不論是從課程內容、學習模式、教學水準和其他各項服務上都是優於自學的，還有重要的一點是在學習中遇到問題都能夠得到及時的解決，對於學習的效果和熱情都是有促進作用的。

以上，四川中公優就業IT培訓為您解答~

對於初學者首先要了解的是，什麼是前端？前端是做什麼的？

前端即網站前臺的部分，通俗的講就是我們平時在瀏覽器搜尋出來的網頁都屬於前端，前端分為移動端（手機端）和PC端（電腦端）兩部分。

前端頁面又分為靜態頁面和動態頁面，在最開始時，前端頁面主要是靜態網頁，所謂的靜態網頁就是沒有與任何使用者進行互動，僅僅只是供讀者瀏覽的網頁。隨著時代的發展、技術的提升，單一的圖片和文字並不能滿足使用者的需求，動態網頁就慢慢的演變而來，所謂動態網頁是指使用者不僅僅可以瀏覽網頁，還可以與伺服器進行互動。怎麼與伺服器互動呢？比如使用者想在網站登入自己的賬戶，在登入表單中故意輸錯賬號密碼，這時客戶端（即瀏覽器）會向伺服器發起驗證請求，伺服器檢測到使用者輸入的賬號密碼不正確，則會給使用者返回“您輸入的賬號密碼不正確”標識。

前端網頁開發就如同在寫字板上畫畫，學會靈活運用紙筆，在寫字板上畫出你想要的結構佈局，顏色填充。實際上前端就是這樣，靈活運用html（結構），css（樣式），javascript（行為），就能開發出你想要的頁面。

另外對於初學者來說，還是先選擇看影片比較好，或者看一些比較基礎的書，初學者尤其是零基礎看一些理論知識，看完易忘，很有可能一合上書就忘記自己看的什麼了。而影片更能引起你的注意，也更簡單明瞭。想要一些書籍推薦，可以去我主頁裡搜“推薦九本關於HTML、CSS和js的書”。

對於學習網站，最常見的就是慕課網了吧，也向你推薦一個叫百戰程式設計師的影片課程網站。

我也贊成不要自學。很多人誤以為前端簡單而一腳踏了進去，最後發現自己不適合了。前端和後端開發只是負責不同的工作方向和內容，但是二者存在很多關聯。前端要懂的知識甚至比開發要廣，而後端則相對前端的工作內容要深入。常見的現象是後端轉前端，而很少見前端轉後端的。現在對前端的要求越來越高了，而且本身這個行業技術更新頻繁，需要不斷的跟進最新的技術，你現在選擇自學確實容易落後。但不管怎麼樣，給你一個百戰程式設計師的課程大綱作為參考吧，希望對你有幫助。

零基礎，也可以學好前端的！

首先，前提是你需要有必備的因素是良好的約束力、較強的學習能力以及學習環境。

配套課程大綱：

最後，就是要靠自己的努力了。一定要多看多練不要想著一口能吃成胖子。

首先要了解自己的定位 如果零基礎入門那麼需要以下幾方面去學習和深造

1 html+css 佈局 最起碼可以將需要的效果樣式能用html css堆起來 在這個學習階段 需要多瞭解w3c標準 優雅的編譯程式碼 還要學習佈局框架 比如bootstorp等。

2 javascript和jquery動畫 佈局完成後 需要動畫也就是js將頁面動起來 特效顯示等

3 框架的學習 不管老版本的佈局框架bootstorp還是這幾年大夥的vue react等框架 最起來會其中一個 當時學習這個的基礎是第二步學會的時候 在去學習 不要急於求成

4 後期學習一門後端語言 學習後端語言 是為了瞭解計算機底層 資料庫結構 利於以後往領導層轉移

5 因為愛 所以才去做！如果只是因為這麼行業工資高而去選擇 那麼走不久的。

都是個人碼字總結 有不對的地方 希望大家指出。

每天都有不同前端乾貨分享

我們一起進步！

1.需要裝什麼軟體

編輯器：vscode, sublime,webstorm 都可以，sublime輕量簡單些，另外兩個複雜些，但功能強大。

如果你只是寫指令碼一個編輯器就夠了，但是如果你要讓你寫的專案跑起來，還需要安裝一些伺服器類的外掛，比如git , nodejs 等

2.需要看哪些書

前端好的書籍有很多，基礎的可以分為三類：html類，css類，javascript類，高階的還有架構類，框架類，效能最佳化方面的等

一般小白可以從javascript權威指南開始看起，這是js很經典的一本書，行內人稱犀牛書。

3.學習網站和平臺

基礎的學習網站很多，比如w3school, MDN，菜鳥教程等；

影片教程網站，比如網易雲課程，51cto, 慕課網等，免費的和收費的課程都有，可以根據自己的需要考慮是否需要買；

題主你好，零基礎自學前端是可以的，學好的話還是有點難度。

首先回答你的問題：初學者在開發軟體的選擇上，可以先用Sublime，設計上可以先學會用PhotoShop。至於書籍，你最好選擇出版時間較為近的，畢竟前端開發知識隨著市場的高新需求，也在不斷的更新換代，提升中。好的網站的話可以去類似於CSDN，知乎去詢問，一般會有大佬回答。

但如果你的目的是就業。那麼我認為自學在沒有足夠的時間支援下，一定要好好斟酌。選擇線下好的培訓，也是你不二的選擇。

就像我朋友，就是為了能夠在大四期間快速學會前端以便在找工作的時候簡歷好看一些，自己能力更優一些。花了大量時間去試聽線下課程，畢竟學費較貴，需要慎重的選擇入學，他選擇了原始碼時代。因為諸多試聽課中，他覺得比較適合他的就是原始碼。培訓了5個月，現在已經畢業。目前是成都一家公司的前端開發工程師。選擇好的培訓學校至關重要，建議一定多家嘗試，貨比三家，選擇最適合你的。

前端入門的話，還是建議打好基礎，比如html,css,javascript這些，多模仿一些金典的網頁，嘗試自己寫寫頁面和互動動畫，在寫的過程中遇到問題可以多百度或者問一些有經驗的人。這樣堅持1－2個月前端基礎的話應該是沒問題的。

其次還要注重基礎理論的積累，比如css盒模型，佈局，過渡與動畫，定位這些比較常用的理論。對於javascript，要多熟悉邏輯運算的語法和陣列語法，因為很多場景下javascript都在處理邏輯。你也可以嘗試寫寫諸如輪播圖，卡片切換，拼圖等遊戲，這樣可以強化對程式碼邏輯的理解，筆者之前也寫過進階javascript的文章，也可以參考一下。

前端進階更需要懂底層的知識，比如js閉包，閉包優缺點，瀏覽器垃圾回收機制，dom更新原理及效能最佳化，原型與原型鏈，物件與繼承等，要非常瞭解。

後期想做到高階前端，可以通讀一遍javascript高階程式設計，然後瞭解基本的資料結構與演算法，比如氣泡排序，快速排序，希爾排序，連結串列與二叉樹。對主流框架如vue,react等比較熟悉並能獨立負責專案。

前端架構需要非常熟悉前端工程化的流程，比如配置前端開發工作流，如webpack，gulp，知道如何封裝團隊公共元件庫和類庫，比如使用rollup，會自動化部署，shell指令碼，pm2等知識，對git分支策略也需要有一定的認知。

這些都是慢慢積累的，筆者也是一步步走過來，發現前端技術需要不斷的嘗試和學習，堅持下來就好。在職業生涯中也要注意自身軟實力的提高，比如溝通能力，規劃能力以及遇到緊急情況的處理問題的能力。

關於怎麼自學web前端開可不可以，能不能找到工作？很人會問出這樣的問題，學技術主要還是看自身，答案沒有標準的。有基礎的人學習幾個月就能夠找到一份很好的工作，當然，並不是說零基礎就不能學好，只是要付出更多的努力。當然還得看對這個專業有沒有興趣。

不管是什麼人，把WEB前端自學成功就業的人，都可以利用專業的角度去提升自己學成WEB前端的機率。比如有專業技術有經驗的老師全程指導、比如學習企業需求的技術、比如用最專業的方法方式去學習WEB前端程式設計，這些都可以大幅度的提升機率，自己執行力高也可以提升學成WEB前端的機率。

對於零基礎的人來說，自學是需要很大的悟性和努力的。前端的學習中，HTML入門基本內容，CSS+DIV的基礎知識，選擇器，盒子模型，網頁佈局，Photoshop 等等基礎一定要掌握，框架的選擇，庫的應用，JavaScript高階程式設計做起來都比較吃力。如果能有一個系統的培訓，那麼學習起來也會輕鬆許多。自學你需要很強的資料篩選能力以及資料分析能力，還有就是自制力。如果覺得自己能力足夠，能堅持學習，那就可以選擇自學。