『壹』 如何才能自學Web前端
前端自學者存在的學習誤區：
1、所學東西可能已過時
奉為經典的東西可能已經過時，或者已經有了更好的替代者，而你獲取信息的渠道有限，消息滯後，導致學習的內容也相對滯後。
2、學習方法盲目。
看書看不懂就找視頻類教程學習，覺得教程跟自己的口味不符就另尋他法，因為自己缺少對資源的辨識能力，總是在沒有清晰規劃學習線路的情況就盲目學習，導致無效學習時間過長而收獲寥寥。
3、只有理論，缺乏真實項目鍛煉。
對技術的理解停留在理論層次，而缺乏真實企業項目的歷練，如果沒有相關實習或工作經歷，對前端崗位具體的責任劃分和工作流程了解不充分。
如何自學前端知識：
自學方法：
1、作為一個初學者，你必須明確系統的學習方案，我建議一定有一個指導的人，全靠自己學，放棄的幾率非常大，在你對於web前端還沒有任何概念的時候，需要一個人領進門，之後就都靠自己鑽研，第一步就是確定web前端都需要哪些內容，並且在多少時間內學完，建議時間6個月保底。
2、視頻為主，書為輔。很多初學者在學習前端的時候非常喜歡去買書，但是最後的結果是什麼？看來看去什麼都不會寫，所以在這里給大家提醒，書可以看，但是是在建立於你已經對於某個知識點有了具體操作的執行後，在用書去鞏固概念，這樣更加利於你對於知識的理解。
3、對於學習技術來講，掌握一個學習方法是非常重要的，其實對於學習web前端來講，學習方法確實很多都是相通的，一旦學習方法不對，可能就會造成「方法不對，努力白費」。其實關於這方面還是很多的，我就簡單說個例子，有的人邊聽課邊跟著敲代碼，這樣就不對，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經驗，一定要聽。根據每個人的不同，可能學習方法也會有所出路，找到適合你自己的學習法方法是學習的前提。
4、不建議自己一個人瞎學，在我了解學習編程的這些人來看，從零基礎開始學並且最後成功做這份工作的其實並沒有幾個，我覺得大部分原因就是因為他們都不了解web前端是干什麼的，學什麼的，就盲目的買書看，到處找視頻看，最後看著看著就放棄了，所以我建議初學者在沒有具體概念之前，還是找有經驗的人請教一下，聊過之後你就會知道web前端具體是干什麼的，該怎麼學，這是我個人的小建議，可以不採納。
學前端的話，書籍是必不可少的：
1、《JavaScript高級程序設計(第3版) 紅皮書 》，適合有一定編程經驗的Web應用開發人員閱讀，也可作為高校及社會實用技術培訓相關專業課程的教材。
2、《JavaScript權威指南(第6版)》 犀牛書，本書不僅適合初學者系統學習，也適合有經驗的 JavaScript 開發者隨手翻閱。
3、《JavaScript DOM編程藝術 (第2版)》，本書在簡潔明快地講述JavaScript和DOM的基本知識之後，通過幾個實例演示了專業水準的網頁開發技術，透徹闡述了平穩退化等一批至關重要的 JavaScript編程原則和最佳實踐，並全面探討了HTML5以及jQuery等JavaScript庫。
4、《CSS權威指南(第三版)》，不管你是一個有經驗的Web開發人員還是一個徹底的初學者，《CSS權威指南(第3版)》都是你的CSS學習源泉。
5、《JavaScript設計模式》，適合JavaScript初學者、前端設計者、JavaScript程序員學習，也可以作為大專院校相關專業師生的學慣用書，以及培訓學校的教材。
6、《你不知道的JavaScript(上中下卷) 》，本書既適合JavaScript語言初學者了解其精髓，又適合經驗豐富的JavaScript開發人員深入學習。
7、《Vue.js權威指南》，該書內容全面，講解細致，示例豐富，適用於各層次的開發者。
學習路線：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：NodeJS全棧開發(1周)
內容包括：(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL資料庫)
視頻教程：
網頁鏈接
『貳』 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前端工程師。
文章來源：原創前端猿前端猿指北
『叄』 Web前端工程師初級階段需要掌握的內容
今天小編給大家整理出來了Web前端工程師初級階段需要掌握的內容，很全面，希望大家好好閱讀，看看自己掌握的知識點和文章裡面寫的還相差多少。下面來和小編一起看一看吧！
一、什麼是初級Web前端工程師?
按照我的想法，我把前端工程師分為了入門、初級、中級、高級這四個級別，
入門級別指的是了解什麼是前端(前端到底是什麼其實很多人還是不清楚的)，了解基本的html、css和javascript語法(這些語方面的東西網上隨便搜一下就有很多很多，基本的語法是整個技術體系最重要的東西了，領先的
Web技術教程)，可以根據設計師的設計圖在不考慮兼容性的情況下把頁面做出來，了解過一些框架的使用(例如爛大街但是依然牛逼的jQuery、zepto、
bootstrap等等)。
在經歷過入門的階段，已經了解了前端要做什麼，並且把基本的語法學習過了可以獨立做一些簡單的頁面了，那麼就要繼續學習達到初級前端工程師的水平，對於初級的前端工程師需要了解的就特別多了，需要對整個前端有一個清晰的認識，並且熟練使用各種技術，我感覺在校的學生達到初級水平就可以通過bat的校招筆試
面試了。
初級前端工程師：首先要知道的就是如何處理各種瀏覽器的兼容處理(比如說在IE瀏覽器中的createElement有什麼不同等等內容)，現在基本上每個公司在招聘的時候都會要求熟練html5,
css3,javascript，這個熟練的意思就是信手拈來。
在下面會說初級前端工程師應該具體的學習哪些知識，然後就是要了解各種css的預處理器和後處理器，還有會使用常見前端的MV*框架(angularjs,
backbone，reactjs等等)並知道這些框架的原理，另外就是要熟練使用nodejs，要會使用基於node的各種前端構建工具
(grunt，gulp等等)，熟練使用github或gitlab，對模塊化、組件化、工程化、語義化有一個比較深入的了解，最後要知道如何開發移動端
的頁面，如何去優化一個頁面的性能。
二、初級Web前端工程師的技術體系
(一)HTML部分
首先是要掌握一些常用標簽的使用和他們的各個屬性，這些常用的標簽我總結了一下有以下這些：
html：頁面的根元素。head：頁面的頭部標簽，是所有頭部元素的容器。body：頁面的主體標簽，頁面展現的內容就放置在這裡面。title：頁面的標題。meta：位於文檔的頭部，提供頁面的元信息，包括關鍵字、描述等等。link：定義文檔與外部資源的關系，最常用的用途就是引入樣式表。script：腳本標簽，可以把js腳本代碼放置在這個標簽內，也可以使用這個標簽的src屬性引入一個外部標簽。style：樣式標簽，可以把css代碼寫在這個標簽中。a：超鏈接，href屬性代表要鏈接到的地方，target屬性代表打開方式。img：圖像標簽，src屬性表示圖片的位置。form：表單元素，它內部的input、select、textarea等標簽都是比較重要的。div：定義文檔中的分區或節，可以使用div來進行頁面的布局等操作。另外還有ul、li、p、button、iframe、p、table等標簽也很常用，nav、section、article、header、aside、footer等語義化標簽也需要了解一下。
除了要了解上面這一些標簽之外，還需要對一些新的HTML5的API有一定的了解：
·audio、video標簽。
·Canvas：定義圖形，比如圖表和其他圖像。
·input標簽的accept屬性，email、phone、url等類型。
·getElementByClassName根據class名來獲取一個元素結點。
·Multiplefileselection多文件選擇屬性。
·html的import、template
·process標簽，WebGL等內容。
還有一些要知道的知識點：
1.
doctype的作用。2.unicode、utf8等編碼的原理和區別。3.如何進行頁面性能優化。4.png、jpg、Webp、gif等圖片格式的不同的優勢。5.HTML行內元素與塊級元素的區別。6.移動Web端開發常用head標簽。7.Web語義化。8.瀏覽器中的緩存原理
(二)CSS部分
關於css這一塊，我的看法就是網上下載一個chm格式的css的參考手冊，然後根據手冊裡面寫的一個個的都敲一下。
css大體分為下面這幾塊知識點：
①定位布局
1.position屬性的7個值(static|relative|absolute|fixed|center|page|
sticky)分別有什麼作用和不同?
2.實現品字形布局或者是三欄布局(左右寬度固定，中間適應屏幕)。
3.浮動與清除浮動的方法，flex布局，grid布局。
②盒子模型
1.margin、padding、border這三個屬性。
2.伸縮盒相關內容。
3.Multi-columnLayoutMole多列布局模型。
③文本字體
1.強制換行與不換行，清除空白。
2.文本對齊、大小(如何設置chrome小於12px的字體)、縮進、轉換。
3.單位(em、rem、px等)，顏色(rgb、rgba，hls)。
④變換、過渡和動畫
1.transform的各種取值的作用與兼容性。
2.transition過渡的動畫類型，貝塞爾曲線的原理。
3.animation動畫的各種設置，@keyframes規則。
4.瀏覽器的重繪與重排。
⑤選擇器
1.選擇器的分類，權值和優先順序。
2.有哪些屬性可以被繼承，哪些屬性沒法繼承。
3.偽類和偽元素分別是什麼，有什麼作用。
上面這些都是基礎的東西，除了這些基礎的內容之外需要了解Less、Sass、stylus等css預處理器，這將會大幅度提升你的css開發效率，也需要了解一下Autoprefixer、PostCSS等css後處理器。
(三)JavaScript部分
在這里就不說js的基礎知識了，我把js按照語法的層次和使用的層次分為了兩大塊。
按照語法的層次來說：
首先是javascript的面向對象方面的內容：在javascript中實現封裝、繼承和多態。
①封裝：在js中可以通過閉包、作用域和作用域鏈來實現封裝，ES6的const、let的作用。②
繼承：基於原型鏈的繼承、基於構造函數的繼承、組合式繼承、寄生式繼承等，外加ES6的class關鍵字，prototype和__proto__。③
多態：在javascript中多態是使用arguments來實現的，關於arguments會引申出來很多內容：1.arguments的caller、callee等方法的作用。2.方法的apply和call的作用和不同。3.使用Array.prototype.slice.call來把一個數組對象轉化為數組。4.array的各種方法，如shift、splice、push、filter、map、rece、forEach等等。
然後是Js的設計模式，比如說那三種工廠模式啊，建造者模式啊等等。
最後是在不同情況下的this分別都代表什麼。
按照使用的層次來說：
首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、postMessageAPI、Websocket、伺服器代理等等。
然後是tcp協議、udt協議以及http協議的協議頭、狀態碼等內容。瀏覽器的緩存，客戶端存儲方面的內容：localstorage、sessionstorage、indexDB、cookie等等。
最後是一些新的js的API，例如文件讀取(fileReader)、fetch、Promise、Web
Sockets等等內容，可以去caniuse上面看一下有哪些新的東西。
上面我所說的這些只是一些比較籠統的概念，把前端html、css和javascript所需要掌握的部分內容列舉了一下，在前端領域還有很多需要我們知道的知識，這需要大家在學習工作的過程中去自己總結。
以上就是小編今天為大家分享的關於Web前端工程師初級階段需要掌握的內容的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端相關知識記得關注北大青鳥Web培訓官網。最後祝願小夥伴們工作順利！
『肆』 零基礎怎麼系統學Web前端
網站開發開發大致分為前端和後端，前端主要負責實現視覺和交互效果，以及與伺服器通信，完成業務邏輯。其核心價值在於對用戶體驗的追求。可以按如下思路學習系統學習：
基礎知識：
1.html + css 這部分建議在 w3school 在線教程 上學習，邊學邊練，每章後還有小測試。 之後可以模仿一些網站做些頁面。
2. javascript 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，還是建議先在 w3school上學習。之後建議馬上看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。
對於習慣看視頻學習的同學，以上內容也可以在優就業網站上學習。
進階：
有了以上基礎，就可以進行一般的靜態網頁設計，不過對於復雜的頁面還需要進一步學習。
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 mole 等等。
然後呢？以上內容只是簡單說了前端學習的順序。前端工程師應該有的知識結構請參考這里：JacksonTian/fks · GitHub
補充：
對於前段開發，基本內容就這些了，可以根據自己的興趣愛好選擇性學習以下內容。
1. 交互設計。大公司依然有專業人士搞這些，不過不懂交互的前端一定不是好前端。推薦《簡約至上》。
2. 後端。應該說前段工程師必須至少了解一門後端語言，不過如果愛好也可深入學習，入手難度比較低的應該是php了。這部分由可分為基於頁面，基於框架兩種。大型項目都是基於框架開發的，建議至少了解一個MVC框架，比如php的ci, yii, yaf 等，好還框架的設計思想都大同小異。如今NodeJs在大公司已經得到普遍的使用，推薦大家使用在Node上使用Koa框架做一些後端服務的開發。
3. Android和ios開發。時至今日，前端的工作領域已經非常廣泛，native的界面開發本質上也是前端開發，個大公司都面臨著Native環境和web環境頁面同時維護的問題，如果能夠在技術上得到統一，將會有巨大的價值。對於學有餘力的同學，應該了解Native開發的基本流程，至少了解到界面構建的技術。
4. 如果你能夠認真看到這里，說明你對前端有真愛，最後說一個編程習慣的問題，絕對是保你工作平安，少出故障。代碼提交前必須做的三個事情：A. git diff（svn diff）,檢查所有變更；B. 跑一邊單元測試；C. 手動運行一遍所有demo.
『伍』 Web 前端怎樣入門
方法：
第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。
第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。
第三：注重動手實踐能力的培養。學習前端開發一定要注重動手實踐能力的培養，因為前端開發的細節比較多，所以只有多操作才能逐漸熟悉。
前端開發目前被稱為「大前端」，整個前端開發也被賦予了更多的含義，包括Web前端開發、移動端開發、大數據呈現端開發以及部分後端開發任務等等。所以，想要在前端行業中走的更遠，一定要注重知識結構的豐富性。
與其他編程語言相比，前端是公認的入行門檻較低的一門語言，但依然有很多人在學習之前會問零基礎學習web前端難不難，要多久才能學會。學習的難易和時間當然是取決於學習的方式。
前端入門簡單，但是深入學習之後，還是有一定學習難度的。如果你是零基礎自學web前端的話，那麼所花費的時間與精力是不可估計的。 如果系統學習5個月的時間可以幫助你快速成長為合格的web前端工程師。
至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！
『陸』 web前端怎樣入門
先說一下自學前端如何入門吧。
方法：
第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。
第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。
路線：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：Node.js全棧開發(1周)
內容包括：(WebApp後端系統開發、一、Node.js基礎與Node.js核心模塊；二、Express；三、noSQL資料庫)
至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！
『柒』 給零基礎學習Web前端技術小白的學習建議
今天小編要跟大家分享的文章是關於給零基礎學習Web前端技術小白的學習建議，希望本篇文章可以幫助到更多正在學習但是又不知道從哪裡學習學習的前端的小夥伴，還有一些想要去轉行的，但是不知道不知道如何去學習，以及整個市場的情況，還有一些正在從事前端開發的小夥伴。下面來和小編一起看一看本篇文章吧。
前端開發作為一個由網頁製作演變成的新興崗位，其實在國內外來說，受到重視的時間並不長，在前幾年間技術快速的發展和其應用普及率的迅猛增長，使得前端人才市場一片盛況空前的景象，由於其的易入門性和不錯的發展前景，吸引了眾多前端愛好者和轉行人員的青睞。
首先，學習前端開發是一個漫長的過程，我覺得學習最重要就是堅持和多練。
還有一個是正確的學習方法和學習方向，如果你一開始學習方向不對，學習肯定就走了很多彎路了，而且可能一條彎路走到底，必然跟一些人的技術能力還是有一定的差距的。
我覺得學習前端，一直要抱有堅持學習的好習慣，就像吃飯睡覺一樣，這樣你個人才會有成長，可能你一兩天感覺不出什麼，但是你堅持下來，就不一樣了，因為你要知道，現在互聯網時代，技術更新迭代是比較快的，如果你不去學習新的技術和知識，自然會被市場淘汰。
想學好前端，肯定需要不斷學習和不斷練習，還有一個明確的學習方向以及規劃。
在很多人自學的過程中吧，都是網路搜索的教程，而且學習基本遇到了問題，也沒人給你解決，學習效率也是非常的低，學習的自信心也會喪失，就會產生質疑自身能力的疑問：自己是否適合從事前端開發?還是我自己比別人笨，學不會這些問題?就很容易喪失學習的自信心了。
很多人看了很多前端的教學視頻，但是依然做不好前端，也走了很多人一些學習的誤區。因為我曾經也是這樣走過來的。
學習Web前端需要注意的5點
1、耐性
拋開一切的方法和技術知識，最重要的就是你的耐性。要成為優秀的Web前端開發者，要調整好心態。
因為前有策劃設計交互，後有程序測試編輯，人容易浮躁。
2、學會延伸
一個大師說過這么一句話：對於新手來說，新技術就是新技術。
對於一個高手來說，新技術不過是舊技術的延伸。
Web前端開發技術主要包括三個要素：html、css和JavaScript!
3、系統學習html和css
Html和css相對來說比較簡單，但是仍然需要系統化學習。
通過看書以及配合前端教學視頻，這樣可以避免零散地學習前端知識點。
CSS的學習，w3cschool推薦《精通CSS》，《CSS禪意花園》，這兩本書都有非常大的影響力，值得一看。
4、深刻理解JavaScript
如果你求安逸，做一個普通的前端程序員，只要學習Javascript函數，結合相應的練習即可。
但如果想成為一名優秀的前端程序員，必須深刻去理解Javascript
的原理，機制、本源、基於對象的本質。建議多看一些開源項目，畢竟實踐出真知。
5、學一門後端語言
雖然說後端的語言實際應用很少，但是它可以幫助你全體理解前端開發問題。如HTML5中像Websockets、post
message之類的API。
可以說Web前端工程師是目前互聯網行業當中招聘需求非常大的一類，近日隨著Web前端行業的高速發展，國外的前端開發和後端開發人員佔比為1:1，但國內佔比仍然是1:3以下，Web前端開發職位目前的人才缺口達到近50萬。
對於新手小白來說學習Web前端開發，可能不知道從哪開始，總感覺無從下手，下面給Web開發者整理了一份學習建議及路線圖，想要學習前端開發的東西可以借鑒學習一下。
學習建議和學習路線
其實想要學習Web前端開發的門檻還是挺低的，
Web前端開發入門門檻低體現在html和css上，前者只是結構標簽，後者是樣式配置，入門是非常簡單的，對Web前端開發感興趣的小夥伴可以找一些相關書籍來看，或者也可以找一些相關的視頻來看，鞏固所學的知識，雖然看這些書籍或者視頻很枯燥，但是只要能啃下來你就會發現，這些確實很管用。
Web前端開發入門低的另一個重要表現就是符合8/2定律，也就是20%的東西使用率佔到80%。所以很適合囫圇吞棗，因此我們的重點就是把這20%學起來，而首先要做的就是把這20%的東西找出來。前端這20%的東西大概就是常用的html標簽，css的盒子模型，基本的原生js，以及熟練使用jquery，ajax，常見瀏覽器的兼容。拿下這些東西意義非凡，一方面證明你適合做前端這份工作，另一方面這些技能能讓你找到一份工作。
讓你能夠從容地去學習剩下的80%。總之就是專心對付重要的東西，那些什麼less、sass、angular這類的東西，當你把我之前說的基礎打好之後，學習起來暢通無阻，隨學隨用。較難的就是實踐，只有實踐才能學到真正的技術，新人很難參與一些有價值有意義的項目，沒有這些項目又很難成長，所以自己有項目可參與應該珍惜。
學習的建議給大家講了，怎麼去操作學習就大家自己看著學了，分享一下學習路線分享給大家借鑒一下。
第一階段：前端頁面重構：PC端網站布局、HTML5+CSS3基礎項目、WebAPP頁面布局;
第二階段：JavaScript高級程序設計：原生JavaScript交互功能開發、面向對象開發與ES5/ES6、JavaScript工具庫自主研發;
第三階段：PC端全棧項目開發：jQuery經典特效交互開發、HTTP協議，Ajxa進階與後端開發、前端工程化與模塊化應用、PC端網站開發、PC端管理信息系統前端開發;
第四階段：移動端WebAPP開發：Touch端項目、微信場景項目、應用vue.js開發WebApp項目、應用Ionic開發WebApp項目、應用react.js開發WebApp;
第五階段：混合(Hybrid)開發：各類混合應用開發;
第六階段：NodeJS全棧開發：WebApp後端系統開發;
第七階段：大數據可視化：數據可視化入門、D3.jS詳解及項目實戰。
以上就是小編今天為大家分享的關於給零基礎學習Web前端技術小白的學習建議的文章，希望本篇文章能夠對正在從事Web前端學習和工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：原創張_前端留學生
『捌』 Web前端小白該如何學習Web前端開發
今天小編要跟大家分享的文章是關於Web前端小白該如何學習Web前端開發。Web前端開發技術包括三個要素：HTML、CSS和JavaScript。
學習Web前端開發應該從基礎的Html開始學起，學習Html還是比較簡單的，主要是理解並記住一些常見標簽的使用，在學習的初期應該多動手敲一下代碼，這樣會加深理解。在學習完Html語法之後，需要學習CSS，CSS的內容也並不復雜，CSS主要解決Html中樣式設計的問題和復用的問題。接著應該系統的學習一下JavaScript，JavaScript語言自身還是具有一定難度的，而且JavaScript涵蓋的內容比較多，需要一個較為系統的學習過程才能逐漸掌握。
JavaScript不僅在Web前端有廣泛的應用，隨著Nodejs的普及，JavaScript正在從傳統的前端開發逐漸走向後端開發，從這個角度來說，未來JavaScript的應用空間還是非常大的。目前開源領域基於JavaScript的產品也非常多，因此不僅前端程序員需要學習JavaScript，後端程序員目前也應該學習一下JavaScript。
隨著移動互聯網的發展，前端開發不僅僅包括Web前端開發，目前Android開發、iOS開發也逐漸並入到前端開發團隊，這是一個比較顯著的變化，所以對於前端開發人員來說，如果想提升自身的崗位競爭力，應該進一步豐富自身的知識結構。
對於還未接觸過這個行業的人來說，在學習之前，心中多少會有一些疑問，比方說，零基礎學Web前端開發要學多久?下面就來和小編一起看一看吧！
1、Web前端要學什麼?
零基礎入門學Web前端的話，首先要把所有的基礎課程全部了解消化吃透，前端的開發框架，PC端的企業網站布局、PC端的電商類網站布局、移動端常見頁面布局等等。
2、零基礎學Web前端難不難?
Web前端要學的內容看起來很復雜，其實不然，這是一門注重實際動手操作的技能，不會要求你背誦很多的理論知識，更不會要求你有很高的學歷水平。零基礎學Web前端的話，要學會是不難的，只要每天堅持多動手練習，勤動腦思考，學成很簡單的。現在的Web前端工程師，薪資水平破萬，不是難事。
3、零基礎學Web前端要學多久?
這個要分兩個方面來回答大家，如果你是零基礎自學Web前端的話，那麼所花費的時間與精力會是不可估計的，學不學得成，還得兩說。如果你是找一家專業的培訓機構學習的話，那就輕松很多了，4到6個月就可以從基礎到精通
Web前端學習路線
第一階段：
1.1、HTML+CSS(HTML進階、css進階、div+css布局、html+css整站開發)
1.2、javascript基礎(js基礎教程、js內置對象常用方法、常見的dom樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖)
1.3、js基本特效(tab、導航、整頁滾動、輪播圖、js製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差試圖等)這些都是基本的js特效，我做過的也就只有輪播圖和彈出層
1.4、js高級特徵(正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎等)
1.5、jquery的基礎使用(懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、jqueryUI組件基本使用)
第二階段：HTML5和移動Web開發
2.1、HTML5:(HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas)
2.2、CSS3:(CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、Velocity.js框架、元素進場、出廠策略、炫酷css3網頁製作)
2.3、Bootstrap:(響應式概念、媒體查詢、響應式網站製作、柵格系統、柵格系統原理、Bootstrap常用模板、LESS和SASS)
2.4、移動Web開發：(跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端Javascript事件、手機中常見js效果製作、2.5、Zepto.js、手機聚劃算界面、手機滾屏)
建議其他後端編程語言也要學習一下，目前市場對前端基本都要求會一門後端語言，PHP/JAVA/Nodejs/Python等。
學習編程重要的還是實踐，多敲代碼，多去嘗試。獨立解決問題的能力、探究鑽研的精神是必不可少的。
以上就是小編今天為大家分享的關於Web前端小白該如何學習Web前端開發的文章，希望本篇文章能夠對准備學習Web前端知識的小夥伴們有所幫助，想要了解更多Web前端知識的小夥伴們記得關注北大青鳥Web培訓官網。最後祝願小夥伴們學習成功，成為一名優秀的Web前端工程師。
『玖』 Web前端學習的入門方法有哪些
今天小編要跟大家分享的文章是關於web前端學習的入門方法有哪些?web前端入門方法，總結從零基礎到具備前端基本技能的道路、學習方法、資料。由於能力有限，不能保證面面俱到，只是作為入門參考，面向初學者，讓初學者少走彎路。
互聯網的快速發展和激烈競爭，用戶體驗成為一個重要的關注點，導致專業前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工程師更是稀缺。個人感覺前端入門相對容易，但是也需要系統地認真學習，在打好基礎後堅持學習，成為優秀前端工程師也只是時間問題。
學習任何知識最重要的都是興趣，如果經過一段時間的學習感覺不喜歡，那可能強迫自己學習是很痛苦的，效果也不會好，畢竟這很可能就是以後很多年生存的技能。不過隨著互聯網行業的發展，前端必然是Web開發人員需要學習的知識，有時候是沒有專業前端工程師一起合作的，所以即使不做專門的前端工程師，掌握基本的前端技能為工作帶來方便。下面來和小編一起看一看吧!
一、必備基礎技能
以下是個人覺得入門階段應該熟練掌握的基礎技能：
§HTML4，HTML5語法、標簽、語義。
§CSS2.1，CSS3規范，與HTML結合實現各種布局、效果。
§Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作，HTML5新增功能。
§一個成熟的客戶端javascript庫，推薦jquery。
§
一門伺服器端語言：如果有伺服器端開發經驗，使用已經會的語言即可，如果沒有伺服器端開發經驗，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實現簡單登陸注冊功能就足夠支持前端開發了，後續可能需要繼續學習，最基本要求是實現簡單的功能模擬。
在掌握以上基礎技能之後，工作中遇到需要的技術也能快速學習。
二、基本開發工具
恰當的工具能有效提高學習效率，將重點放在知識本身，在出現問題時能快速定位並解決問題，以下是個人覺得必備的前端開發工具：
§文本編輯器：推薦SublimeText，支持各種插件、主題、設置，使用方便
§瀏覽器：推薦GoogleChrome，更新快，對前端各種標准提供了非常好的支持
§調試工具：推薦Chrome自帶的Chromedevelop
tools，可以輕松查看DOM結構、樣式，通過控制台輸出調試信息，調試javascript，查看網路等
§輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對比尺寸，以及前面的到的Chrome
developtools，
§FQ工具：lantern,壁虎漫步
三、學習方法和學習目標
方法：
§入門階段反復閱讀經典書籍的中文版，書籍中的每一個例子都動手實現並在瀏覽器中查看效果。
§在具備一定基礎之後可以上網搜各種教程、demo，了解各種功能的實際用法和常見功能的實現方法。
§閱讀HTML，CSS，Javascript標准全面完善知識點。
§閱讀前端牛人的博客、文章提升對知識的理解。
§善用搜索引擎。
目標：
§熟記前面知識點部分的重要概念，結合學習經歷得到自己的理解。
§熟悉常見功能的實現方法，如常見CSS布局，Tab控制項等。。
四、入門之路
在整個學習過程中HTMLCSSJavaScript會有很多地方需要互相結合，實際工作中也是這樣，一個簡單的功能模塊都需要三者結合才能實現。
動手是學習的重要組成部分，書籍重點講解知識點，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡單教程，照著教程實現功能。以下是一些比較好的教程網址
可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題(帶參考答案)。
原生javascript是需要重點掌握的技能，在掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大，這方面的書籍有《Learning
jQuery》或者去jQuery官網。
建一個https://github.com/賬號，保存平時學習中的各種代碼和項目。
有了一定基礎之後可以搭建一個個人博客，記錄學習過程中遇到的問題和解決方法，方便自己查閱也為其他人提供了幫助。
經常實用Google搜索英文資料應該經常找到來自#/的高質量答案，與到問題可以直接在這里搜索，如果有精力，注冊一個賬號為別人解答問題也能極大提高個人能力。
經典書籍熟讀之後，可以打開前面必備基礎技能部分的鏈接。認真讀對應標准，全面掌握知識。
五、繼續提高
有了前面的基礎之後，前端基本算是入門了，這時候可能每個人心中都有了一些學習方向，如果還是沒有。可以參考前面必備技能部分提到的那兩個項目，從裡面選一些進行發展學習。以下是一些不錯的方面：
§Grunt：前端自動化工具，提高工作效率
§lesscss：優秀的CSS預處理器
§bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美
§requirejs：AMD規范的模塊載入器，前端模塊化趨勢的必備工具
§Node.js：JavaScript也可以做後台，前端工程師地位更上一步
§AngularJS：做SinglePageApplication的好工具
§移動端web開發：智能手機的普及讓移動端的流量正在逐步趕超PC端
§Javascript內存管理：SPA長期運行需要注意內存泄露的問題
§HighPerformanceJavaScript()
§：重要技能
六、語言基礎
1、JavaScript：
作用域鏈、閉包、運行時上下文、this
原型鏈、繼承
NodeJS基礎和常用API
2、CSS：
選擇器
瀏覽器兼容性及常見的hack處理
CSS布局的方式和原理(盒子模型、BFC、IFC等等)
CSS3，如animation、gradient、等等
3、HTML：
語義化標簽
其他
有些東西不是考敲碼就能弄好的，我參與實習的時候感受到了很多，這些是我遇到的也是我感覺自己做的不好的地方
對於業務的思考：我個人這方面非常欠缺，所以放在最前面，在敲碼前要多思考業務
交流和溝通能力：這個非常重要，前端同時需要與項目經理、產品、交互、後台打交道，溝通不善會導致很多無用功，延緩項目。
知識管理、時間管理：input和output的平衡，output是最好的input。如何做好分享，參與社區，做好交流，作好記錄。
對新技術的渴望，以及敢於嘗試。
七、入門書
入門可以通過啃書，但書本上的東西很多都已經過時了，在啃書的同時，也要持續關注技術的新動態。這里推幾本我覺著不錯的書：
《JavaScript高級編程》：可以作為入門書籍，但同時也是高級書籍，可以快速吸收基礎，等到提升再回來重新看
《JavaScript權威指南》：不太適合入門，但是必備，不理解的地方就去查閱一下，很有幫助
《編寫可維護的JavaScript》和：
《Node.js開發指南》：不錯的Nodejs入門書籍
《深入淺出Node.js》：Nodejs進階書籍，必備
《JavaScript非同步編程》：理解JS非同步的編程理念
《JavaScript模式》和《JavaScript設計模式》：JavaScript的代碼模式和設計模式，將開發思維轉變到JavaScript，非常好的書
《JavaScript框架設計》：在用輪子同時，應當知道輪子是怎麼轉起來的，講解很詳細，從源碼級別講解框架的各個部分的實現，配合一個現有框架閱讀，可以學到很多東西
《Dontmakemethink》：網頁設計的理念，了解用戶行為，非常不錯
《CSS禪意花園》：經久不衰的一部著作，同樣傳遞了網頁設計中的理念以及設計中需要注意的問題
《高性能JavaScript》和《高性能HTML5》：強調性能的書，其中不只是性能優化，還有很多原理層面的東西值得學習
《HTML5Canvas核心技術》：我正在讀的一本書，對於canvas的使用，動畫的實現，以及動畫框架的開發都非常有幫助
《HTTP權威指南》：HTTP協議相關必備，前端開發調試的時候也會經常涉及到其中的知識
《響應式Web設計》：技術本身不難，重要的是響應式網頁的設計理念，以及移動先行的思想
《JavaScript語言精粹》：老道的書，也是普及JavaScript的開發思維的一本好書，非常適合入門
八、一些不錯的網站
github：沒啥好說的，多閱讀別人的源碼，多上傳自己的源碼，向世界各地的大牛學習
codepen：感受前端之美的必選之地，裡面有很多酷炫的效果和優秀的插件
echojs：快速了解js新資訊的網站
stackoverflow和segmentfault：基本上各種問題都能在上面獲得解答
googlewebfundamentals：每篇文章都適合仔細閱讀
staticfiles：開放的CDN，很好用
iconfont：阿里的矢量圖標庫，非常不錯，支持CDN而且支持項目
html5rocks:一個不錯的網站，很多瀏覽器的新特性以及前沿的技術，都能在這上面找到文章
csstricks：如何活用CSS，以及了解CSS新特性，這里可以滿足你
JavaScript秘密花園JavaScript初學必看，非常不錯
w3cplus：一個前端學習的網站，裡面的文章質量都挺不錯的
nodeschool：一個不錯的node學習網站
learngitbranch：一個git學習網站，交互很棒
前端亂燉：一個前端文章分享的社區，有很多優秀文章
正則表達式：一個正則表達式入門教程，非常值得一看
各路大牛的博客：這個太多了，就不貼了，知乎上有很全的
各種規范的官方網站，不懂得時候讀規范
九、前端的定位
前端的定位關乎到你需要吸收什麼樣的知識和技能，決定在技術世界裡你對什麼需要格外敏感。如果你認為前端僅僅停留在切頁面，實現交互和視覺的要求，那你對前端的認識還停留在初級階段。阿里終面的時候我問了考官這么個問題：前端技術日新月異，范圍越擴越寬，標准越來越豐富，似乎任何一個觸角都能伸出很遠。怎麼給前端一個合適的定位?考官給我分析了半天，然後總結成一句話，就是用戶和網站的聯結者，用戶體驗的創造者(原話不是這樣，但大體是這個意思)。也就是說前端的終極目標其實就是創造用戶體驗，提升用戶體驗，以用戶體驗為中心。不管你是從交互設計上下手，還是從性能優化出發，或者改進工作流提升工作流效率，最終都是為了創造和提升用戶體驗，最終都要體現到用戶體驗這一點上來。我認為這個總結非常有道理(當然「用戶體驗」這個詞太寬泛了，並且不僅僅是前端工程師的范疇，比如開發後台的時候對一個數據處理過程進行優化，提升了整體性能，這也是對用戶體驗的一個提升)。
現在的前端工程師做到一定階段不可避免會接觸到很多比切頁面、實現視覺要求、實現交互等更深入的問題，比如前端自動化、圖像編程、性能優化等等，再往後推一點就是PHP/JSP/ASP/nodeJs，過去後端模板一般屬於後端的范疇，現在隨著前端架構的演進，可能會讓你去寫後端模板的代碼，需要用到後端語言(PHP/Java/C#等)，這就是所謂大前端(然而這與前端的定位並不是相背離的，大前端處理的依然是與用戶接觸的部分，仍然是對用戶體驗的優化)。可能最常見或者被談論最多的就是node，其實這幾種技術選型都可以，bat三家據說網路用PHP比較多，阿里用node比較多。
以上就是小編今天為大家分享的關於web前端學習的入門方法有哪些的文章，希望本篇文章能夠對正准備學習web前端知識的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網最後祝願小夥伴們工作順利，學習成功。
轉載自：https://github.com/qiu-deqing/FE-learning，部分內容有刪減。
『拾』 Web前端學習要知道的學習方法及路線
今天小編要跟大家分享的文章是關於Web前端學習要知道的學習方法及路線。很多同學對於如何學習Web前端以及未來的學習和成長計劃並不是很清楚。下面就來和小編一起看一看吧！
一、學習Web前端的三要素
Web前端開發技術包括三個要素：HTML、CSS和JavaScript，但隨著RIA的流行和普及，Flash/Flex、Silverlight、XML和伺服器端語言也是前端開發工程師應該掌握的。隨著時代的發展，前端開發技術的三要素也演變成為現今的：HTML5、CSS3、Jquery。
Web前端開發工程師既要與上游的交互設計師、視覺設計師和產品經理溝通，又要與下游的伺服器端工程師溝通，需要掌握的技能非常多。這就從知識的廣度上對Web前端開發工程師提出了要求。如果要精於前端開發這一行，也許要先精十行。然而，全才總是少有的，所以，對於不太重要的知識，我們只需要「通」即可。但「通」到什麼程度才算夠用呢?對於很多初級Web前端開發工程師來說，這個問題是非常令人迷惑的。
Web前端開發的入門門檻其實非常低，與伺服器端語言先慢後快的學習曲線相比，Web前端開發的學習曲線是先快後慢。所以，對於從事IT工作的人來說，Web前端開發是個不錯的切入點。也正因為如此，Web前端開發領域有很多自學成「才」的同行，但大多數人都停留在會用的階段，因為後面的學習曲線越來越陡峭，每前進一步都很難。
另一方面，正如前面所說，Web前端開發是個非常新的職業，對一些規范和最佳實踐的研究都處於探索階段。總有新的靈感和技術不時閃現出來，例如CSS
sprite、負邊距布局、柵格布局等;各種JavaScript框架層出不窮，為整個Web前端開發領域注入了巨大的活力;瀏覽器大戰也越來越白熱化，跨瀏覽器兼容方案依然是五花八門。為了滿足「高可維護性」的需要，需要更深入、更系統地去掌握Web前端知識，這樣才可能創建一個好的Web前端架構，保證代碼的質量。
首先分享一下我的經驗，想做好一件事，必須要花費一些功夫，然後是多學、多思、多練、多交流、多總結，發現自己的問題，然後一定要克服，在狀態不好的情況下，往往要及時調整。新手學習前端的話，一定要想想為什麼要學習它，是出於一種什麼心態，然後定位好自己，多向大牛請教，多教一些沒有自己水平高的人，那樣往往能讓自己成長的快，切勿急躁。初學可以看一些入門視頻教程，之後可以買一些書，做一些小項目，要學會投資，分析自己的現狀及能力，實時調整，一定要有自己的想法，懂得創新。在這里一定要對自己做分析，然後找出一種適合的學習方法。
二、Web前端的職業發展目標該如何設置?
希望你們有一個目標，在這個目標之上，需要給自己制定一系列學習和成長計劃，制定的方法如下：
1、梳理知識架構
梳理知識架構的目的在於，要了解清楚，哪些技術是前置、哪些技術是後繼，哪些技術是深度、哪些技術是廣度，按照這兩個維度梳理好知識架構之後，才能准確地制定清晰的成長目標、高效的成長計劃。
2、分解目標
Web前端培訓小編看來目標大抵可分解為三個階段，包括：起步階段、提升階段、成型階段。這三個階段分別對應著不同的目標：起步、提升、成型階段。
三、Web前端學習路線
第一階段：
HTML+CSS:
HTML進階、CSS進階、div+css布局、HTML+css整站開發、
JavaScript基礎：
Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。
JS基本特效：
常見特效、例如：tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。
JS高級特徵：
正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎、
JQuery：基礎使用
懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。
第二階段：HTML5和移動Web開發
HTML5：
HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas.
CSS3:
CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。
Bootstrap:
響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。
移動Web開發：
跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。
第三階段：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實現爆布流案例額。
第四階段：面向對象進階
面向對象終極篇：
從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。
面向對象三大特徵：
繼承性、多態性、封裝性、介面。
設計模式：
面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。
第五階段：封裝一個屬於自己的框架
框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。
框架封裝中級：
運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。
框架封裝高級和補充：
JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。
第六階段：模塊化組件開發
面向組件編程：
面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。
面向模塊編程：
AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。
第七階段：主流的流行框架
Web開發工作流：
GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架：
Angular.js、Backbone.js、Knockout/Ember。
常用庫：
React.js、Vue.js、Zepto.js。
第八階段：HTML5原生移動應用開發
Cordova：
WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。
Ionic：
Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。
ReactNative：
ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。
HTML5+：
HTML5+中國產業聯盟、HTML5PlusRuntime環境、HBuilder開發工具、MUI框架、H5+開發和部署。
第九階段：Node.js全棧開發：
快速入門：
Node.js發展、生態圈、Io.js、Linux/Windows/OS
X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。
核心模塊和對象：
全局對象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框架。
Node.js開發電子商務實戰：
需求與設計、賬戶模塊注冊登錄、會員中心模塊、前台展示模塊、購物車，訂單結算、在線客服即時通訊模塊。
以上就是小編今天為大家分享的關於Web前端學習要知道的學習方法及路線的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！