關(guān)于筆記和代碼

為了方便小伙伴直接手機(jī)在線查閱筆記和代碼資源鏈接，正在逐步移植到微信公眾號(hào)上，如果小伙伴們需要獲取視頻中的筆記+代碼，可以掃碼下方的二維碼關(guān)注公眾號(hào)獲取哦。（目前還處于試運(yùn)行階段，后續(xù)關(guān)注的小伙伴多的話會(huì)更新更多內(nèi)容）

前端學(xué)習(xí)路線

很多小伙伴對(duì)前端開(kāi)發(fā)感興趣，想自學(xué)前端可是奈何沒(méi)有一個(gè)好的學(xué)習(xí)視頻，沒(méi)有一個(gè)合理的前端學(xué)習(xí)路線，會(huì)走很多很多的彎路，讓很多小伙伴慢慢失去信心......

所以為了各位愛(ài)學(xué)習(xí)的小伙伴可以更好的自學(xué)好前端，棠哥把自己頻道中的視頻按照學(xué)習(xí)路徑順序排序并且貼上對(duì)應(yīng)鏈接，需要的小伙伴可以收藏一下，但是最好不要只吃灰哦~ 沒(méi)事多看看，并且需要下苦工，劃重點(diǎn)：要想把前端學(xué)好，必須要：多敲多練。多敲多練才能把前端學(xué)好哦！前端是應(yīng)用類的學(xué)科，需要通過(guò)不斷的練習(xí)才能成為一名合格的：前端工程師，加油小伙伴們哦~

（如果覺(jué)得有幫助的小伙伴們可以點(diǎn)贊關(guān)注轉(zhuǎn)發(fā)一鍵三連哦~ 你的關(guān)注是我最大的動(dòng)力！ ）

前端學(xué)習(xí)路徑+視頻資料整理

第一階段：前端基礎(chǔ)

最終目的： 能夠熟練掌握HTML+CSS，并利用標(biāo)準(zhǔn)流+浮動(dòng)+定位等布局技巧，獨(dú)立根據(jù)UI出的設(shè)計(jì)稿進(jìn)行完美還原。

視頻鏈接：

前端基礎(chǔ)班-day01：https://www.bilibili.com/video/BV1Mi4y1o7Gj

前端基礎(chǔ)班-day02：https://www.bilibili.com/video/BV1La411k7oX

前端基礎(chǔ)班-day03：https://www.bilibili.com/video/BV1iL4y1J7Fh

前端基礎(chǔ)班-day04：https://www.bilibili.com/video/BV1sR4y1W7ma

前端基礎(chǔ)班-day05：https://www.bilibili.com/video/BV1rr4y1U7w2

前端基礎(chǔ)班-day06：https://www.bilibili.com/video/BV1g44y1J7vX

前端基礎(chǔ)班-day07：https://www.bilibili.com/video/BV1sm4y1X7Mn

前端基礎(chǔ)班-day08：https://www.bilibili.com/video/BV1vL411j7YP

前端基礎(chǔ)班-day09：https://www.bilibili.com/video/BV1ZZ4y1Q7Xw

前端基礎(chǔ)班-day10：https://www.bilibili.com/video/BV1nq4y1B7Kg

第一階段拓展

最終目的： 補(bǔ)充主體內(nèi)容以外的拓展部分，了解即可

https://www.bilibili.com/video/BV1YL411w7D6

第一階段拔高：

最終目的： 為了確?；A(chǔ)班的HTML+CSS學(xué)的最夠熟練，還記得棠哥最開(kāi)始說(shuō)的重點(diǎn)嗎？對(duì)的！就是得多敲多練，所以課程設(shè)計(jì)時(shí)在學(xué)習(xí)以上知識(shí)點(diǎn)的同時(shí)，還需要融入項(xiàng)目的練習(xí)才對(duì)，故此基礎(chǔ)班中有兩個(gè)項(xiàng)目，建議配合安排的時(shí)間節(jié)點(diǎn)食用是最好的！

前端基礎(chǔ)班項(xiàng)目1-騰訊云項(xiàng)目【建議學(xué)完浮動(dòng)day06后，練習(xí)鞏固】

https://www.bilibili.com/video/BV1ZM4y1g7Xk

前端基礎(chǔ)班項(xiàng)目2-學(xué)成在線項(xiàng)目【建議學(xué)完定位day07后，練習(xí)鞏固】

https://www.bilibili.com/video/BV1dv411w7Uy

第二階段：移動(dòng)web

最終目的： 基礎(chǔ)班咱們已經(jīng)可以使用傳統(tǒng)布局完成pc端網(wǎng)頁(yè)布局了，但是對(duì)于移動(dòng)端頁(yè)面咱們還是一片空白，因此第二階段的目的就是：能夠通過(guò)flex、rem、vw等技術(shù)實(shí)現(xiàn)不同移動(dòng)端網(wǎng)頁(yè)的布局效果。

視頻鏈接：

移動(dòng)web-day01：https://www.bilibili.com/video/BV1Hi4y1y7DB

移動(dòng)web-day02：https://www.bilibili.com/video/BV1yr4y1z7vP

移動(dòng)web-day03：https://www.bilibili.com/video/BV1Vr4y1B7Lh

移動(dòng)web-day04：https://www.bilibili.com/video/BV1iU4y1d7s5

移動(dòng)web-day05：https://www.bilibili.com/video/BV1UL411A771

移動(dòng)web-day06：https://www.bilibili.com/video/BV1xq4y1i7w2

移動(dòng)web-day07：https://www.bilibili.com/video/BV113411J7mt

第二階段拓展練習(xí)

最終目的： 有同學(xué)對(duì)于本階段課程中的練習(xí)還覺(jué)得力度不夠，因此額外加的案例，要求：通過(guò)flex布局完成

https://www.bilibili.com/video/BV1tB4y1U74Q

第三階段：JS基礎(chǔ)

最終目的： JavaScript是前端的核心語(yǔ)言，實(shí)際工作中最多的就是用JS書(shū)寫(xiě)業(yè)務(wù)邏輯，因此學(xué)好JS對(duì)于每一位預(yù)備前端開(kāi)發(fā)工程師都是非常重要的事情，目的JS基礎(chǔ)階段更多的是學(xué)習(xí)JS的基本語(yǔ)法。從效果上沒(méi)有頁(yè)面那么好玩，甚至略顯枯燥，但是只有JS基礎(chǔ)學(xué)好了，才能在之后的前端學(xué)習(xí)中游刃有余，并且到了下一個(gè)階段webAPIs，就會(huì)用JS實(shí)現(xiàn)炫酷的網(wǎng)頁(yè)效果咯~

js基礎(chǔ)day01：https://www.bilibili.com/video/BV1fq4y1C7zg

js基礎(chǔ)day02：https://www.bilibili.com/video/BV1pr4y1U7cN

js基礎(chǔ)day03：https://www.bilibili.com/video/BV1JY411h7cr

js基礎(chǔ)day04：https://www.bilibili.com/video/BV1d3411a7MB

js基礎(chǔ)day05：https://www.bilibili.com/video/BV12m4y1U7SP

第三階段：webAPIs

最終目的： JavaScript的組成部分有三個(gè)：ECMAScript + DOM + BOM，在上一個(gè)階段：JS基礎(chǔ)階段咱們主要學(xué)的就是ECMAScript（JS的基礎(chǔ)語(yǔ)法），而本階段webAPIs學(xué)習(xí)的內(nèi)容其實(shí)就是JS的后兩個(gè)組成部分：DOM和BOM，在本階段，我們可以利用學(xué)習(xí)的JS操作到頁(yè)面的元素完成更多好玩的效果了。

webapi-day01：https://www.bilibili.com/video/BV1mS4y1j7YZ

webapi-day02：https://www.bilibili.com/video/BV1oq4y1y7vE

webapi-day03：https://www.bilibili.com/video/BV1M44y1L7ti

webapi-day04：https://www.bilibili.com/video/BV1xm4y1U7JN

webapi-day05：https://www.bilibili.com/video/BV1yL4y1s7V5

webapi-day06：https://www.bilibili.com/video/BV1334y117b5

webapi-day07：https://www.bilibili.com/video/BV1jT4y1i7g3

第四階段：JS進(jìn)階

最終目的： JS進(jìn)階重點(diǎn)是ES6的常用新語(yǔ)法，這些在之后項(xiàng)目的開(kāi)發(fā)中會(huì)經(jīng)常用到，比如：箭頭函數(shù)、數(shù)組的相關(guān)方法如：map、filter、forEach......、解構(gòu)賦值等等，這些是必須牢牢掌握的。至于其他的關(guān)于js底層及其他內(nèi)容，理解可以應(yīng)付面試即滿足要求。

js進(jìn)階-day01：https://www.bilibili.com/video/BV1Kv4y1Q7Pw

js進(jìn)階-day02：https://www.bilibili.com/video/BV1eG4y1g734

js進(jìn)階-day03：https://www.bilibili.com/video/BV1uA411R7qj

js進(jìn)階-day04：https://www.bilibili.com/video/BV1eG4y1g7Gp

第五階段：ajax

最終目的： ajax階段重點(diǎn)就是要能做到利用axios向服務(wù)器請(qǐng)求數(shù)據(jù)并相應(yīng)，此外還需要結(jié)合async和await語(yǔ)法改寫(xiě)axios。其他部分理解可以應(yīng)付面試要求即可。

ajax-day01：https://www.bilibili.com/video/BV1gv4y1q7J9

ajax-day02：https://www.bilibili.com/video/BV1Rv4y1i7PM

ajax-day03：https://www.bilibili.com/video/BV1dG4y117wy

ajax-day04：https://www.bilibili.com/video/BV1vY411178K

第六階段：git+數(shù)據(jù)可視化項(xiàng)目

最終目的： git部分需要熟練掌握git常見(jiàn)命令的使用，能做把代碼進(jìn)行g(shù)it本地托管+遠(yuǎn)程倉(cāng)庫(kù)托管，數(shù)據(jù)可視化項(xiàng)目需要做到獨(dú)立實(shí)現(xiàn)項(xiàng)目中echarts中的圖表，能通過(guò)學(xué)習(xí)實(shí)現(xiàn)一整套增（添加學(xué)生）刪（刪除學(xué)生）改（修改學(xué)生）查（獲取所有學(xué)生并渲染）功能

git+數(shù)據(jù)可視化項(xiàng)目-day01：https://www.bilibili.com/video/BV1oW4y1G7jw

git+數(shù)據(jù)可視化項(xiàng)目-day02：https://www.bilibili.com/video/BV1uK41117Pq

git+數(shù)據(jù)可視化項(xiàng)目-day03：https://www.bilibili.com/video/BV16e4y1G7in

git+數(shù)據(jù)可視化項(xiàng)目-day04：https://www.bilibili.com/video/BV1TY411y7J9

git+數(shù)據(jù)可視化項(xiàng)目-day05：https://www.bilibili.com/video/BV13G4y1A7WE

第七階段：nodeJS

最終目的： node是后面框架階段多種工具的使用環(huán)境，為了后期框架相關(guān)工具的正常使用，在當(dāng)前階段需要熟悉nodeJS的基本語(yǔ)法，對(duì)于模塊化的思想和語(yǔ)法需要認(rèn)知清楚，而且需要了解webpack打包工具的基本使用流程，為后續(xù)框架階段學(xué)習(xí)做好鋪墊。

框架前置課-day01：https://www.bilibili.com/video/BV1Jm4y1873N

框架前置課-day02：https://www.bilibili.com/video/BV1mX4y117SJ

框架前置課-day03：https://www.bilibili.com/video/BV1JV4y1k7B6

第八階段：VUE

最終目的： VUE框架是目前前端行業(yè)最常用的框架之一，在公司的招聘啟事中都會(huì)要求熟練掌握VUE框架用于開(kāi)發(fā)，可以說(shuō)，熟練使用VUE是作為前端程序員必須要求，也是就業(yè)的重要支撐。當(dāng)前階段需要熟練記憶和使用每一個(gè)VUE的基本語(yǔ)法，并能夠熟練使用vant-ui/element-ui等組件庫(kù)完成項(xiàng)目開(kāi)發(fā)。

VUE基礎(chǔ)-day01：https://www.bilibili.com/video/BV1vV4y1Y7xd

VUE基礎(chǔ)-day02：https://www.bilibili.com/video/BV1iu4y1q7yX

VUE基礎(chǔ)-day03：https://www.bilibili.com/video/BV16X4y1x7rH

VUE基礎(chǔ)-day04：https://www.bilibili.com/video/BV1AV4y1e7ES

VUE基礎(chǔ)-day05：https://www.bilibili.com/video/BV1Vr4y1d7gn

VUE基礎(chǔ)-day06：https://www.bilibili.com/video/BV1Ap4y137is

VUE基礎(chǔ)-day09：https://www.bilibili.com/video/BV13z4y137xS

（關(guān)于：day07、day08、day10、day11屬于移動(dòng)端項(xiàng)目+pc端項(xiàng)目課程，目前暫不便公開(kāi)分享）

待更新......

新技術(shù)分享①：fetch

fetchAPI：https://www.bilibili.com/video/BV1KG411p7kt