送給那些正在自學或準備自學前端的人！

-Advertisement-

關於前端的話題知乎不能再多了，但作為一個自學者，希望以我的經歷給你們一點啟示或者幫助。關於前端的學習資料和視頻可謂多之又多，學習方法也是大相徑庭，有推薦跟著慕課網的，也有W3C的，傳智播客，這裡就簡單提一下吧。我想大部分都是零基礎的居多吧，所以一些必備的基礎知識都沒有的話，後面的學習是很困難的。這 ...

關於前端的話題知乎不能再多了，但作為一個自學者，希望以我的經歷給你們一點啟示或者幫助。關於前端的學習資料和視頻可謂多之又多，學習方法也是大相徑庭，有推薦跟著慕課網的，也有W3C的，傳智播客，這裡就簡單提一下吧。我想大部分都是零基礎的居多吧，所以一些必備的基礎知識都沒有的話，後面的學習是很困難的。這裡既然是自學，那麼對入門的書籍或者視頻選擇應當由淺入深。好了話不多說，進入乾貨環節。最基礎的三個知識點就是html+css+js，但是很多小白可能並不知道html5和html，或者XHTML的區別，也不知道還有css2和css3的區分，我在學了近半個月以後只慢慢瞭解試試脈絡。

html

這本可能不是最好的，但對於小白來說是最淺顯移動，而且例子生動形象，慢慢加大難度，當時我是在自學了半個月以後去看的這本書，依然覺得很不錯。這裡我在推薦一個視頻網站前端與移動開發基礎視頻，他很細緻的講解了前端究竟是做什麼的，也提到3種最常用的IDE，另外我建議大家看視頻最好就只看一個網站的就行，因為這樣不耽誤你的學習時間，節奏也不會亂，我是覺得這裡的視頻雖然難度不大，也不算很精，但入門很不錯。我希望自學的同學不要奢望像培訓班那樣，4個多月或許就能找到一份不錯的工作。但你最好是一步一個腳印的慢慢來，培養自己的自學能力，這對以後框架的學習很有幫助。這本書無論是在校大學生還是普通的在職人員，你每天不需要花費太多的時間，就晚上2--3小時的時間，一個月，應該是可以看完的。之後我推薦你看學制項目實戰，這是一個最基礎的靜態頁面項目，跟著視頻做一遍。你大致就能瞭解你以前看到各種形形色色的網路頁面（不包括交互效果）是如何利用代碼，也就是html+css2展現在你眼前的。 2.html5,css加強以及css3（重點canvas）這裡由於自身沒怎麼看書，也就不亂推薦了。這裡我建議上W3C，因為有了前面一個月的學習，我相信你的自學能力已經提高了不少，或者可以自己找到合適的資源。這裡推薦學制這個網頁，你能找到練手的項目，根據自身的情況，親自動手去實現頁面的佈局，同時也可以參考別人在github上代碼，養成良好的書寫習慣。掌握幾個重要的技巧或者標簽用法吧（我也不知道該怎麼叫）。偽類元素（包括各種符號的用法）

::before和::after
利用css3實現輪播，旋轉，還有字體特效

因為我是辭職專心在家學習，可能時間上充裕一點，如果你是在上班的人，這裡花費的時間可能會多一點45--60天。畢竟你每天的時間有限。 3.JavaScript 你肯定很想知道，你輸入的賬號密碼是否匹配成功是如何檢測的？也想知道那些彈框，頁面上你點擊滑鼠帶來的特效。也很好奇瀏覽器的前進與後退，緩存是如何實現的。那麼你一定要學習js,因為你只要自己會JS代碼，會寫演算法，你才能稱得上一名前端程式員。如果大學不是電腦專業或者沒有瞭解過C，C++，Java，或者算不上語言的VB，你一定要打好基礎。如果前面的語法沒有學好，後面的學習真的就是全程懵逼。在觀看了3個網站的視頻以後我覺得千鋒源的比較系統和全面一些。https://pan.baidu.com/s/1tE61JoacUTDG-bEeVlIkfw找不到的同學可以百度雲轉載提貨碼成為一名碼農或者加扣扣裙851231348知識點很全面，也分的很細，尤其是對“正則表達式”，“面向對象和原型”，“繼承”，“閉包”，“Function類型和函數”，“DOM和BOM”。就我個人而已覺得他是我看到最好的JS自學視頻。 JS的學習肯定是離不開書籍的，我個人只買了2本，以後根據需要會自己去選擇書。一本《JavaScrip DOM編程藝術精講》，全書280頁，一個月隨便看完，結合視頻和書中的例子，你會對瀏覽器的相容性，和JavaScript對頁面對象的處理有一個初步瞭解。之後你需要第二本書，《JavaScript高級程式設計》。一門語言的學習不是一蹴而就，得慢慢來。至少得4個月，當然如果你是天才，2個月也可以。最後在推薦一個很不錯的網址M D N，這裡我把中文網址給大家JavaScript | MDN，有條件的同學可以翻牆看外文的。講到這裡，你以為前端就這麼簡單，那你就大錯特錯了，真正的坑才剛剛開始！你會發現你學的越多，不懂的就越多，永遠有學不完的新技術，新特性出來。這裡給大家說說學習過程中會用的許多軟體，首先就是谷歌瀏覽器，再來個火狐和opera，三個主要瀏覽器，一定要一定要一定要學會F12自己解決BUG，和調試代碼。當然你說要去相容IE6，那好吧，出門左拐。第二個git和github，一點要學會使用，不要求你對快捷鍵有多熟悉，基本功能，包括github pages得學會使用吧第三個翻牆工具，小白還是老老實實花錢吧，也不算貴，18塊一個月，買不了吃虧買不了上當，少去Youtube看電影。翻牆是為了你在使用github方便一點，同時學會使用Google輸入關鍵字，尋找解決問題的辦法，很多時候別人沒有時間來幫你，也沒有義務來幫你。第四個IDE，開發工具，但對於我們來說可能只是代碼編寫工具吧，我還是首推sublime3，我2個月以來也一直用的是它，如何安裝，下載插件自行百度，這個都要別人手把手教建議換個職業。最近我換成了webstorm，因為要從git上下一些代碼，覺得方便些。最後一個，如果以後想前後端一起開發的，可以瞭解PHP，下一個phpstorm，用法和前者差不多。最後，關於前端的學習，光這些哪裡夠啊.但是萬丈高樓平地起，能自學7--8個月，做到上面我所說的，你離找工作也就不遠了。後面的bootstrap框架和angular。以及jQuery，ajax,nodejs,等等這些技術，當你養成一個自我學習的能力，後面這些你可以通過一定的學習去瞭解去接觸。也希望我的這篇文章能給那些猶豫不決的小伙伴一點幫助。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

JavaScript連載16-回調函數、作用域鏈條、預解析

一、回調函數 1.含義：如果你把函數的指針（地址）作為參數傳遞給另一個函數，當這個指針用來調用所指向的函數時，我們就說這是回調函數。 2.函數也是有類型的，下麵舉個回調函數以及函數的類型演示。 function fn() { } console.log(typeof fn); console.l ...
WEB開發日誌1

2020/6/11 23:23 今天做系統時，用到二級菜單，菜單下方放了一個<iframe>標簽，但二級菜單的菜單項太多，導致一部分菜單項被<iframe>覆蓋，從而無法再選中，之後查詢了一下，瞭解到了z-index屬性。 z-index屬性是用來調整元素堆疊順序，在手冊中的取值如下：預設的優先順序 ...
如何用vue-Element-ui實現左側無限級菜單？本文詳細教你

#最近項目中,要用到element-ui的無限級分類菜單，根據角色生成不同的遞歸數據，查閱了網上很多資料，發現很多都不太完整並且沒有很多的延伸性。 ###梳理遞歸數據我們一般拿到後臺的數據是：1.扁平化數據格式 2.遞歸式數據格式複製代碼 let arr = [ { name:小七, id:1 ...
位元組、拼多多前端面經！

位元組跳動一面 1.說出以下代碼的原型關係，以及 Object 和 Function 的原型關係 Function; function test() { } var obj = new test(); __proto__ prototype 2.合併兩個已排序的鏈表：遞歸解法、迭代解法3.判斷數組類 ...
如何實現vue3.0的響應式呢？本文實戰教你

之前寫了兩篇vue2.0的響應式原理，鏈接在此，對響應式原理不清楚的請先看下麵兩篇和尤雨溪一起進階vue 和尤雨溪一起進階vue（二）現在來寫一個簡單的3.0的版本吧大家都知道，2.0的響應式用的是Object.defineProperty，結合發佈訂閱模式實現的，3.0已經用Proxy改寫了 ...
CSS中的float和margin的混合使用

在最近的學習中，在GitHub上找了一些佈局練習，我發現了我自己對佈局超級不熟悉（很難受）。在以前的學習中，感覺使用CSS就記住各個屬性的功能就OK了，但是呢？真的很打臉。不說了，太傷心了，進入正題吧！最近我使用float和margin佈局，加深了我對這兩個一起使用的理解。（新生可以看一下，大神 ...
Html/css 列表項區分列表首尾

列表項，有時需要判斷列表首尾，來篩選設置樣式如上圖，三個項有間隔，怎麼保證設置了列表項之間的距離後，整體還水平居中顯示呢？ .item:not(:first-child) { margin-left: 20px;} 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <me ...
使用vuepress快速搭建個人博客(完整配置與源碼)

大家都說yarn比npm好，今天全局安裝yarn嘗試下 cnpm install -g yarn 安裝完成後，查看yarn版本 yarn --version 項目搭建安裝vuepress yarn global add vuepress 初始化項目創建項目目錄blog mkdir blog cd ...