很多人剛開始學習前端的時候會看非常多的文章，找非常多的資料，但其實並不知道從哪裡開始。
這裡告訴大家如何分階段學習前端，以及更加有效地利用資源。
新人前端學習的話可以分兩大板塊，一是HTML和CSS，二是Javascript、框架和設計模式。這裡又把它們兩個的學習步驟細分了，接下來就詳細講一下：
一、HTML和CSS部分
1、HTML和CSS基礎知識
在前端開發中，一切都從HTML和CSS開始。HTML和CSS控制你在網頁上看到的內容。當CSS處理樣式和布局時，HTML指示內容，這些內容可以是文字，圖片，視頻等。
入門書籍推薦
《Head first HTML&CSS》
《CSS權威指南（第三版）》
《精通CSS》
在線課程學習：
HTML基礎入門
CSS速成教程
HTML5基礎入門
Bootstrap3.0入門學習
完成上面的教程後可以看一看CodeAcademy的建立網站這門課Create a Website - Structure, CSS, Boundaries and Bootstrap ，是使用HTML和CSS構建網站的入門級教程。
練習
在掌握基礎概念後，就要把知識變現了，接下來就要做點有意思的事。
下面介紹推薦幾個實驗，幫助你進一步了解 HTML 布局，CSS 構建對象樣式。
純 CSS 打造網頁版「大白」
編寫組件，實驗重點不是重新創建整個頁面。
找了幾個包含易於閱讀的原始碼的網站，選擇幾個關鍵組件，如導航欄或頁腳進行編碼可以幫助更好理解HTML和CSS。
AirBnB ：複製他們的頁腳
PayPal ：複製他們的導航欄
Invision ：複製頁面底部的註冊部分
另外，對於任何網站都是可以看到它的HTML和CSS 只需右鍵單擊頁面或頁面上的組件，單擊「檢查」，彈出面板的左側是HTML，右側是CSS。
2、HTML和CSS最佳實踐
1）語義標記
HTML和CSS的最佳實踐之一是編寫語義標籤。良好的Web語義意味著使用適當的HTML標記和有意義的CSS類名來傳達結構意義。比如
header
標籤定義文檔的頁眉（介紹信息）。
HTML5語義標籤
語義化HTML：有含義的標記
What Makes For a Semantic Class Name?
2）CSS命名規範
具體內容可以參考 如何規範 CSS 的命名和書寫？
3）CSS重置
在HTML標籤在瀏覽器里有默認的樣式，例如 p 標籤有上下邊距，strong標籤有字體加厚樣式，em標籤有字體傾斜樣式。不同瀏覽器的默認樣式之間也會有差別。在切換頁面的時候，瀏覽器的默認樣式往往會給我們帶來麻煩，影響開發效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，也就是把瀏覽器提供的默認樣式覆蓋掉。
MeyerWeb是一種流行的重置。如果你想深入挖掘，還可以閱讀 Create Your Own Simple Reset.css File。
4）跨瀏覽器兼容
跨瀏覽器支持意味著你的代碼支持大多數最新的瀏覽器。某些CSS屬性（如轉換）需要供應商前綴才能在不同的瀏覽器中正常工作。需要在多個瀏覽器上測試網站，包括Chrome，Firefox和Safari等。
跨瀏覽器兼容的技巧可以看看這篇文章 跨瀏覽器兼容的重要性技巧
5）CSS預處理器和後處理器
CSS預處理器用一種專門的程式語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件。兩個主要的CSS預處理器是Sass和Less。
CSS後處理器在由預處理器手寫或編譯後對CSS應用更改。例如，像PostCSS這樣的一些後處理器具有自動添加瀏覽器供應商前綴的插件。
6）網格系統與響應
網格系統提供了快速構造網頁內容布局的方法，設計師可以根據預製結構進行布局，節省了大量的時間和精力。
Bootstrap，Skeleton和Foundation等網格框架提供了管理布局中行和列的樣式表。
網格系統的主要目的之一是為網站添加響應能力。響應性意味著網站會根據窗口寬度調整大小。大家在入門學習前端的過程當中有遇見任何關於學習，行業方面的問題，都可以申請加入我的前端技術顧問秋秋裙，前面輸入是600中間610後面151最後連起來就是。缺乏相關的基礎教程也可以直接來找我要，我這裡整理了最新的前端基礎教程，學習前端的這個過程當中我也收集了很多前端學習手冊，面試題，開發工具，PDF文檔書籍教程，可以直接分享給你們。
練習
掌握了最佳實踐後就要進行實際檢驗。接下來的兩個實驗的目標是練習編寫乾淨的代碼並觀察最佳實踐對可讀性和可維護性的長期影響。
能夠有效地重構代碼是前端開發人員的一項重要技能。創建質量代碼是一個疊代過程。CSS體系結構：重構您的CSS是重構代碼的良好起點。
在重構代碼時，有幾個問題要弄清楚：
瀏覽代碼時，你能夠快速辨別結構和關係意義嗎？
你是否不斷重複使用相同的十六進位顏色代碼？將它重構為Sass變量是否會更有意義？
你的代碼在Safari上的工作方式與在Chrome上一樣嗎？
你能用像Skeleton這樣的網格系統替換你的一些布局代碼嗎？
你經常使用 !important 標籤嗎？ 你怎麼解決這個問題？
二、JavaScript部分
1、JavaScript基礎知識
1）JavaScript
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言。
Javascript基礎（新版）
2）交互
現在你已經基本了解了JavaScript，下一步就是將它應用到Web上。要了解JavaScript如何與網站交互，首先必須了解文檔對象模型（DOM） 。DOM 是 W3C（全球資訊網聯盟）的標準，它能夠在所有瀏覽器上提供一種一致的方式，通過代碼訪問HTML的結構和內容。
在瀏覽器加載一個頁面時，瀏覽器會解析HTML，並創建文檔的一個內部模型，其中包含HTML標記的所有元素。
JavaScript可以與DOM交互（JavaScript使用DOM創建或刪除元素等等）
JavaScript修改了DOM時，瀏覽器會隨著動態更新頁面。
JavaScript與DOM交互以改變和更新它。以下是我們選擇HTML元素並更改其內容的示例：
var container = document.getElementByIdx_x(「container」);
container.innerHTML = 'New Content!';
有關常見JavaScript DOM交互的列表，請查看JavaScript函數和幫助
高性能JS-DOM
3）檢查器
要調試JavaScript，我們使用瀏覽器內置的開發人員工具。大多數瀏覽器都提供了檢查器面板，可以查看網頁的來源。
Chrome開發人員工具
Firefox開發者工具
練習
基於 JavaScript 實現玫瑰花
基於 JavaScript 實現打地鼠遊戲
基於 JavaScript 按鍵控制坦克移動
網頁版別踩白塊遊戲
2、更多JavaScript部分
1）命令與陳述
JavaScript與DOM交互的方式有兩種：命令式和聲明式。一方面，聲明式編程的重點是什麼情況。另一方面，命令式編程關注的是什麼以及如何。
2）Ajax
Ajax是一種允許網頁使用JavaScript與伺服器連接的技術。
PHP 之 Ajax 實例講解
ajax（Ajax 開發）
the front page of the internet
3）jQuery
事實是，有很多DOM操作庫提供API簡化代碼。最流行的DOM操作庫之一是jQuery。
基於 jQuery 實現圖片輪播
4）ES5與ES6
理解JavaScript的另一個重要概念是ECMAScript以及它與Javascript的關係。ES5和ES6是JavaScript使用的ECMAScript標準。
練習
基於 jQuery 實現圖片輪播
網頁版2048_HTML5
jQuery在購物車的使用
3、JavaScript框架
JavaScript框架列表：
Angular
React + Flux
Ember
Aurelia
Vue
Meteor
2）設計模式
JavaScript框架不會重新發明輪子。他們中的大多數都依賴於設計模式。
Decorator
Factory
Singleton
Revealing module
Facade
Observer
理解並能夠實現其中一些設計模式不僅可以使你成為更好的工程師，還可以幫助你了解一些框架在幕後的工作。
3）AngularJS
AngularJS是一個JavaScript MVC，有時是MVVM框架。它由Google維護，並在2010年首次發布時風靡JavaScript社區。
4）React + Flux
React是一個用於構建用戶介面的庫。
Facebook設計了React和Flux來解決MVC及其大規模問題的一些缺點。看看他們著名的演示文稿Hacker Way：在Facebook重新思考Web應用程式開發。
三、綜合練習
瀑布流加載圖片牆
基於 HTML5 實現本地圖片裁剪__實驗樓 - 實驗樓
基於HTML5 Canvas實現小遊戲
基於 Canvas 實現放大鏡效果
校花評比排名項目
Java和WebSocket開發網頁聊天室
以上就是關於前端新人學習的內容。
作者：web小猿
連結：https://www.jianshu.com/p/065aca6a2e5a