1. 2020年Web前端自學之路指南
今天小編要跟大家分享的文章是關於2020年Web前端自學之路指南。許多人可能跟著網路上的各種教程就入了前端這行的門，但大多數都只是機械的學習著資料中的內容。俗話說，選擇要比努力重要。那麼學習開發，首先應該要有一個清晰的學習路線。希望這篇文章，能為大家在選擇未來的發展方向時提供一些參考和幫助。下面來和小編一起看一看吧！
1、基礎學習
●HTML+CSS基礎：
HTML進階、CSS進階、div+css布局、排版、html+css整站開發，樣式美化和瀏覽器兼容
●JavaScript基礎：
掌握Js基本語法、條件、語句和循環、js內置對象常用方法、ECMAscript、DOM、BOM、定時器和焦點圖，並學習增強邏輯的常用演算法，實現木馬、拖放、放大鏡等常見的網路特效。
●JavaScript高級特性：
正則表達式與JSON、正則表達式案例、JavaScript原理與庫封裝、閉包、函數節流、作用域鏈、面向對象基礎、事件與運動框架封裝
●JQuery基礎使用：
DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件的基本使用，開發復雜的交互功能和效果，並能熟悉JQuery的插件開發機制。
2、HTML5+CSS3和移動Web開發
●HTML5：
HTML5新語義標簽、HTML5表單、音頻和告早視頻、離線和本地存儲、SVG、WebSocket
●CSS3：
CSS3新選擇器、偽元素、顏色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作
●圖像學：
Canvas、Canvas游戲、數據可視化、Heighcharts.js
●Bootstrap：
響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用擾友乎模板、LESS和SASS
●移動Web開發：
跨終端WEB和主流設備簡介、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、商城頁面、滾屏
3、HTTP服務和AJAX編程
●WEB伺服器基礎：
伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹
●PHP基礎：
PHP基礎語法，使用PHP處理簡單的GET/POST請求
●AJAX上篇：
Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用
●AJAX下篇：
JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI用法、使用Ajax實現瀑布流案例
4、面向對象進階
●面向對象終極篇：
從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器
●面向對象三大特徵：
繼承性、多態性、封裝性、介面
●設計模式：
面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程
5、封裝一個屬於自己的框架
●框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框架、選擇框架
●框架封裝中級：
運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝
●框架封裝高級和補充：
JQuery框架雛形、可擴展性、模緩悉塊化
6、模塊化組件開發
●面向組件編程：
面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序
●面向模塊編程：
AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS、CommonJS、ES6Moles
7、工程化&構建、主流的框架
●Web開發工作流：
GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack、打包案例
●MVC/MVVM/MVW框架：
Vue.js、React、Angular.js、Backbone.js、Knockout/Ember、項目驅動
8、Node.js全棧開發
●快速入門：
Node.js發展、生態圈、Io.js、Linux/Windows/OS
X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試;掌握node.js全棧的解決方案和在伺服器端JS高效開發
●核心模塊和對象：
全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端、Socket.IO
●Web開發基礎：
HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。
●快速開發框架：
Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。
●資料庫：
mongoose/mongoDB、MYSQL
●Node.js開發電子商務實戰：
需求與設計、賬戶模塊注冊登錄、會員中心模塊、前台展示模塊、購物車，訂單結算、在線客服即時通訊模塊
9、微信系列
●微信公眾號
JS-SDK配置、定製菜單、回調、定製分享內容、掃一掃、地理位置、微信音頻、圖像、語音識別功能、伺服器端curl
庫、支付、卡券、微店、微信開發模式與公眾號分析、統計分析
●微信小程序
小程序項目、uni-app、mpvue
10、移動APP(Web/Native/Hybrid)
●ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API
●Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)
11、其他
●職業素養
溝通表達、團隊合作、目標管理、時間管理、心態管理
●就業指導
簡歷&投遞技巧、面試&筆試技巧
12、推薦一些編程學習網站
01、嗶哩嗶哩
這個網站如果讓我評價，可謂是上邊的視頻都是非常高質量的，你可以去搜索看一下。
02、菜鳥教程
這個網站雖然不是視頻網站，一聽名字就知道適合菜鳥的，但是基礎的知識寫的非常詳細，很清晰易懂，非常適合剛開始學習編程的小夥伴。
03、W3School
之前剛開始學WEB開發時，經常在該網站，就是結合w3school學習前端，開發時，如果遇到記不清的標簽，就去w3school搜索，平常有時間，就來慕課看前端視頻。
類似這樣的學習網站還有很多，該開始入門的話上面的網站足矣。其他的網站推薦還有騰訊課堂、實驗樓、果殼MOOC學院等、知乎、掘金......
以上就是小編今天為大家分享的關於2020年Web前端自學之路指南的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：原創前端猿前端猿指北
2. 零基礎學web前端，應該先學啥
隨著互聯網的迅速發展，前端開發工程師成為市場上非常搶手的人才。很多對於IT完全零基礎的同學都想學習前端。前端是一門涵蓋面很廣的學科。但是想學前端的你也不用慌張，內容雖多但有跡可循，只要循序漸進就不怕學不好前端！
那麼前端開發到底需要學什麼？應該怎麼學？接下來小編帶你從零基礎學習前端。
一、前端開發入門
如果你想要學好web前端最好加入一個好的學習環境，可以來這個Q群，首先是132，中間是667，最後是127，這樣大家學習的話就比較方便，還能夠共同交流和分享資料
在入門階段，你首先要學會最基本的技能：根據UI的設計稿，實現HTML的靜態頁面製作。這就要求你得掌握HTML、CSS頁面布局排版、樣式美化等技能。
在這個階段你需要學習：
1、HTML+CSS基礎
掌握HTML的標簽使用、排版技巧、CSS的布局定位、樣式美化、瀏覽器兼容性。
2、JavaScript基礎
掌握JS的基本語法、條件、語句、循環等，學會常用演算法，增強邏輯性。
3、常用的前端工具
比如Webstrom、Sublime、Dreamweaver等。掌握其快捷鍵設置等技巧，可快速提高開發調試效率。
這個階段的學習難度相對不高，學完這些之後，我們已經能完成靜態頁面的製作。當然，這只是入門，如果你想用這些技能找工作的話還是比較困難的。
二、前端初級開發
在接下來的這一個階段，我們的目標是達到前端開發行業的基本要求，讓自己有底氣出去找一份月薪8000以上的工作！
這個階段我們要重點掌握這兩方面的能力：
1、利用jQuery、Bootstrap等框架開發復雜的交互功能與效果；
2、利用HTML5、CSS3、Canvas進行移動端開發。
針對第一方面的能力，你需要學習：
1、JavaScript基本特效
能夠實現圖片輪播、拖拽、放大鏡等常見網頁特效。
2、jQuery基礎
掌握jQuery常用API的使用方法，並且能夠熟悉jQuery的插件開發機制。
3、Bootstrap響應式
掌握原生響應式實現機制，能夠使用Bootstrap中的柵格式布局和響應式布局進行復雜頁面的布局開發。
4、AJAX基礎
充分理解AJAX原理，掌握JS原生和jQuery方式的AJAX使用。
5、UI流行框架
掌握jQueryUI的使用，快速高效實現頁面的效果呈現。
學會了這些技能，你就能夠獨立製作電商類、企業類網站，實現常見JS動態效果，並且能夠基於jQuery、Bootstrap等框架實現炫酷的效果和復雜的功能啦！
針對第二個方面的移動端開發，你需要學習：
1、HTML5、CSS3新特性
掌握HTML5、CSS3在移動端的使用技巧。
2、Canvas基礎
掌握Canvas的基本畫圖API，做到能實現Canvas在報表和廣告展示效果方面的應用，並且能夠實現炫酷的展示效果。
3、移動Web框架
能夠基於jQuery Mobile/Zepto等框架進行移動端JS功能開發。
掌握這兩大方面的技能，你就能達到市場上對前端工程師的基本要求了。根據市場反饋數據看，薪資普遍在8000-13000元/月，趕快加油學習吧！
三、前端進階開發
小編就知道你是一個有理想、有抱負的人，不會滿足於做一個初級的前端開發工程師。在接下來的這個階段，我們將走上前端的進階之路，將自己的能力再往上提高一個等級。同樣，薪資也會往上升一個等級！
但是，如果你是一個前端菜鳥，接下來可能會出現一些你沒有用過或者沒有聽過的知識點。不要著急，你可以先收藏下來，在慢慢理解。
言歸正傳，在這個階段，我們要重點掌握以下兩個方面的能力：
1、在實現功能的同時，考慮代碼的優雅性，注重代碼的性能和重用性；
2、深入理解前端框架實現原理，並且能夠開發和重構通用的前端組件。
在這個階段你需要學習以下知識：
1、面向對象開發思維
2、JavaScript面向對象
3、JavaScript閉包、作用域鏈、原型鏈等高級特性
4、常用的設計模式
5、使用原生JavaScript的原理實現框架封裝
6、jQuery框架封裝原理
7、jQuery插件的實現原理
掌握jQuery插件的實現原理，深刻理解插件的兩種擴展方式的實現機制。
8. 組件化和模塊化開發：SeaJS、RequireJS
如果你熟練掌握以上技能，就能夠具備解決復雜問題和技術難點的能力，並且能夠獨立設計開發復雜的功能模塊。如果你達到這個水平，恭喜你已經能滿足前端行業的中級需求，根據市場反饋數據看，薪資普遍在 13000-20000元/月！
四、前端開發高級
寫到這里，連小編自己也激動了，因為在接下來的這個階段，我們的目標是：進軍全棧開發工程師！全棧開發工程師就是那種既精前端，又通後台，遇到問題能快速定位問題、解決問題的一類大牛！據職友集數據統計，北京全棧開發工程師月薪在20K-50K之間的佔比高達60%，而且人才非常缺乏！
要晉級為全棧開發工程師，我們在這個階段得做這些事情：
1、能從前端的全局角度認識流行框架的原理與實現模式；
2、深刻理解移動App的開發模式和技術選型；
3、熟悉Node.js的全棧式解決方案；
4、了解主流的後台技術和前後端協作方式，能從全局角度理解項目的整個生命周期。
相應的，你需要學習以下這些內容：
1、Web開發工作流框架：Yeoman/Grunt/Gulp/Bower等
掌握流行的前端工作流工具，可以讓前端開發更方便更高效！
2、MVC/MVVM框架：AngularJS等
掌握前端MVC/MVVM框架實現機制，通過AngularJS的實踐深刻理解MVC的開發模式，理解雙向數據綁定等相關概念。
3、HTML5響應式框架
4、UI流行框架：jQueryUI、EasyUI、ExtJS等
掌握常見UI框架的封裝原理，通過源碼分析，深入理解組件化開發思想。
5、VUE.js
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。
6、Ionic、Angular
掌握移動端混合開發模式，通過Ionic、Angular的結合，理解使用HTML5、CSS3、JS實現App開發的整體流程和實現機制。
7、React Native
掌握移動端ReactNative的開發模式。
8、HTML5 Plus
9、Node.js全棧式開發
掌握Node.js全棧式解決方案，實現JS在伺服器端的高效開發。
如果你能熟練掌握以上四個階段的知識技能，你就可以滿足前端與移動開發行業的高級需求啦！
3. web前端開發需要掌握的幾個必備技術
Web前端開發需要掌握的幾個必備技術是：
HTML +_CSS核心、JavaScript、VUE框架
前端的應用非常廣泛，基本網站、APP、HTML5小程序等都需要前端開發，所以只要是互聯網產品基本都需要前端。
前端程序猿切頁面寫頁面，Web上、H5上的炫酷效果，是前端開發大展身手的地方。最常見的用於前端開發的技術組合是：
HTML+CSS+JavaScript。
web前端是在開發人員中最直接面向產品、面向用戶的設計人員，一個開發團隊的成果是要靠web前端去展現，因為用戶不會去關心後台的處理有多麼強大。
後端開發是寫後台，各種業務邏輯、數據處理、模塊介面、客戶端介面等等。後端開發者通常精通於一種Web編程語言和一個資料庫管理系統。電商平台點擊篩選條件下面為你篩選出來的寶貝的功能以及付款人數數據的變化等都是由後台來實現提供的。
目前web產品交互越來越復雜，用戶使用體驗和網站前端性能優化這些都得靠web前端去做。
前端開發則是網站的前台代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。
前端開發需要學習的技術
1 掌握基本web前端開發技術：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug
2 必須掌握網站性能優化、SEO和伺服器端開發技術的基礎知識
3 必須學會運用各種web前端開發與測試工具進行輔助開發
4 除了掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等
5 未來web前端開發工程師還要研究HTML5、web視覺設計、網站配色、網站交互設計模式等相關技術
web前端有廣闊的發展空間，app、小程序、移動端、pc端等都網站是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
4. web前端技術包括哪些
web前端技術包括哪些內容？分享一份web前端的學習路線，包含每個階段需要掌握的知識點，可以參考下
1、PC端頁面製作與動畫特效
學習HTML+CSS搭建網頁、CSS動畫特效、PhotoShop切圖等基礎知識，獲得初級Web前端工程師技能，主要進行PC端網頁製作與樣式設計實現，能夠配合UI設計師進行項目開發。
2、移動端頁面製作與響應式實現
講解移動端布局與設備適配、響應式設計與實現等，獲得移動端頁面適配工程師技能，主要進行移動端網頁的布局製作與樣式設計實現。可以適配各種手機尺寸，並能利用響應式進行移動端與PC端適配。
3、JavaScript與jQuery開發
同HTML5基礎知識一樣，JavaScript開發與jQuery開發是職業晉升必備的技能包，獲得中級Web開發工程師技能，主要進行頁面行為交互，實現網站常見特效，加輪播圖，選項卡，拖拽效果等，並能配合UI和後端進行項目開發。
4、HTML5高級框架技術開發
常用的Vue框架開發，React框架開發，Angular框架開發，數據可視化技術。可獲得中級Web前端工程師技能，主要適用框架開發企業項目，實現單頁面應用開發。可以完成復雜的數據交互應用場景，具備獨立開發項目能力。
5、全棧前後端技術開發
Node.JS技術，其他後端技術，如Java或PHP。可獲得高級Web前端工程師技能，鉛顫主要進行前後端全棧樣式開發，能獨立完成一個中小型項目的前槐大敗後台，對於網站開發有著非常熟練的編程能力。
可以從零開始，一步步的掌握前端開發的各項相關技能，最終達到企業對初級前端開發工程師、中級前端開發工程師、高級開發工程師等職位的要求。
學web前端一般在2萬左右，4-6個月左右的時間。應該根據自己的實際需求去實仿碰地看一下，先好好試聽之後，再選擇適合自己的。只要努力學到真東西，前途自然不會差。
5. 零基礎學習前端的順序是什麼
下面小編給大家分享一下前端開發的學習路線
一、HTML5+CSS3：HTML5和CSS3是通往Web工程師路上必須學會的基本內容，包括HTML5語法及使用技巧、HTML5常用標簽、CSS語法及使用技巧、DIV+CSS布局方式、常見網頁布局模式等等。
二、JS交互設計：JS交互技術可以賦予頁面一個動態的效果展示，提升用戶的瀏覽體驗，包括JavaScript基本語法、DOM的各種操作、DOM編程、JavaScript常見兼容性方案、jQuery等等。
三、Node開發：Node.js不僅僅是一個框架，它是一個完整的JavaScript環境，配備了開發人員可能需要的開發工具。所以學好Node是在打通前後端開發中需要掌握的技術。這部分需要學習ES6的語法、兼容性、前端模塊化開發、Webpack模塊打包器、Node.js、JavaScript非同步編程模型、模塊化編程方式、Ajax數據交互等等。
四、前端框架：前端框架是Web開發人員需要熟練掌握的技能，並且在實際開發中是會被廣泛應用的，需要學習Vue、React、Angular等框架、D3.js、Vue技術棧進行項目開發;掌握React技術棧、Webpack項目構建配置流程、Web項目的部署與發布等等。
五、小程序與APP開發：現在移動應用越來越受歡迎，掌握了小程序和APP開發技術可以增強自身競爭力，學習內容包括Canvas、小程序開發框架mpvue、ReactNative等 。
6. 如何從頭做一個復雜的可拖拽前端頁面編輯器界面，求思路
這種軟體應該叫做組態軟體，比如微軟的Viso，而且微軟也提供了Viso的開發SDK以供開發之用， 除此，Visual Studio也還提供了一個擴展控制項，DSL專門提供這樣的開發介面。 如果這些都不能滿足你的要求的話，在C#中也有用WPF的畫布（Canvas)來實現的
7. 想做web前端的工作，應該先學什麼
一個專業的前端開發工程師是必須掌握前端開發三大基本基石HTML、CSS，JavaScript。光會這些還不夠，有了這些語言還需要各種工具的支撐，比較常見的有Dreamweaver，Sublime，HBuilder。還有FontelloFontello、Secureheaders、Visual Studio CodeVisual Studio Code。
工具只能解決一些特定問題，要解決更加全面的問題就要接觸到框架，三大基本框架有Angular、React、Vue，當然，以後還會接觸到更多Bootstrap、Fbootstrapp、BootMetro、Gumby、IVORY、Kube這樣的框架。另外，一個優秀的前端開發工程師可能還要掌握SEO、DOM、BOM、Ajax等技能，甚至，網站性能優化和伺服器端的相關基礎知識也是需要了解的。
學會這些還不夠，前端開發是一門發展的學科，不是學好了就可以停止學習，後面還會接觸到更多新的內容。
由此可見，要想學好前端，絕對不簡單，前端開發的廣度和深度是其他行業所不能比擬的，你必須付出不懈的努力，才能收獲這份果實。
