很多小白可能會說，我現(xiàn)在零基礎(chǔ)學(xué)習(xí)，現(xiàn)在前端開發(fā)的內(nèi)容那么多，我應(yīng)該怎么學(xué)呀？
問到這里我想跟大家說一下：
其實(shí)前端技術(shù)更新是挺快的，但是技術(shù)不管怎么更新，怎么發(fā)展，都離不開基礎(chǔ)的知識，把基礎(chǔ)的語法學(xué)好，理解好編程思想、開發(fā)方式，能面向多終端開發(fā)，響應(yīng)式開發(fā)掌握好，基礎(chǔ)打牢了，再深入的內(nèi)容都是可以迎刃而解的。
今天就跟大家講一下新手小白，該如何入手前端以及如何順利學(xué)好前端。
[if !supportLists]1、[endif]在學(xué)習(xí)之前搞清楚你要做什么工作崗位，這些在招聘網(wǎng)站上都有，崗位薪資、福利這些都可成為你學(xué)習(xí)的動力哦。
[if !supportLists]2、[endif]學(xué)習(xí)需要有規(guī)劃，每天定任務(wù)，學(xué)習(xí)新的知識不能急于求成，每天可以掌握一兩個(gè)知識點(diǎn)，然后多練習(xí)，基礎(chǔ)知識需要學(xué)扎實(shí)！一定要扎實(shí)??！
[if !supportLists]3、[endif]最好有個(gè)學(xué)習(xí)路線，按照知識點(diǎn)難易程度來定學(xué)習(xí)時(shí)間和進(jìn)度，這樣不迷茫，還有重復(fù)一點(diǎn)：不求迅速，但求牢固。
4、自學(xué)的話最好有大神帶著你，學(xué)習(xí)的路上肯定會遇到技術(shù)問題，能及時(shí)解惑的話學(xué)習(xí)事半功倍哦。
話不多少，直接上干貨！
初級前端：
主要學(xué)習(xí)三個(gè)部分：HTML，CSS，JavaScript
html + css部分：
推薦視頻：https://www.bilibili.com/video/BV1R4411J7tQ
推薦視頻：https://www.bilibili.com/video/BV1p5411w71w
推薦視頻：https://www.bilibili.com/video/BV1Vi4y1t7XV
這部分特別簡單，到網(wǎng)上搜資料，書籍視頻非常多。
css中盒子模型，流動，block，inline，層疊，樣式優(yōu)先級等這些自學(xué)起來也是非常容易。學(xué)完基礎(chǔ)后，可以仿照電商網(wǎng)站（例如京東、小米）做首頁的布局。
JavaScript部分：
推薦視頻：https://www.bilibili.com/video/BV14y4y1q754
推薦視頻：https://www.bilibili.com/video/BV1W54y1J7Ed?ssss
Javascript，簡稱JS，有很多比較抽象的概念，必須要深入理解，比如閉包、原型、面向?qū)ο蟆⒎庋b等，要理解透徹。
另外，js面向?qū)ο缶幊瘫仨氁獙W(xué)習(xí)，非常重要，JS語法，永遠(yuǎn)是面試中最重要的部分。
jQuery，這是一個(gè)非常優(yōu)秀的Javascript庫，大型開發(fā)必備。
它簡化了Javascript的復(fù)雜操作，消除了Javascript跨平臺兼容問題，提供了大量實(shí)用方法，有良好的文檔和幫助手冊，是一個(gè)非常成熟的Javascript庫。
推薦視頻：https://www.bilibili.com/video/BV1QA411W7s7
ES6語法。這部分屬于JS新增的語法，面試必問，其中，關(guān)于promise、async等內(nèi)容要尤其關(guān)注。
中高級前端：
一、工具學(xué)習(xí)習(xí)：
1、Canvas，面試時(shí)，有的公司不一定會問canvas，靠運(yùn)氣，如果時(shí)間不夠，這部分的內(nèi)容可以先不學(xué)，但如果你會，絕對屬于加分項(xiàng)。
[if !supportLists]3、[endif]自動化工具：構(gòu)建工具Webpack、構(gòu)建工具 gulp、CSS 預(yù)處理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
推薦視頻：https://www.bilibili.com/video/BV1YU4y1g745
[if !supportLists]4、[endif]移動Web開發(fā)、Bootstrap等。要注意移動開發(fā)中的適配和兼容性問題。
推薦視頻：https://www.bilibili.com/video/BV1uQ4y1T7kW
[if !supportLists]5、[endif]前端框架：Vue.js和React。這兩個(gè)框架至少要會一個(gè)。入門時(shí)，建議先學(xué)Vue.js，上手相對容易。但無論如何，同時(shí)掌握 Vue 和 React 才是合格的前端同學(xué)。
推薦視頻：https://www.bilibili.com/video/BV1GL4y1v79M
推薦視頻：https://www.bilibili.com/video/BV1Ya411F7fa
5、Node.js。屬于加分項(xiàng)，如果時(shí)間不夠，可以先不學(xué)，但至少要知道 node 環(huán)境的配置。
推薦視頻：https://www.bilibili.com/video/BV1QT4y1A7NR
前端綜合：HTTP協(xié)議、跨域通信、安全問題（CSRF、XSS）、瀏覽器渲染機(jī)制、異步和單線程、頁面性能優(yōu)化、防抖動（Debouncing）和節(jié)流閥（Throtting）、lazyload、前端錯(cuò)誤監(jiān)控、虛擬DOM等。
推薦視頻：https://www.bilibili.com/video/av50567412
編輯器相關(guān)：Sublime Text是每個(gè)學(xué)前端的人都要用到的編輯器。另外，前端常見的IDE有兩個(gè)：WebStorm 和 Visual Studio Code。WebStorm什么都好，可就是太卡頓；VS Code就相對輕量很多。個(gè)人總結(jié)一下：新手一般用 WebStorm，入門之后，用 VS Code 的人更多。
TypeScript（簡稱TS），ES是 JS 的標(biāo)準(zhǔn)，TS 是 JS 的超集。TS屬于進(jìn)階內(nèi)容，建議把上面的基礎(chǔ)掌握之后，再學(xué)TS。
六、前端框架知識vue ?react angular，三選一，必須要掌握熟，其余兩個(gè)可以了解，但取決于你面試的公司。
react推薦視頻：https://www.bilibili.com/video/BV1Ya411F7fa
Vue推薦視頻：https://www.bilibili.com/video/BV1GL4y1v79M
Angular推薦視頻：https://www.bilibili.com/video/BV12W41137CA
熟練掌握了以上這些知識點(diǎn)你還要時(shí)刻留意招聘網(wǎng)上的要求，只有要求達(dá)到了才有被邀面試的可能，舉例如下：
[if !supportLists]1.?[endif]精通html和css，能制作符合W3C標(biāo)準(zhǔn)的靜態(tài)頁面；2.精通JavaScript編程，對面向?qū)ο缶幊趟枷胗猩羁汤斫猓?.精通主流Javascript庫/框架jQuery；4.理解并掌握J(rèn)avaScript語言核心技術(shù)DOM、BOM有Javascript性能優(yōu)化經(jīng)驗(yàn)；5.對瀏覽器兼容性有深入的研究，精通各種瀏覽器問題 ；6.了解Backbone.js、AngularJs等MVC框架并有實(shí)際項(xiàng)目開發(fā)經(jīng)驗(yàn)；7.了解asp.net等服務(wù)器后臺技術(shù)和擁有一定的C#編程能力者優(yōu)先；8.對交互體驗(yàn)、可用性、用戶體驗(yàn)有一定程度的理解；9.有良好的責(zé)任心和團(tuán)隊(duì)合作能力、能承受較大的壓力；
推薦視頻：
https://www.bilibili.com/video/av50571308
https://www.bilibili.com/video/av50573235
https://www.bilibili.com/video/av50575805
https://www.bilibili.com/video/av50567154
最后，祝各位不甘心平凡的小碼農(nóng)們學(xué)業(yè)有成，早日找到稱心如意的工作！
