看了樓主的介紹，樓主現在也是剛學完，想找一份前端工作。我是大三那年自學的前端，希望分享一下我的經驗。

前端，基本東西就是根據ui設計圖，實現網頁程式碼，實現頁面效果展示。相信很多人聽說過靜態頁面，動態頁面，大部分人直接看到的專案屬於靜態頁面，沒有和資料庫進行互動。資料都是寫死的。但是前端入手確實先寫好靜態頁面，再和後臺互動，實現資料渲染。

樓主問如何自學前端好，可以看書，也可以在網上找教程。一定要跟著寫程式碼，不能光看。很多人是看，感覺很簡單，就過，看別的，但是一到自己寫就出錯，再回去從新看，效率質量都很低，還耽誤時間。我認為自學程式設計，重在理解原理，概念。這也是為什麼面試時候人家人你去看開源專案，原始碼分析。學人家的程式碼使用，書寫規範。

可以加一個qq群，現在很多的，群裡面有免費的教程資源，一定要找活躍的那種，多交流，多溝通，多問，問之前一定要自己先弄，實在不明白了，再去求教別人。不要有問題上來就問，先思考，因為我確實遇到過很多看似很可笑的問題。

大家好，我是道哥，計算機專業大資料方向在讀本科生。道哥說一下學習前端的方法。

前端主要是包括 HTML+CSS+JAVASCRIPT(JS)

其中最重要的是JavaScript，這是一門程式語言，也是一門指令碼語言，主要做動態網頁介面。如果題主有過程式語言的基礎的話，學起來就比較容易，比如C/C++語言。js和其它的語言都是類同的，知道變數型別，迴圈判斷，陣列，函式這些就可以了。如果沒有語言基礎，其實學起來也不難，多花點時間，也能學會。

再者就是Html，這個就是標籤，描述頁面有哪些元素，放置什麼內容。學習HTML說白了就是在學習各種各樣的標籤使用，因為JS有一部分功能就是去操作這些頁面標籤元素 。HTML標籤雖然多，但是常用的Html標籤沒多少個，很快就可以掌握學習。快速瞭解的方法就是，隨便開啟一個網站，瀏覽器右鍵檢視原始碼，裡面就是Html標籤了。建議可以在w3school裡邊學習這個內容，裡邊介紹的很全面。

再就是Css，這就是一種修飾，給頁面Html標籤元素新增樣式的，比如文字顯示什麼顏色，背景色是什麼。Div元素塊的高度和寬度，背景圖片用什麼，就是這些了。

說一下做前端的工具，初學者建議用editplus

進階者可以用sublime

其實做前端還是挺簡單的，輕輕鬆鬆就可以學會了。還是那句話，現在前端比較流行，也會繼續流行。

首先從基礎的結構樣式學起，也就是HTML CSS然後再研究js的表示式和語法，建議去看一些相關的影片入門，平時沒事買本紅寶書，就是JavaScript 高階程式設計這本書好好的看前十四章，後面的不建議花太多時間研究，邊學習這些邊進行專案的練習，ui 框架熟練一兩個就好了，後面再去專案中需要用哪個再看文件使用，都熟練使用花時間太多，不建議，至於js庫我個人認為研究下vue先，三大框架之一，這個上手好上點，而且先了解他的思想，後面想進一步就圍繞react研究，這個值得學習的，入門難點，反正前端需要學習的知識範圍很廣，未來前端或許會和後臺完全分離，中間有個node，所以加油吧

前端學習入門容易學成難，前端學習的基礎部分包括HTML、CSS、JavaScript三大部分，其中HTML和CSS基本用法很簡單，對於一個沒有基礎的人來說一個月也能掌握其基本的語法，也能完成簡單的實驗。

學習JavaScript還是有一定難度的，JavaScript內容相對較多，實驗程式碼也相對比較複雜，真正理解其中的各種應用需要一段較長的時間，如果每天都能保證3個小時的話，大概需要3個月左右才能熟練使用。

這僅僅是第一步，大部分人學到這個階段是沒有問題的，買幾本書，自己做做實驗也能基本掌握書中的知識點。但是接下來的學習就需要實踐來鍛鍊了，不管你看了多少書，做了多少實驗，在真正的專案需求面前你都會感覺學到的東西太少了。

我們每個專案組都會配備一定比例的前端開發人員，每一個主力前端工程師都會配備幾個初級工程師和實習工程師，通常專案開發的時候主力工程師會進行一些任務分配，按照隊伍中程式設計師能力情況進行任務安排。

經常會遇到這種情況，入職實習崗位的前端工程師會說自己的能力如何如何，自學了什麼框架，做了多少實驗等等，感覺不給他個主力崗位都對不起團隊其他人。實際情況大多是做了2天下來就知道自己的差距了，還有一部分實習程式設計師覺得實在差距太大就自動離職了，因為實在是一種煎熬。

所以學習前端的路線是在學習完書本知識、完成其中的練習實驗之後要參加專案實習，這個過程是任何書本代替不了的。很多前端的知識不用在學習的初期過多的涉及其中的細節，有很多東西是需要一遍使用一邊學習的，而且實習過程更多的是學習的過程，是跟有經驗的工程師學習的過程。

一個前端實習工程師基本上沒有面試官會要求你去分析開源框架原始碼的，一個原因是這個階段沒有必要，另外企業也付不起這個時間成本。通常研究開源框架都是各位程式設計師下班後自己研究的，這大多是主動學習的內容。

透過HTML/CSS作為入門，學習ES5版本的javascript，然後學習第一個開源前端框架jQuery，再學習ES6版本的javascript，學習Vue/React其中之一。

具體的學習過程如下:

如果把前端開發比作蓋樓，那麼HTML5就是她的鋼筋混凝土結構，CSS3是她的外部的玻璃幕牆等。已經2018年了，老舊的版本不需要看了，任何資源都要緊跟潮流，遇到了舊版本再查MDN。對，我就是想說IE垃圾，不需要考慮它。

學完這兩門技術可以做個靜態的網站，簡單的javascript捎帶著學一點。

ES5是現代前端js的基礎，很重要，基於原型的繼承、類機制理解理解再理解，面相物件在原生js中如何作用多多體會。這裡會是前端入門的第一個大瓶頸，很難，要做好心理準備。因為它是前端這個大樓的上下層樓的必由之路，學不好，你將永遠停留在B1層，不見天日。

學好原生js後，嘗試把第一步的靜態仿站加入操作DOM，使其更加符合業務邏輯。

進入這個階段是前端的的提升期，各種前端之外但是必須掌握的知識都要去學習，包括但不限於http高階知識、資料結構、後端基礎知識。JSON已經是目前的主流的資料交換模式，必須掌握。學會並理解AJAX是必備技能。

Vue是國內最的框架，掌握並理解吧。如果會react也是一樣的。在這之前，前端的MVC、自動化處理思路、webpack等自動打包器必須掌握！！！

希望題主可以順利進入前端世界～

做為一名前端開發人員，每天主要的工作就是將美工給的psd轉換為html靜態檔案，完成頁面的各種特效

能與後臺開發人員一起編寫Ajax互動程式，熟悉各種瀏覽器（ie6-ie10、火狐、chrome...）的相容性除錯

基礎

一、html+css 這部分建議在w3school 線上教程或者菜鳥教程 上學習，可以邊學邊練，之後也可以模仿一些

網站做些頁面

二、javascript 這部分學的好不好，決定了前端水平的高低，要學的內容實在很多，如果沒有其他程式設計

語言的基礎，學起來可能要費些力，可以先在w3school上學，第一階段：《JavaScript DOM程式設計藝術》

第二階段：《JavaScript高階程式設計》，然後可以找網上的特效，拿來練練手

三、jquery 這是個js的框架，能簡單快速的寫js特效，可以 在jquery線上手冊上學習，網上也有很多的教學影片，

這裡就不推薦了

進階

Html5、CSS3 、Node.js、 AngularJS、 Bootstrap、 React、 Sass/Less 、Vue.js 、WebApp

以上內容只簡單說了學習的順序，對於前端開發，還有就是要勤加練習

———————瀉藥————-：）

前端檢視層是html+css。這塊最大問題是佈局：結構合理與層次分明，缺一不可。結構合理說的是結合當前UI與瀏覽器適配程度，應該採用什麼樣的佈局。比如公司官網就是上中下，後臺管理系統是上左右，新聞網站就是頭部與內容...在這個基礎上，再考慮相容性。個人很喜歡用彈性盒模型，但是碰上一個相容IE9的公司，就很要人命了。所以用任何新東西前，都要考慮瀏覽器適配。層次分明是什麼呢？剛進公司的時候，有個人寫class用的竟然是a1，a2，a3...說實話，絕大多數公司，做的前端產品，都不會因為體量太大而簡寫class成這樣。所以層次分明就是要我們把結構用語言表述出來，以顯示出其層次感。

以上說的這些，本質是要我們把一個專案作為工藝品來做，於人：能夠更快接過去，不需要自己費多少心思；於己：條理分明，容易覆盤。

本人也是一枚前端迷，學習前端經歷了很多事。

是我朋友推薦我去學前端，當時前端很火，也有市場，當時什麼都不懂，甚至連電腦的基本操作都不會。當時在成都去了兩家培訓機構，他們還是用記事本的方式給你演示了幾個標籤p,a,span

就喊你照著打出來突然誇你天賦異稟，什麼稍加培訓日後便可以輕鬆走向人生巔峰之類的話，培訓費4個月9800，當時肯定是沒信。

後來在朋友的幫助下自學，買書，找免費的影片，當時看的是潭州的公開課。總的來說，前端的入門要求極低，前期興趣度也很高，因為幾個簡單的標籤就能展示靜態頁面。

後期也容易放棄，都說原生js是前端的命脈，當然很重要了，要學和要用的程式碼就很多了，一個小小的標點符號都能導致程式碼不執行。

要想學好前端

1 必須要有對前端的興趣，都說興趣是最好的老師

2 學習期間不能鬆懈，三天打魚兩天曬網是不好的

3 多練多找專案來做，提升程式碼熟練度

4 如果有大牛是朋友那就不說了，都懂得

正在學習前端的路上掙扎的萌新，我也來分享分享經驗

>>>>第一階段–HTML的學習

超文字標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML程式碼，瀏覽器將HTML程式碼解釋渲染後呈現給使用者。因此，我們必須掌握HTML的基本結構和常用標記及屬性。

HTML 的學習是一個記憶和理解的過程，在學習過程中可以藉助Dreamweaver的“拆分”檢視輔助學習。在“設計”檢視中看效果，在“程式碼”檢視中學本質， 將各種檢視的優勢發揮到極致，這種對照學習的方法彌補了單純識記HTML標籤和屬性的枯燥乏味，想必對各位初學的小盆友們來說必定是極好的!

在學習了HTML之後，我們只是掌握了各種“原材料”的製作方法，要想蓋一幢樓房就還需要把這些“原材料”按照我們設計的方案組合佈局在一起並進行一些樣式的美化。

>>>>第二階段–css的學習

CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以複用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。

同時CSS中的盒子模型、相對佈局、絕對佈局等能夠實現對網頁中各物件的位置排版進行畫素級的精確控制。透過此階段的學習，我們就可以順利完成“一幢樓房”的建設。

“樓房”建設完成之後，我們可以交給使用者使用，但是如果想讓使用者獲得更佳的體驗，我們還可以對“樓房”進行更深一步的“裝修”，讓它看起來更“豪華”一些。

>>>>第三階段–javascript的學習

JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當中為我們提供了一些內建函式、物件和DOM操作，藉助這些內容我們可以來實現一些客戶端的特效、驗證、互動等，使我們的頁面看起來不那麼呆板，屌絲瞬間逆襲高富帥!有麼有?

此時，也許你還沉浸在JavaScript給你帶來的驚喜之中，但你的專案經理卻突然對你大吼道

“這個效果在××瀏覽器下不相容，重新搞……”

“不相容?”瞬間石化了有木有?

“我去，坑爹啊!那可是花了我一個晚上寫了幾百行程式碼搞定的啊，吐血了都!”

JavaScript的相容性和複雜性有時候的確讓我們頭疼，還好有“大神”幫我們做了封裝。

>>>>第四階段–jquery的學習

jQuery 是一個免費、開源的輕量級的JavaScript庫，並且相容各種瀏覽器(jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支援)，同時現在有很多基於jQuery的外掛可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度，這也充分體現了其 write less,do more的核心宗旨。這個Feel倍兒爽!有麼有?

>>>>第五階段–bootstrap的學習

“豪華大樓”至此拔地而起，但是每天這樣日復一日，年復一年的蓋樓，好繁瑣!能不能將大樓裡面每一個單獨部件模組化，當需要蓋樓時就像堆積木一樣組合在一起，這樣豈不是爽歪歪?可以實現嗎?答案是肯定的。**這種思想在Web前端開發中也是適合的，於是乎就出現了各種前端框架，在這裡推薦給大家的是Bootstrap。**Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架，並且支援響應式佈局。一經推出後頗受歡迎，一直是GitHub上的熱門開源專案。在專案開發過程中，我們可以藉助Bootstrap提供的CSS樣式、元件、JavaScript外掛等快速的完成頁面佈局和樣式設定，然後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發週期。

接下來就是儘可能多的學習框架，有時間的話，深入瞭解一門後端語言更好。

總之，我們一起加油，在前端的路上越走越遠。

從零基礎自學程式設計到工作已經4年多了，現在可以說是全棧開發工程師了，這些年我總結得出的經驗是在工作中對技術的提升更快。所以如果是新手我會推薦先工作，那麼新手如何獲得工作就成為關鍵，零基礎快速成為前端開發工程師並獲得工作不是一件容易的事情，新手沒有工作經驗，技術不紮實等都會阻礙找工作。可能會有一些人推薦學習完HTML,CSS,JavaScript等語言,然後再學這些語言的框架，比如Bootstrap,Jquery,Vue,React等框架，然後找工作，這並沒有錯，但是學習時間太長，去培訓班還好，不至於半途放棄，如果自學就更難了。

我的建議是先學習 HTML和CSS，使用HTML和CSS臨摹一些靜態網站，然後學習git和github，用版本控制管理自己的臨摹的靜態網站，並使用github釋出自己臨摹的靜態網站到線上瀏覽，讓更多的人瀏覽和參與。這裡推薦一些免費的學習網站：

1. w3school 這個可以當作是手冊。

2. 慕課網 上面有免費的基礎教程，並且是互動式的學習。

3. MDN 上面有一個web 入門教程也是挺好的。

臨摹完成 2-3個網站以後就準備簡歷，開始找工作，很多公司是提供實習崗位的，並且學習完HTML和CSS 可以做些基礎的前端工作了，記住在工作中對技能的提示更快。當然如果這個階段沒有找到工作，也不要灰心，總結面試中的問題，繼續給自己充電，學習JavaScript。

學習完JavaScript以後，結合HTML+CSS+JavaScript編寫有互動的網站，此時應該注意HTML和CSS的編碼質量，是時候進階HTML和CSS了。同樣可以臨摹一些線上網站，然後使用github釋出到線上，建議臨摹2-3個網站。最終這些臨摹的網站都將成為你找工作的專案經驗，你同時還有自己的github開源專案，如果有人參與將是最好不過的了。

到此你找工作應該不是問題了，找工時不要眼高手底，找工作考慮的不僅僅是工資待遇，應該注重學習機會和技術提升，記住在工作中學習，對技能的提升更快。按我的方法學習的好處是可以提高學習興趣，學習和找工作的戰線不會拉得太長，專一學習和提升，不會知識點多而記不住，多而不精。如果你已經獲得工作了，根據業務需求你自然會涉及其它一些技術，沒有說非要會哪些技能了才是優秀的前端開發工程師，優秀的前端開發工程師是可以更好的解決實際問題。