如何才能自學Web前端？
零基礎如何系統的學習web前端開發，相信這是很多初學者都會疑慮的問題！這裡不多說廢話，直接進入正題，零基礎如何學習前端開發！
前端與移動開發學習線路圖
前端開發總的線路圖，這裡只是說了一下知識點，下面有更精準的階段學習，含配套視頻。
第一階段：
能學到什麼？會做什麼？
- 掌握 HTML 語法及使用技巧；
- 掌握 CSS 語法及使用技巧；
- 掌握 DIV+CSS 布局方式；
- 掌握常見網頁布局模式；
- 掌握 HTML5 常用標籤；
- 掌握 Photoshop 切圖以及插件切圖；
- 能夠熟練使用開發人員工具進行頁面調試；
- 能夠完成基本的動畫效果；
- 能夠根據PSD文件獨立完成靜態頁面的開發工作；
- 能夠使用CSS3新屬性美化修飾網頁。
配套視頻：
Web前端入門教程_Web前端入門視頻教程
第二階段：
能學到什麼？會做什麼？
- 掌握 HTML5 新布局標籤、多媒體標籤；
- 掌握 CSS3 2D、3D 變換、動畫效果；
- 了解移動端屏幕、移動端瀏覽器、操作系統的不同；
- 掌握常用移動端調試方法；
- 掌握常用移動端適配方法；
- 掌握 CSS 預處理器 less 的使用；
- 掌握常用移動端框架使用方法；
- 掌握常見移動端頁面開發；
- 掌握響應式布局開發；
- 掌握 Bootstrap 開發響應式頁面；
- 掌握適配不同終端的網頁開發技術選型
配套視頻：
移動web移動教程
第三階段：
能學到什麼？會做什麼？
- 能夠掌握 JavaScript 基本語法；
- 掌握常見 JavaScript 演算法；
- 掌握 DOM 的各種操作；
- 熟練使用面向對象思想進行 DOM 編程；
- 掌握 JavaScript 的高級語法；
- 熟練使用 jQuery 操作 DOM；
- 熟練使用和編寫 jQuery 插件；
- 獨立完成電商網站的頁面搭建（包括 HTML 結構、CSS 樣式、JavaScript 特效）；
- 掌握應對業務編程的能力；
- 掌握 JavaScript 常見兼容性方案；
- 掌握團隊合作開發流程。
配套視頻：
JavaScript教程_JavaScript視頻教程
JavaScript-高級面向對象視頻教程
第四階段：
能學到什麼？會做什麼？
- 能夠建立客戶端伺服器交互模型，熟悉網路通信相關概念；
- 能夠使用 Node.js 進行 Web 服務端開發；
- 能夠掌握 JavaScript 非同步編程模型；
- 能夠掌握 JavaScript 模塊化編程方式；
- 能夠使用 Node.js 操作 MySQL 資料庫；
- 能夠理解 HTTP 協議；
- 熟悉原生 Ajax 請求流程與細節，並掌握常見跨域技巧；
- 能夠基於 jQuery 的 Ajax 相關 API 熟練開發常見的前端功能；
- 能夠獨立開發基於後台介面的動態網站、Ajax 數據交互的項目；
- 能夠獨立完成企業網站從前台到後台的基本開發工作
配套視頻：
web前端教程Ajax教程
Nodejs教程精講
第五階段：
能學到什麼？會做什麼？
- 掌握使用 D3.js 進行大數據可視化交互開發；
- 能夠掌握使用 Vue 技術棧進行項目開發；
- 能夠掌握使用 React 技術棧進行項目開發；
- 能夠掌握源代碼管理工具的使用；
- 能夠熟練掌握前後端分離開發模式；
- 能夠掌握使用主流框架開發門戶網站、管理系統、移動 Web 等客戶端；
- 能夠掌握 Webpack 項目構建配置流程；
- 能夠掌握 Web 項目的部署與發布模式；
- 能夠掌握常見網站業務模塊開發。
配套視頻：
2018年Vue.js深入淺出教程
reactjs入門教程
ReactJs精品教程
第六階段：
能學到什麼？會做什麼？
- 能夠掌握小程序的開發基礎；
- 能夠獨立開發小程序項目；
- 能夠掌握 Canvas 的使用；
- 能夠掌握小遊戲開發基礎；
- 能夠獨立開發小遊戲項目；
- 能夠掌握小程序/小遊戲的部署與發布；
- 能夠掌握小程序開發框架 WePY 的使用；
- 掌握第三方 AI 平台的使用。
配套視頻：
小程序實戰開發
第七階段視頻正在抓緊時間錄製中，等有了消息，我會第一時間更新的，以上就是零基礎前端開發初學者如何系統學習了！
首先，耐得住寂寞、靜得下心是前提。然後就是要多練習，寫代碼其實是一個不斷踩坑的過程，在踩坑的過程中不斷思考。下面一些培訓機構給了很多學習路線和方法，那讓我們再來看看Github上一個8.3萬star、1.2萬fork前端路線圖是什麼樣的？
kamranahmedse（以下簡稱K）前兩年在Github上發布了一個「developer-roadmap」的項目，列舉了Web開發者需要掌握的技術和前端、後端的學習路線圖，每年都會做一些調整，到今年已經挺完善的了。由於原圖很長，可能不方便閱讀，所以我這裡將圖截成了三個部分，原圖可以在評論區查看。不過純粹當搬運工也不是我的風格，所以還是做一些簡單的說明。但在說明之前，我有必要把K的話再重複一遍：
這些學習路線圖僅僅只是讓你了解這個知識體系里有的東西，並在當你對接下來要學習的內容感到困惑時給予一些指引，而不是鼓勵你選擇流行的東西。你應該逐漸理解為什麼一個工具比另一個工具更適合某些項目，並記住流行的東西從來不意味著它就適合你的項目。
毫無疑問，前端肯定是要從HTML+CSS+JavaScript開始的，當然，學習好基礎的js就可以了。對於其他HTML部分，除了基本語法，還要學習基本的SEO（搜索引擎優化），也就是要盡量按照搜索引擎的習慣來書寫HTML代碼，以便你的代碼獲得更好的排名。CSS部分，除了基本語言，還要掌握布局和媒體查詢；當然還要學習CSS3，畢竟它擁有一系統新的特性，既能減少開發成本與維護成本，還能提高頁面性能。JS方面，除了基礎外，還要學習DOM操作、ajax、ES6、DNS、HTTP、瀏覽器如何工作等。
然後就是包管理工具npm和yarn， K認為雖然現在npm已經提高了很多，但在某些特性上仍然落後於yarn，但其實無關緊要，選擇任何一個都能滿足你的工作需要。
接下來是CSS預處理器、CSS框架等，其中CSS預處理器有SASS和LESS，理解這倆有助於你理解Bootstrap框架；K則更重SASS和PostCSS，他表示雖然LESS仍有一些市場，但是如果他從2019年開始學的話，是不會學LESS的。
以下是前端比較進階的東西了，比較構建工具、選擇框架、測試應用等。在選擇框架之前，K認為你應該對單頁面應用是如何工作的以及它們的優缺點。
最後這部分則是服務端渲染、桌面應用、移動應用等。當然，要時刻保持學習。
以上就是我對這個問題的回答，歡迎在評論區討論。
雖然我不是 web前端開發工程師，但是我會web前端，前端開發我通過自學掌握的。web前端相對容易， 雖然你沒有基礎，是個小白，但是你要對自己充滿信心，相信你很快就可以掌握。
web前端都包括什麼？三個大方向，HTML、css、JavaScript。html就不細說了，很多人都說html算不上編程語言，連個循環都寫不了。一個web頁面時三者共同努力的結果。
- 首先你需要學習html的各個標籤，掌握其用法和規範，明白其作用。
- 開始學習css的使用，你先學習在html頁面中為標籤增加css樣式，其次是將css寫在網頁的<head></head>標籤對的<style></style>標籤對中。
- 學習如何引入外部的css文件。
- 如何將css和div結合起來，css你需要學習各種效果、定位、組件設置、布局、響應式等等這部分需要你學習一段時間。
- 學習原生的css後你可以學習使用css框架，下方我列舉一些框架。
- 之後你還需要學習JavaScript，還是從基礎知識開始學習，學習的同時你可以自己開發一些插件檢驗學習成果
- 學習完基礎之後你需要學習JavaScript框架和一些js庫。
- 最後你將三者結合起來開發一個網站的前端進行練習，可以開發wordpress的主題等。或者你再學習後端語言開發一個網站。
- 關於前端學習我覺得一個網站非常好，那就是w3cschool%%%cn，裡面有個編程實戰闖關模塊，花點時間通過他會對你有很大幫助。編程實戰難度不大，我很快就通關了。
css的框架
Bootstrap—— 富有創意並且強大的移動為先的前端框架，幫助你快速開發web應用
Semantic—— 通過創造一個用來方便分享UI的語言使得開發人員和設計師的可控範圍更為廣泛。
kube—— 極簡但非常豐富的組件開發自適應或者響應式的網站。 擁有靈活的Grid和漂亮的字體排版。絕對自由，沒有多餘強制的樣式。
Less框架—— 是一個CSS的網格系統，幫助你設計自適應的網站。包含了4個布局和3套字體排版預設，所有的都基於同一個Grid。
YAML—— 是一個模塊化的CSS框架，重點在於靈活性，良好的訪問和響應式的設計。這個框架重點在於設備獨立的屏幕設計和靈活的布局模塊化管理。
js框架
AngularJS—— 有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。
React —— 是一個 Facebook 和 Instagram 用來創建用戶界面的 JavaScript 庫。
Vue.js ——是用於構建互動式的 Web 界面的庫。它提供了MVVM數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。
jQuery —— 是一個「寫的更少,但做的更多」的輕量級 JavaScript 庫。
最後加油吧，祝你早日掌握前端！！！
碼了這麼多字，點個贊關注下再走吧！！！
關注萌新程序猿（本人咯），了解更多IT以及程序猿的知識！！！
自學前端，首先要有一顆堅持到底的恆心，不會因為別的風言風語就輕易動搖自己學習的立場，有了堅持下去的恆心接下來就可以找一套比較完整的學習資料，靜下心來學習了。作為過來人，知道自學的辛苦。所以把這套前端教程分享給大家出來，就是讓想自學前端的小夥伴們有一份系統專業的學習資源和學習指導。
自學前端先要把基礎打好，剛學習的時候不要心浮氣躁，踏踏實實的學好基礎後面的內容就會迎刃而解了。
前端書籍：
書籍介紹：JavaScript是一種廣泛應用於Web前端開發的腳本語言，具有簡單、易學、易用的特點，用JavaScript開發網頁可以增強網頁的互動性，為用戶提供實時的、動態的交互體驗。
本書共分為12章，內容包括JavaScript快速入門、基本語法、數組、函數、對象、BOM、DOM、事件、正則表達式、Ajax、jQuery和網頁2048小遊戲。為了加深初學者對知識的領悟，本書在確保知識講解系統、全面的基礎上，還配備了精彩的案例，將多個知識點綜合運用。
本書適合作為高等院校本、專科計算機相關專業的教材使用，也可作為JavaScript愛好者的參考書，是一本適合廣大計算機編程愛好者學習參考的優秀讀物。
相信看完這些書的小夥伴對前端也有了一定的了解，但是企業中用的一些核心的技術還是不熟練，自己也沒有做過項目，此時可以跟著視頻自己動手操作幾個項目。
最後想奉勸各位前端的小夥伴一句，多練習多練習，一定要多練習，鍵盤敲爛，月薪過萬！！
作為一名7年經驗的資深老前端，樓上已經有很多講解了前端的一些階段的知識體系，我就不重複說了。我會在學習方法上分享下我這些年的一些心得。
方法篇：
1、保持學習力、好奇心：學習不是一個一蹴而就的過程，學習是有階段性、持續性的。在這個過程當中要充分保持自己的學習積極性和深度的思考能力，要做到充滿好奇心。學習知識不要浮於表面，要了解原理，比如用vue框架，你要知道vue的設計的思路是什麼，它的核心雙向綁定邏輯實現原理是怎樣的，框架運行流程是怎麼樣的。
2、計劃性：要有目的有計劃性的學習，比如這周的學習目標是哪個知識點，這個月是哪些知識點，知識點之間是否是循序漸進的關係。清晰的目標計劃有助於提高學習的效率。
3、實踐：學習的過程並不是看了、明白了就夠了。需要實踐加深對它的理解。每學習一個知識點要完成一個對應的實戰練習。
4、階段性總結：比如在完成一周的學習後回顧一下，看看之前做的練習或者實踐項目是否有更優的實現方式，通過這樣的方式加深理解以及擴展自己的思維能力。
5、保持對行業的關註：前端是一個更新迭代非常快速的行業，可能一個概念或者框架在一到兩年內就會出現很多的替代品。甚至出現更加前衛或優秀的思路。學習的過程除了知識的積累，另一個很重要的就是解決問題的思維，通過持續不斷了解行業發展，吸收更多新鮮優秀的思路和方法，對於擴展自己的思維及後續的項目實踐是有很大的幫助。
隨著移動互聯網的普及，市場對web前端的需求會越來越大，因此web前端的就業前景肯定是美好的。今天，知享君就此分享一些前端入門知識鏈接和學習網站。
前端入門知識前端入門教程： http://www.cnblogs.com/jikey/p/3613082.html
- 瘳雪峰的Javascript教程： http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
- 在線入門開發教程 ：http://www.hubwiz.com/course/?type="入門"jQuery
- 基礎教程： http://www.imooc.com/view/11
- 前端工程師必備的PS技能——切圖篇 ：http://www.imooc.com/view/506
- 前端入門方法 ：https://github.com/qiu-deqing/FE-learning
- 前端知識體系： http://www.cnblogs.com/sb19871023/p/3894452.html
- 前端知識結構： https://github.com/JacksonTian/fks
菜鳥教程--runoob.com
以上就是知享君想要分享的前端學習資源，足夠滿足題主全方位的學習需求。學習關鍵在實踐，建議題主邊學邊操作，祝題主早日成為前端大神！
我是「知享君」，專註效率神器推薦和知識乾貨分享，歡迎關注點贊評論轉發，你的認可就是對我最大的讚賞！
首先要了解自己的定位 如果零基礎入門那麼需要以下幾方面去學習和深造
1 html+css 布局 最起碼可以將需要的效果樣式能用html css堆起來 在這個學習階段 需要多了解w3c標準 優雅的編譯代碼 還要學習布局框架 比如bootstorp等。
2 javascript和jquery動畫 布局完成後 需要動畫也就是js將頁面動起來 特效顯示等
3 框架的學習 不管老版本的布局框架bootstorp還是這幾年大夥的vue react等框架 最起來會其中一個 當時學習這個的基礎是第二步學會的時候 在去學習 不要急於求成
4 後期學習一門後端語言 學習後端語言 是為了了解計算機底層 資料庫結構 利於以後往領導層轉移
5 因為愛 所以才去做！如果只是因為這麼行業工資高而去選擇 那麼走不久的。
都是個人碼字總結 有不對的地方 希望大家指出。
！關注頭條 前端小學生
每天都有不同前端乾貨分享
我們一起進步！
學前端要學的技術最基礎的技術有三個，html ,js ,css 其中html 和css 學起來比較簡單所以先把這兩個技術學會，我自學的時候看的是李南江老師的課，講的既幽默又不啰嗦，一節課也就十幾分鐘非常適合自學。這你可以在網易雲課堂上找到他的免費課程。提供幾個網站給你，
一、w3cschool .com.cn 上面有html 標籤用法詳細介紹。還有一些實例供你參考學習
二、菜鳥教程網，上面也有很多實例
三、慕課網上面的課程短小精悍，學起來很舒服。
第一步：HTML + CSS
前端的入門門檻極低，體現在HTML和CSS上。運行環境就是瀏覽器，推薦Chrome。你需要的一些前端工具箱，推薦Dreamwear/Sublime/Photoshop/SVN等。HTML和CSS不是編程語言，前者只是結構標籤，後者則是樣式配置，入門是非常簡單的。網上資料也有很多，剛入門查閱資料可以用w3school或者MDN（https://developer.mozilla.org/zh-CN）。
進階可以學習下：
HTML主要是學了H5的Canvas。
掌握預處理工具Sass、Less。
前端框架：Bootstrap、Foundation。
第二步：JavaScript
這是至關重要的階段。
javascript 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，還是建議先在 w3school上學習。之後建議馬上看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。
在有了基礎之後，進一步學習內容包括：
1. 簡單框架，薦先學 zepto，簡單易用
2. 複雜框架，是指 react、vue、angular 等不直接操作dom的框架。這類框架建議js基礎打紮實後再學習。
學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什麼苦。。。既然學習這麼痛苦，為什麼不快樂一點學呢？
anyway~希望大家可以成為一個優秀的前端er！
科技行者 查看官方網站 一個只談智能的信息服務平台
看了下面一堆培訓機構的回答，冠冕堂皇，內容永遠是那一套招生的宣傳詞，無語=_=。
我也是自學的前端，零基礎做前端短時間真的很難，至少自學半年以上，因為要補的知識太多了，可以先看免費視頻，一定不要先看書！！！
初學者前期的興趣一定要保持好無論學什麼，初始的興趣一定是最重要的領路人。如何維持住興趣，讓它在自學前期發揮最大作用呢。通過簡單知識入門，然後多做練習，做頁面demo，數學也不可能一上來就學複雜計算，都是從加減乘除開始。同樣的，前端先從html開始學習，用到css的地方去查著學習，css東西很多特例，專門去學效果不是很好，學習html的過程中，用到那些就去記住。前期一定不要直接上javascript，它並不是傳說中的那麼簡單，相反的水太深。
最開始一個月用視頻學習很多人上去推薦各種書，結果買回來也沒看過幾本，前期對知識沒有任何概念，系統的編程思維都沒有，遑論看書呢，書本的知識都是極其抽象的，我們應該用具體的東西來代替他，這也是培訓機構大行其道的原因，當然培訓機構魚目混雜，誤導人的太多。保持住興趣、結合視頻裡面老師的代碼講解，最重要的是看完後多敲代碼。大約一個月對前端是個什麼東西有了感性的認識，也做了不少頁面了，可以去買一本《javaScript DOM編程藝術》，這本書培訓機構永遠不會推薦你買，因為他們只為招生而推薦，但是它對自學者構建良好的前端思維很有幫助，配合《head first javascript html》更好用。
前端分為偏css和偏javascript兩種css這個方向我搞不明白，無法推薦了。javascript這個方向的話，一定要大量時間去練習，各種事件、DOM操作，此時《javascript高級程序設計》、《javascript語言精粹》發揮作用了，多思考吧。
而且前端之外的知識，基本數據結構、演算法、http知識，必須理解。這部分花時間很多，沒有速成的渠道。
如果能學到這一步，你可能會繼續自學前端了吧。
題主，加油～
推薦閱讀：