如何零基礎當前端程序員

『壹』 零基礎如何學習前端

零基礎學習前端的話，自學和培訓兩條路。

自主學習成本相對來說較低，可以從網上找到相關的書籍、視頻進行學習。鍛煉自己，能從生活總鍛煉自己自主的能力、控制力、協調力，對自身有一個很大的提高。學習內容會很深刻，自己一步一步學來的，很多知識會牢牢記住在腦海中。

自學的話，你需要注意以下幾點：

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資料庫)

如果你資金允許，選擇培訓班，這幾點你可以參考一下：

1、是否最懂前端

為什麼要看重培訓機構這一點呢?因為前端是一門銜接UI和後台開發的職位，這個機構只有同時懂前端設計和後台開發才能做出最全面、最專業的前端課程，我們才能學到高性價比的web前端課程。

2、web課程設置是否等於企業招聘要求

選擇培訓機構的時候要看該機構是否包含了全面的web系列課程，企業需求的技能是否在課程中都有相關的內容。另外，我們除了要看培訓機構教不教這些內容，還要看培訓機構的在這些技術領域是否專業，web前端工程師課程完全專注於前端知識，全面、深入的講解HTML5、CSS3、Java、JQuery等內容，我們要看培訓機構是否能將這些核心知識讓我們學到極致。

3、妥善的就業保障

首先，這個培訓機構是否有課程體系的保障，能讓我們邊學邊練，並且能夠分階段的讓我們學會前端所有的技能。

其次，這個培訓機構是否有師資團隊保障體系，是否有總監級講師授課和上項目實戰經驗課，是否有技術最牛的行業老師，是否有完善的同步教學系統。

參加培訓班的話，學習時間花費相對來說，較短。自學時間會長一點，因為自控力什麼的都是非常考驗的。講師授課，可以隨時請教老師，遇到問題能及時解決，技術提升也會很快。系統的學習web前端知識。一般培訓都會有系統的課程，根據課程安排每天的學習，學習的內容很全面；管理嚴，培訓機構管理很嚴；有夥伴，做起事情來更好，因為小夥伴的相互鼓勵，共同探討，不僅能讓你收獲一批朋友，還對學習有很大的幫助！

最後，歡迎加入我的前端qq交流群，裡面也是一群學前端的小夥伴，我們可以一起學習，互相監督，互相交流學習經驗，一起進行項目實踐，還有很多學習資料哦~期待你的加入。

『貳』 想學前端開發，但不知道怎麼學，從哪裡入門

你可以參考一下以下的學習路線進行學習：

第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資料庫)

前端書籍

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權威指南》，該書內容全面，講解細致，示例豐富，適用於各層次的開發者。

『叄』 如何成為前端工程師需要學哪些東西

第一部分：HTML。HTML是標記語言，也就是經常在代碼中看到的<p></p><div></div>。現在有了HTML5，提供了一些新的標簽語言，例如<header><nav><article><aside><footer>。這一部分最簡單，通常只需要2-3天學習就可以記住。

第二部分：CSS。css控制網頁的樣式，例如字體顏色、字體大小、行邊距等。css是盒模型，分為margin、padding、content和border。css樣式眾多，學起來需要很長時間，但在實際操作學習更快。學習這一部分，大概需要花費一周時間，以後在實踐中邊學邊用。

第三部分：JavaScript，前端的核心技術。js是一種腳本語言，用於實現網站中各種功能，例如表單提交、播放器等。這一部分學習是沒有盡頭的，想成為一名初級前端只要學五個月左右的時間，學習function的正確寫法即可，邏輯演算法需要長時間的研究。

第四部分：HTTP協議。HTTP協議使互聯網的基礎協議，也是網頁開發的必備知識。需要學習的時間不用太長，在學習JavaScript後會很快上手，需要時間大約為一周左右。

第五部分：三大框架，Angular/React/Vue，三種是目前主流框架。Angular全面，項目代碼多；Vue輕便，針對性解決問題，拿來就用，開發具有局限性。新手建議從Vue上手，再去了解React和Angular。

『肆』 零基礎學習前端開發要怎麼開始

這里整理了一份web前端學習路線的思維導圖，需要掌握和學習的內容如下：

第一階段：專業核心基礎

階段目標：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。

2. 熟練運用HTML+CSS特性完成頁面布局。

4. 熟練應用CSS3技術，動畫、彈性盒模型設計。

5. 熟練完成移動端頁面的設計。

6. 熟練運用所學知識仿製任意Web網站。

7. 能綜合運用所學知識完成網頁設計實戰。

知識點：

1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。

2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。

3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。

第二階段：Web後台技術

階段目標:

1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。

2. 熟練掌握JavaScript的基本數據類型和變數的概念。

3. 熟練掌握JavaScript中的運算符使用。

4. 深入理解分支結構語句和循環語句。

5. 熟練使用數組來完成各種練習。

6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。

7.DOM和BOM實戰練習和H5新特性和協議的學習。

知識點：

1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。

2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。

3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。

4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。

第三階段：資料庫和框架實戰

階段目標：

1. 綜合運用Web前端技術進行頁面布局與美化。

2. 綜合運用Web前端開發框架進行Web系統開發。

3. 熟練掌握Mysql、Mongodb資料庫的發開。

4. 熟練掌握vue.js、webpack、elementui等前端框技術。

5. 熟練運用Node.js開發後台應用程序。

6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。

知識點：

1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。

2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。

4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。

第四階段：移動端和微信實戰

階段目標：

1.熟練掌握React.js框架，熟練使用React.js完成開發。

2.掌握移動端開發原理，理解原生開發和混合開發。

3.熟練使用react-native和Flutter框架完成移動端開發。

4.掌握微信小程序以及了解支付寶小程序的開發。

5.完成大型電商項目開發。

知識點：

1、React面向組件編程、表單數據、組件通信、監聽、生命周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。

2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。

3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。

4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。

這已經是一套非常完備的Java學習路線了，零基礎學習Java完全自學的話還是比較吃力的，建議還是找專業的機構系統學一下，可以點 擊 頭 像 了解一下。