前端的學習

什麼是前端

什麼是前端？大部分指的是Web前端開發，這個詞是從網頁製做演變過來的，名稱上有着很明顯的時代特徵。在互聯網的演化過程當中，網頁製做是Web1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行爲也以瀏覽爲主。在這個階段，網站的內容主要是文字內容和圖片爲主，製做方法也主要是使用表格拼裝。印象中，那時主FrontPage這樣的，畫個表格，往裏面填真圖片，文字，就叫網頁了。

2005年之後，互聯網進入了Web2.0時代,各種似桌面軟件的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁也再也不只是承載單一的文字和圖片，各類富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式爲用戶提供了更多好的使用體驗，這些都基於前端技術實現。

在這個時代，給前端冠上的名稱也多了，「作網站的」、「美工」、「網站設計師」、「切頁面的」、「前端工程師」等等。同時技術也更爲複雜化了，難度也更大了，同時技術含量也高了，那麼隨着這些變化，從事前端的人員也有一個專業的名號了「前端工程師」，收入也隨着水漲船高了。

技術發展是突飛猛進，如今業內人員開始提出Web3.0的概念。最多見的解釋是，網站內的信息能夠直接和其餘網站相關信息進行交互，能經過第三方信息平臺同時對多家網站的信息進行整合使用；用戶在互聯網上擁有本身的數據，並能在不一樣網站上使用；徹底基於Web，用瀏覽器便可實現複雜系統程序才能實現的系統功能；用戶數據審計以後，同步於網絡數據。那麼問題就來了？在Web3.0的時代，前端又是什麼呢？所謂的"前端工程師"又能作些什麼呢？又能給Web帶來什麼呢？這些都值得咱們一塊兒思考。

2016年前端開發萬象

前段時間不久，@Jose Aguinaga的一篇神文《How it feels to learn JavaScript in 2016》點燃了國內外各類社交平臺（開發者的世界）。

對於今天的前端開發，真是如此，但對於剛接觸或準備接觸這個行業的同窗，形成了很是大的困惑和阻礙。僅僅聽這些個專業術語就已經放棄吃藥治療了，更別深刻了。可能你不太相信，但事實倒是如此。

老師，想請教你一下，我是零基礎學的前端，已經有了一年不到的工做經驗，如今的前端技術層出不窮，感受有點迷茫了，但願您給指條明路。

---

大哥好 個人狀況是工做一年半一直擔任公司的前端製做工做 主要就是頁面重構方面的工做 腳本啥的通常 使用的技術相對來講不是緊跟潮流 一直想有所進步可是沒啥突破點 進步除了切圖愈來愈溜吧 感受前端的學習方向有些迷茫。

---

大漠老師，想請教您一下。我是一個大四學生，如今在公司實習，公司用的Angularjs作的單頁面應用，而後配合使用Webpack和Gulp。剛來公司一週多，感受啥也不會跟無頭蒼蠅同樣，不知道若是買老師您的課程會不會有幫助？前端之路又該怎麼走？

相似這樣的現象還有很多。在此，我也來聊聊本身對此見解。

在當今天這個時代，雖然前端更新速度快，要學的東西也很是的多，可是仔細靜下心來思考，這一切都離不開它原有的基礎知識，HTML、CSS和JavaScript。固然，前端通過這些年的發展與進化，除了須要掌握這些基礎以外，還要面對工做流，面對工程化。也只有掌握這些才能對得住工程師這個頭銜。

但是對於初學者或者剛入門的同窗而言，始終都要不斷的靜下來提醒本身：

• 我在學什麼？
• 我學會了什麼？
• 我爲何要學這些？
• 我還須要學什麼？

只有每次能準確回答這些問題，你纔不會在這樣的浪潮中迷失本身，迷失方向。

說到這裏，可能會有不少人要噴我了，其實噴我也是對的，由於這僅僅是我本身的見解，並不能表明一切。可話說回來，你若是不能準確無誤回答這些問題，你能確認你如今作的就是你須要的？若是不是，那又將如何？

若是你是剛剛接觸或準備入前端行業，我更建議您先靜下來思考，認真仔細的回答：

• 我能作什麼？
• 我不能作什麼？
• 個人優點是什麼？
• 個人劣勢是什麼？
• 作前端對我有何好處？
• 作前端我要付出何種代價？
• 我能不能堅持作下去？

若是你不能好好的，清楚的回答這些問題，我建議你仍是不要輕意轉行作前端。

如何學習前端？

學習對於每個人都有本身獨特的方式，我也不另外。在此我不能說個人學習方法就是好的，我只是想借此機會說說本身是如何學習前端技術的。

在開始學習前端相關知識以前，你能夠先簡單瞭解一下一名Web前端開發工程師應該具有哪些技能，先來看張圖：

上圖來自於@Ouven，若是上圖看不清楚，建議你點擊這裏閱讀。

看到上圖，你可能對前端工程師須要具有哪些知識有了必定的瞭解。若是你是從業一兩年的同窗，你已具有了上圖中多方面的技能樹，也具備了本身一套學習方法。下面針對於初學者來聊一下學習方法。

做爲前端開發者，首先要掌握的就是HTML+CSS，有了這兩項最基礎的知識，就能駕輕就熟的將設計師的Web頁面切出來（將PSD設計圖轉換成Web靜態頁面）。但這仍是不夠的，還須要能熟練的處理各瀏覽器的兼容。爲了能更好的要求本身，儘可能要讓本身的Web頁面符合W3C標準和語義化的規範。這方面雖然不是硬性的要求，可是作好這二者頗有必要，也具備較大的難度。

其實在這個階段，對於初學者並非件容易的事情。由於在這個過程種，初學者很容易迷失，也失去信心。雖然你經過看書，或者視頻，你對HTML和CSS的每一個知識點有了必定的瞭解，但依舊缺乏動手能力。簡單點說，仍是不知道如何將設計稿轉換成Web頁面。在這個時候你更但願的是有一我的告訴你，應該怎麼將設計稿轉換成Web頁面，怎麼開始動手。一旦你完成第一個頁面，就能從中找到信心與方向，對後面的學習也是一種極大的幫助。

充分掌握了HTML和CSS方面知識後，接下去要把JavaScript拿下，這也是前端工程師必備技能之一，也算是較難的一部分。只懂HTML、CSS和JavaScript其中一個或兩個還不行，你必須對這三門語言都很熟悉。也不是說必須對這三門語言都很是精通，但你至少要可以運用它們完成大多數任務，而無需頻繁地尋求別人的幫助。

若是你順利拿下JavaScript以後，你就能夠在前面的基礎上作一些更有意思的事情，好比說在你的靜態頁面上添加交互效果，也能更好的處理業務邏輯。讓你的工做駕輕就熟。除此以外，你也能夠繼續深刻去學習各類JavaScript的框架，好比如今前端很是火的React、Vue等等。由於這些JavaScript能更好的幫助你工做，也能讓你的工做變得更輕鬆，讓你的項目也更易維護。

到了這個時候，你會發現，你能夠慢慢的脫離寫原始的HTML結構；你也會發現，你能夠更好的積累，在其餘項目中複用本身積累的代碼。你也會發現，原來這些框架的學習並無當初想象的那麼複雜。你也會發現...

固然對於優秀的前端工程師應該具有快速學習能力。推進Web發展的技術並非靜止不動的，沒錯吧？我甚至能夠說這些技術幾乎天天都在變化，若是沒有快速學習能力，你就跟不上Web發展的步伐。你必須不斷提高本身，不斷學習新技術、新模式；僅僅依靠今天的知識沒法適應將來。Web的明天與今天必將有天壤之別，而你的工做就是要搞清楚如何經過本身的Web應用程序來體現這種翻天覆地的變化。

回到另外一個問題

接下來我們繼續聊另外一個問題，也是不少初學者常問的一個問題：

學習前端，應該自學仍是看視頻，或者說參加線下前端培訓班？

就我我的而言，對於每一個人都不同。下面僅是我我的見解與建議，僅供參考：

若是你是一位自學能力很是強的人，並且具有較好學習方法，建議自學，自學的方式就是不斷的看書，寫代碼。

若是你的自學能力不是很是強，也不知道如何學習。那麼建議你看一些視頻，由於這些視頻能夠幫助你更好的理解，也能讓你更形象的看到相關知識點獲得的效果。固然，並非只看視頻就能解決全部問題，你仍是須要配合書本的知識和寫代碼結合起來。而後從中找到適合本身的學習方法，爲後面學習打下較好的基礎。

若是上面兩種方法，你都沒法獲取到想要的知識點，那麼建議你花點錢，參加一些優秀的線下培訓班。固然，不少人說線下培訓班，培訓不出好的前端，我的以爲並不全是如此，最起碼能讓你更好的入門。萬事開頭難嘛，只要開了頭，一切就好辦了。另外，若是運氣好，有位老師能指導你，那是你的幸運，由於你能少走不少彎路，能更好，更準確的得到相關知識點。但話說回來，師父領進門，修行得靠本身。

無論是怎麼學習，通過一段時間以後，須要開始沉澱本身，也要開始去思考：

• 我掌握了什麼？
• 哪些似懂非懂？
• 哪些不懂？

有了這三份清單，你會又有了新的目標，針對清單上的去作總結，去把似懂不懂和不懂的搞懂。這樣的過程應該伴隨你整個學習或者說職業生涯。只有這樣，你纔不會迷失方向，才能讓本身變得更強大。

如何解決學習過程當中碰到的問題

在學習的過程中老是會不到各類問題，那麼學會如何解決學習過程當中碰到的問題對於咱們每一位來講是更重要的。那麼問題來了，應該如何解決學習過程當中碰到的問題呢？

大部分同窗可能採起的方式是問人，好比在各類前端QQ羣、微信羣撒網，碰運氣看看有沒有大神幫忙回答。其實這種方式是最笨的，也能夠說最無奈的。採用這種方式的同窗，大都是不知道怎麼去解決，也找不到人幫忙解決。

其實解決這個問題很簡單，只要有互聯網的地方，就沒有解決不了的問題。咱們能夠經過搜索引擎來幫咱們，能夠說搜索引擎是解決問題最好方式。固然，前提條件是你懂的使用搜索引擎，而每每不少人都不知道如何利用搜索引擎。

在我碰到的同窗當中，或者說身邊不少同窗都喜歡使用百度來搜索，或許你發現，搜索出來的並非你想要的答。其實，我想說，那是你方法不對。咱們應該拋棄使用百度來搜索，應該使用Google搜索引擎（須要知道怎麼FQ使用Google），經驗告訴我，Google能更好的定位到你須要的答案。另外在搜索相關問題時，更建議你採用英文搜索，若是你不知道怎麼用英文來描述你的問題，其實不難，能夠利用翻譯工具幫你翻譯，而後在Google中搜索，這樣會讓你變得更輕鬆。

除此以外，若是你身邊有更多的同窗，你能夠考慮先問身邊的同窗。只不過不少同窗很害羞，很差意思問。更有很多同窗，擔憂問身邊的同窗，怕會被BS，其實並不是如此，這一切只是你本身的想法而以，你應該厚着臉皮不斷去問。而事實上，咱們前端圈的氛圍是很良好的，不少同窗都願意爲你解答，或者告訴你方法怎麼去解決問題。

爲何要錄製視頻

最後，在來扯一下本身爲何會錄製視頻。其實好久之前就有想法錄製一些前端視頻，給一些有須要的同窗。但因爲種種緣由沒去作這樣的一件事情。我是一分愛於分享與總結的人，此次下定決定錄了一個前端基礎系列，但願這個系列能幫助你們更好的理解前端，也能更快的入門。

在錄製這個系列以前，想過好久，想以更好的方式給你們呈現。由於擔憂本身錄製的視頻會誤人子弟，更擔憂本身錄製的視頻並不能幫助初學者解決最想解決的問題。值得我慶幸的是，經過這段時間的上線測試，仍是獲得一些同窗的承認：

大漠老師講的loading加載動畫，和3D文字翻轉效果，點讚的煙花效果，認識了不少新的CSS3屬性，日常用的box-shadow在大漠老師的手上還能作出這麼炫酷的效果，還學到了動畫效果多，3D加速的小技巧，講的很細緻，很耐心，對剛學HTML+CSS的同窗，也能聽得很明白，有一些經驗的同窗來講，也能聽到裏面的小技巧，認識新的屬性，還有日常疏忽的一些屬性。

---

在CSS方面的課程，我是晚上看的，以爲老師在課程的編排上面動了腦筋，對於僞類講的也很全面，我在其它的網頁上面也買過其它的課程學習過，可是都不是特別全面，大部分狀況下只是學習了基礎的知識知道如何碼出來

---

我的以爲老師大神們的這個視屏教學課程是我在全部課程裏面看過的最好的了，雖然看起來很基礎，可是確實真的是很實用

在此很是感謝你們的支持，由於一路有大家的支持，我才能一路堅持下來。我也會繼續努力，向你們呈現更好的教程、視頻等。

總結

扯了這麼多，都是些有的沒的，但願你能從中獲取到想要的。最後再囉嗦一下：

不管從哪一個方面講，我都以爲前端工程師是計算機科學職業領域中最複雜的一個工種。絕大多數傳統的編程思想已經不適用了，爲了在多種平臺中使用，多種技術都借鑑了大量軟科學的知識和理念。成爲優秀前端工程師所要具有的專業技術，涉及到廣闊而複雜的領域，這些領域又會由於你最終必須服務的各方的介入而變得更加複雜。專業技術可能會引領你進入成爲前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，纔會真正讓你變得優秀。

 

 

原文連接：http://www.w3cplus.com/how-to-study-front-end.html