第一、 前端的入門操作

首先是要熟悉前端的基礎(chǔ)操作。
前端的基礎(chǔ)：JavaScript，HTML，CSS，然后可以深入學(xué)習(xí)jQuery。

如果你是想

1.專攻網(wǎng)頁，那你就學(xué)習(xí)HTML。

2.專攻層疊樣式表，就學(xué)習(xí)CSS，它可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。

然后JS，也就是Javescript的語法、時間、對象、Dom等基礎(chǔ)知識也最好掌握一下。

第二、做項目

我一開始報了一個java的培訓(xùn)班，在畢業(yè)前的實習(xí)，以及正式工作時也都是從事java開發(fā)的工作。大概一年左右，我開始對前端感興趣，于是我自學(xué)了前端的基礎(chǔ)知識，并開始找前端這方面的工作，一年的時間薪資已經(jīng)達(dá)到了15k。

所以，新手小白看過來！從0到1，前端開發(fā)項目就是這么簡單。

說得有些籠統(tǒng)了，怕小白看不懂，簡單說一下。

通過Video.js就可以實現(xiàn)比較方便的視頻直播功能，之后利用Serverless平臺騰訊Cloudbase來儲存數(shù)據(jù)。

由于Cloudbase提供了云函數(shù)、云儲存和云數(shù)據(jù)庫等，我們只需要自己進(jìn)行前端的功能實現(xiàn)，后端可以直接交給Cloudbase。

所以能免除很大一部分學(xué)習(xí)的時間，學(xué)習(xí)效率非常高。

我當(dāng)時上的網(wǎng)課給了一個很詳盡的資料包，基本上跟著看完學(xué)完也就懂差不多了。

新手小白看過來！從0到1，開發(fā)項目就是這么簡單。

一邊學(xué)一邊做項目賺錢，能拿到10k以上的報酬，

到這個程度，賺錢就不是問題了。

如果你想加工資，那繼續(xù)往下看。

近幾年前端發(fā)展迅速，ES6的普及速度更是驚人，所以一定要學(xué)習(xí)ES6/7（ECMAScript 6入門）。
其次是Node.js，Node.js是服務(wù)器端的一個平臺，其給前端開發(fā)提供了很多實用的工具，是如今前端開發(fā)的重要組成部分。
工具推薦：Babel，Webpack，Postcss。
框架推薦：React，Vue.js。

最后，具體說一下前端要學(xué)什么吧。

1. HTML + CSS
前端的入門門檻極低，體現(xiàn)在 HTML 和 CSS 上。運行環(huán)境就是瀏覽器，推薦 Chrome。你需要的只是一個編輯器，直接用 VSCode 吧。

HTML 和 CSS 不是編程語言，前者只是結(jié)構(gòu)標(biāo)簽，后者則是樣式配置，入門是非常簡單的。網(wǎng)上資料也有很多，可以參考 MDN。
我當(dāng)時是看了一本書 Head First HTML and CSS，比較無腦，雖然淺顯易懂但價格比較感人，粗略翻一遍就可以了，不用買。

迅速刷一遍 MDN 上介紹 HTML 和 CSS 的部分，對兩者有個大致印象就好，不用死記硬背，短時間記不住的。刷慕課網(wǎng)勉強還行，但以后查資料還是要看 MDN 的，建議一步到位，最好看英文原版的。

接下來就是學(xué)習(xí) CSS 了，CSS 要學(xué)深入非常難，入門的話會切圖就行了。推薦：

《CSS 權(quán)威指南（第四版）》。第四版包含了 CSS3 的內(nèi)容，不需要再看別的了。這書非常枯燥，花幾天硬啃下來就好了。屬性細(xì)節(jié)不必記憶，以后用到肯定要再查的。著重點放在大局上，抓住重點快速過一遍，比如盒模型、定位、彈性盒布局等。

以上內(nèi)容用時 5 天左右，主要是啃《CSS 權(quán)威指南（第四版）》。

下面是實踐。
學(xué)了幾天 HTML 和 CSS 了，應(yīng)該也有點成果了。打開 IFE2015 task1，寫個靜態(tài)頁面吧。

寫不出來是正常的。可以去看下別人的代碼吧，看一小部分就開竅了。忘掉的屬性就查書或者查 MDN，多嘗試，不斷踩坑才有進(jìn)步。

2.JS：

JS我選擇跟網(wǎng)課去學(xué)習(xí)，會更詳盡、更容易上手。

如果純自學(xué)，建議閱讀“javascript高級程序設(shè)計”第三版電子版。

敲出來的代碼，思路不清晰時，可以在firebug,chrome里邊打個斷點跟一下，理理思路，理解代碼的邏輯，這樣影響才會深刻。

初學(xué)者沒辦法都是這樣，也只能這樣。但是初期可能稍為慢一點，但一直不會這么慢，也不會想象的那么長，因為隨著基本概念的掌握，編碼技巧的熟悉，開發(fā)工具的熟練，消化視頻的速度會越來越快。

由于我當(dāng)時處于裸辭+脫產(chǎn)狀態(tài)，所以想直接就業(yè)，沒時間看這么的多書，所以非常果斷，選了一邊做項目一邊賺錢一邊學(xué)習(xí)的模式！

HTML、CSS、JavaScript 三大件，完全掌握。不懂得就直接查 MDN。
HTML重點掌握語義化。區(qū)分塊級和內(nèi)聯(lián)標(biāo)簽。其他查文檔就好了。還有就是定義 head 里面一些meta 了解下。

CSS。重點看盒子模型，定位，層級，過渡，動畫和 transform。知道原理和規(guī)則。大部分工作都是照著設(shè)計稿化。掌握上面幾個99%還原也不難。接下來重點學(xué)習(xí)幾種常見的布局。完了之后去搞flex。最后搞下sass、less。基本就差不多了。

JavaScript。重點來了，紅寶書看一遍掌握基礎(chǔ)。進(jìn)階去看《你不知道的 JavaScript》。就這兩套足夠了，別搞那么多。每個知識點搞懂。ES6基本沒啥問題。下面幾個問題優(yōu)搞懂，優(yōu)先級如下：

this 用法，相關(guān)原理

原型/原型鏈

閉包

面向?qū)ο笙嚓P(guān)

同步異步/回調(diào)/promise/async、await

模塊化 CommonJS, AMD

二、框架方面

前期要會用，后期要懂原理。

新人先搞 Vue。Vue 算是比較簡單的框架了，上手容易。照著官方文檔來問題不大。原理方面要提高自己認(rèn)識。學(xué)習(xí)怎么看源碼。github常去逛逛。

學(xué)習(xí)框架之前，我其實特別建議，新人先去了解 Babel 和 webpack 不僅僅是使用。一些原理方面的東西工作中也會用到。babel 里面會有教你如何編譯代碼。webpack教你如和打包文件。自己手寫編譯器和打包工具也不是特別難。反正對之后看vue、react源碼幫助挺大。

搞完 Vue 全家桶，去了解下 React，React hooks 學(xué)習(xí)下新的理念。再回過頭來看Vue。你會發(fā)現(xiàn)他們是如此的相似去又不同。

多去實踐總結(jié)，對整體框架理解會越來越深刻。

總結(jié)

以上是生活随笔為你收集整理的小白自学前端，轻松月入过万哦！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。