大家好，我是若川。最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，已經有超50+人提交了筆記，群里已經有超1200人，感興趣的可以點此鏈接掃碼加我微信?ruochuan12

大家好，我是山山而川，一位零基礎轉行前端的小白，很榮幸受freeCodeCamp邀請給大家分享一下有關零基礎學習前端的內容。

為什么寫這篇文章呢

我是95年的，非CS專業，很早之前就接觸到了編程這一塊（當14年iOS開發特別火），但是那個時候并沒有太多意向或興趣去學深入了解，只是覺得看著挺有意思，看過幾眼就沒后續了。現在想想挺遺憾的，如果當時身邊有個人可以指點一下，說不定現在也是個六七年的“老程序員”了。

不過現在也不算太遲。現在正在學習前端轉行中，完完全全的零基礎，所以踩過的坑有很多。相信有不少跟我類似經歷的伙伴在這個過程中應該會有不少困惑，比如：網上教程這么多，到底該學哪個？看不懂怎么辦？學到什么程度才能找到第一份工作呢？那么我們今天的主題就是給大家分享一下我總結的學習路線。

前端入門概述

首先說明一下，前端學習是一個螺旋上升的過程，既要反復地看書，也要抓緊時間進行實戰。只看書，看了就會忘，所以必須將看書和寫代碼相結合。

然后大家最關心的入門前端開發到找工作3～6個月左右就可以了，主要需要學習 HTML、CSS 和 JavaScript 三大件。之后學習前端主流框架的使用，并基于已學內容開發一個小項目進行實戰。以上內容學習并理解透徹以后，就算真正地入門前端了。

當然如果是全職學習，那么時間可以縮短為3-4個月，反之零零散散的學習可能6-8個月，甚至一年之后，具體的學習時間大家自己去規劃，重要的是合理計劃時間及堅持不懈執行（這點很重要，很多人就是死在了這里）。

下面是具體的學習教程

我這篇教程是從有想法轉前端開始就從各種渠道匯總總結的，期間不知道入了多少坑，比如百度隨便搜索下前端教程、前端怎么學，然后立馬一大推營銷號推薦免費領取基礎課程，其實多看幾家你就知道本質上都是給你賣課的；另外有很多大佬推薦的教程要么是時間比較久了（意味著教程老了），要么就是比較零散，不系統（作為正在學習的我來說，能穩定找到第一份工作就是好教程），所以以下內容都是我整理了好久才總結的，綜合了微信公眾號作者“技術漫談”丁哥、“若川視野”川哥、運營轉前端成功的年年、網上各種資源等總結而成的，希望可以幫助到大家（幾位大佬和公司前端同事一致認為，以下內容好好學，全部學完，找到一份工作不難。前提是你堅持下去）。

階段一：HTML + CSS

一、學習資料

首先是前端三大件 HTML、CSS 部分的學習，入門階段不需要學的多深入，只需要抓住幾塊核心內容，快速過一遍就行，例如選擇器、層疊、繼承、盒模型、Flex 頁面布局和網格等。太細節的內容不用記，之后需要了再回來查。

1、《Head First HTML and CSS》：這本書比較簡單，適合新手入門

2、MDN：學習 HTML 學習路徑部分，整體瀏覽一遍，不需要死記硬背

3、W3school：學習 HTML 部分，整體瀏覽一遍，不需要死記硬背

4、《HTML5 與 CSS3 基礎教程》（第8版）：這本書里面有非常多 HTML 標簽，整體瀏覽一遍，不需要死記硬背，知道有哪些標簽以及各自的作用是什么，整體有一個印象即可。

5、《精通CSS（第3版）》或《深入解析CSS》：第一本書是目前最適合 CSS 入門的書，大家可以優先考慮看這個；第二本書是2020年的新書，內容和第一本差不多，奇虎團工程師翻譯質量也有保證，講得也非常詳細，不想看第一本看這本也行。

二、代碼實戰

學習完了 HTML、CSS，下面就進入到代碼實際練習和鞏固階段了，freeCodeCamp?可以很好的幫我們實現。在freeCodeCamp的“響應式網頁設計”部分，可以把前面學到的知識整體練習一遍，最后還有五個小項目練習來確認基礎掌握情況。

在做項目練習的時候如果發現靜態頁面寫不出來很正常，可以先去看別人寫的代碼，看完后就知道怎么寫了。

全部寫完之后可以根據百度前端代碼規范，重寫這五個項目的代碼。重寫之后，再跟原網頁代碼對比對比，看看還有哪方面的不足。

階段二：JavaScript

一、學習資料

學習完HTML、CSS之后我們就可以進入JavaScript的學習了，JS非常重要，也有一定的學習難度，同學們在這里花費的時間可能會有點多，JS主要包括語言基礎（ECMAScript）、DOM 和 BOM。這個時候我們肯定不清楚這到底是是什么東西，可以用作什么，沒關系，先學就是咯。

1、現代 JavaScript 教程：JS 推薦從這個教程學起，這是我無意間發現的一個寶藏網站，這個網站是依托于 learn.javascript.ru 而來的（中文翻譯的主要主要負責人是leviding，阿里前端工程師，很強），而 learn.javascript.ru 是俄羅斯最大的 JavaScript 教程和學習平臺之一，質量有保障，而且是在線學習，教程都是實時更新且免費的，不像書籍可能存在看的技術過時的問題。現代 JavaScript 教程是 React 官方文檔中與 MDN 并列推薦的 JavaScript 學習教程，學完整個教程，相當于已經學完了所有JavaScript內容。

2、《JavaScript 高級程序設計（第 4 版）》：這本是速成紅寶書，很經典，推薦先看現代 JavaScript 教程再看這本紅寶書，或者搭配著看。紅寶書可以和現代 js 教程相互補充取長補短，同時還可以鞏固知識點，加深對 JavaScript 的理解。書中有大量 API 的章節，不用死記硬背，瀏覽一下就行，用到再回來查。

（1）第 1~11 章講的是語言特性，必須掌握；

（2）第 12、14-17 和 23-26 章是重點內容重點看；

（3）第 13、19 和 21 章是次重點內容，盡量看一下；

（4）第 28 章是最佳實踐，看完前面內容后來學習如何寫出更好的代碼；

（5）第 18 章 Canvas、第 20 章 API、第 22 章 XML 和第 27 章工作者線程，可以在學有余力或者用到的時候看一下，不是初期重點內容。

3、《JavaScript DOM 編程藝術》：DOM 學習書籍，主要講 DOM 知識，以及通過實戰深入理解相關知識，其實這本書的內容現代JS和紅寶書都講過了，有時間的同學可以考慮看一下。