第一、 前端的入門操作

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

如果你是想

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

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

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

第二、做項(xiàng)目

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

所以，新手小白看過來(lái)！從0到1，前端開發(fā)項(xiàng)目就是這么簡(jiǎn)單。

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

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

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

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

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

新手小白看過來(lái)！從0到1，開發(fā)項(xiàng)目就是這么簡(jiǎn)單。

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

到這個(gè)程度，賺錢就不是問題了。

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

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

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

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

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

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

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

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

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

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

寫不出來(lái)是正常的?？梢匀タ聪聞e人的代碼吧，看一小部分就開竅了。忘掉的屬性就查書或者查 MDN，多嘗試，不斷踩坑才有進(jìn)步。

2.JS：

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

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

敲出來(lái)的代碼，思路不清晰時(shí)，可以在firebug,chrome里邊打個(gè)斷點(diǎn)跟一下，理理思路，理解代碼的邏輯，這樣影響才會(huì)深刻。

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

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

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

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

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

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

原型/原型鏈

閉包

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

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

模塊化 CommonJS, AMD

二、框架方面

前期要會(huì)用，后期要懂原理。

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

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

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

多去實(shí)踐總結(jié)，對(duì)整體框架理解會(huì)越來(lái)越深刻。

總結(jié)

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

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