A. 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資料庫)
至於視頻教程,我這里有很多前端的全套教程,如果你需要的話,可以加一下我的學習交流裙裙,找我要就行了!
B. 初學者如何迅速學習web前端開發
學習web前端不怕沒喲基礎,就怕沒有方向,推薦給你web前端學習的路線圖:
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和
BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、
JavaScript函數式編程JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
web前端學習方向
這個學習的路線路你按照從上到下這個順序學習就可以的,不管是報培訓班還是自學,都是可以的,現在web前端還是有不錯的視頻,你可以根據自己的實際情況看看這些視頻,希望對你有所幫助。C. 零基礎開始學 Web 前端開發,有什麼建議嗎
一 · 前端零基礎入門
從前端基礎入門知識學起,掌握基本的HTML+CSS網頁布局,以及簡單的JS特效,最終可以獨立開發出前端PC網頁。
二 · 響應式開發與常用框架
使用H5+CSS3實現網頁動態特效,通過Bootstrap框架學習,從原生編碼過渡到框架使用,更高效的開發出適配各個設備的響應式網頁。
三 · 組件化思想開發電商網頁
學會H5進階內容:svg、canvas、H5存儲、拖拽上傳等,對JS、jQuery進行提升,學習企業開發模式——組件化開發,在企業項目團隊中協同合作,實現「高內聚、低耦合」的網頁搭建。
四 · 熱門框架Vue開發WebApp
學習JS的最新版本ES6,前端流行框架Vue.js, 結合最流行的打包工具Webpack,掌握一個項目上線前的所有開發流程,真正成為一個能夠滿足企業需求的前端工程師。
D. 零基礎怎麼系統學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.
E. 學前端,學了一個月了。現在在學js感覺聽不懂,現在越來越覺得每天都好枯燥和乏味。煩死了,該怎麼辦。
首先思考一下是否要繼續做,如果認定了那隻能靜下心來學習,只要熬過就好了!
可以做一些實例來檢驗所學的知識點,邊學邊練可能學得更快一些
F. web前端開發要怎麼學
要學前端就要想了解前端是什麼,用官方的定義,就是網站前台部分,運行在PC端,移動端等瀏覽器上展現給用戶瀏覽的網頁。
用我們的話來說,前端就是網頁給訪問網站的人看的內容和頁面,而前端開發顧名思義就是這些內容的製作,也就是代碼的實現。而要實現這些代碼,就要用到HTML,CSS及JavaScript三大基礎知識。目前看來。論趨勢如何發展,它們都是整個前端開發的三大基石。
前端學習起來知識面比較廣,知識很雜亂,可能自學起來有一定的困難,缺乏學習方向。如果要報班培訓的話,也是一個不錯的選擇,至少,你能明確自己的學習方向,遇到問題可以及時解決,不過可能要承擔昂貴的學費。
總之,無論是自學還是報班,前端的學習都是一個大工程,都需要自己多下功夫的。學無止境,付出全身心的努力,你一定能得到收獲。