推薦 20 個適合新手的前端練手項目。
難度層層遞進，內容也很有趣，以遊戲和小工具爲主。
如果你還沒有前端基礎，推薦從這 3 門課開始：
基礎階段：
1. HTML5 簡明教程
從網站的基礎概念開始，帶你瞭解其運行機制。然後學習 HTML 基礎知識，瞭解各種常用標籤的意義以及基本用法。此外，課程還會涉及 HTML5 的內容。
課程地址：shiyanlou.com/courses/4
2. CSS3 簡明教程
課程從最基本的 CSS 概念開始，逐步深入，教你學會如何使用 CSS 同時控制多重網頁的樣式和佈局。同時，課程還會涉及最新版本 CSS3 的內容，帶你掌握新的標準化組件。
課程地址：https://www.shiyanlou.com/courses/1237
3. JavaScript 基礎入門
課程從什麼是 JavaScript 開始，一步步講解 JavaScript 基礎語法、關鍵特性、JSON、WebAPI 等知識點。內容將會涉及網頁窗口交互的方法以及通過 DOM 進行網頁元素的相關操作。
課程地址：https://www.shiyanlou.com/courses/1238
20 個練手項目：
1. 純 CSS 打造網頁版「大白」
本課程利用 HTML 和 CSS 來打造 《超能陸戰隊》裏的 “暖男”— 大白。通過本實驗可學習如何用 HTML 結合 CSS 來設計高端大氣上檔次的圖，並瞭解 HTML 佈局，CSS 構建對象樣式。
課程地址：https://www.shiyanlou.com/courses/328
2. HTML5 實現 2048 遊戲
本課程基於 HTML+CSS+JS+jQuery 實驗網頁版 2048，你能學到 Web 應用程序的開發流程，從佈局，初始化到編寫遊戲邏輯，以及如何讓應用在移動端自適應以應對各種大小的屏幕。
課程地址：https://www.shiyanlou.com/courses/62
3. HTML5 實現拼圖遊戲
本課程基於 HTML5 實現網頁版的拼圖遊戲。實現過程中將涉及到 HTML5，CSS3 及 JavaScript 相關知識。完成這個項目，可以進一步紮實前端基礎知識。
課程地址：shiyanlou.com/courses/1
4. 網頁版別踩白塊遊戲
本課程使用最基礎的 HTML+CSS+JavaScript 實現網頁版別踩白塊遊戲，通過完成這個簡單有趣的遊戲，可以實踐你的前端技能。
課程地址：shiyanlou.com/courses/3
5. HTML 實現掃雷遊戲
本課程帶領大家實現經典小遊戲掃雷，你可以通過實踐 JavaScript 和 CSS 等基本的 Web 開發知識，學習如何對遊戲中的對象進行抽象和封裝。
課程地址：shiyanlou.com/courses/1
6. HTML5 實現刮刮樂遊戲
本課程使用 HTML5 來完成 “刮刮樂” 的刮獎效果。HTML5 是 HTML 的第 5 代版本，也是目前最新的版本，同時本課程還用到 JavaScript 相關技術來完成。學習本課程有助於鞏固前端知識。
課程地址：https://www.shiyanlou.com/courses/133
7. 基於 CSS3 實現抽獎大轉盤
每到節日，各種的抽獎活動數不勝數，大獎很豐厚，但是，獲獎的概率總是很小。我們可以製作一個屬於自己的抽獎轉盤，探尋抽獎過程的奧祕。本項目課將會教大家如何使用 CSS3 來製作抽獎轉盤，也會用到 HTML 及 jQuery 的一些基礎知識。
課程地址：https://www.shiyanlou.com/courses/82
8. HTML5 Canvas 實現放大鏡效果
本課程基於 HTML5 的 canvas 實現了放大鏡效果。主要依靠 canvas 中的 drawImage () 函數，這節課也主要講解這個函數的具體用法，希望能通過實現這個簡單的項目來讓大家初步認識 canvas ，學會基本的 canvas 操作。
課程地址：https://www.shiyanlou.com/courses/59
9. jQuery 實現購物車功能
本課程使用 jQuery 實現在購物車中添加刪除商品，合計商品總價的功能。完成學習，你可以熟練操作 jQuery 實現更多的功能。
課程地址：shiyanlou.com/courses/6
10. CSS 實現紅包模糊效果
微信朋友圈裏的紅包照片，還有 iOS 帶來的「毛玻璃」菜單效果都很吸引眼球，這次我們就嘗試用熟悉的 CSS3 來實現這個效果。
課程地址：shiyanlou.com/courses/4
11. HTML5 Canvas 實現小遊戲
本課程基於 HTML5 的 canvas 實現了一個小遊戲，着重介紹了 HTML5 遊戲開發的流程及遊戲開發中需要處理的東西。對 Web 遊戲開發感興趣的同學可以通過這個項目實踐 HTML5 及 JavaScript 基礎知識。
課程地址：https://www.shiyanlou.com/courses/361
12. jQuery 實現圖片瀑布流效果
本課程基於 jQuery 實現近幾年很流行的瀑布流圖片無限加載，另外我們會學到如何模擬後臺提供 JSON 格式數據。本課程較爲簡單，適合剛入門前端的同學作爲練手項目。
課程地址：shiyanlou.com/courses/6
13. HTML5 實現本地圖片裁剪
本期實驗意在實現利用 HTML5 的 canvas 技術，結合 HTML5 的 File AP I 來實現圖片的本地裁剪。通過本實驗將學習到如何結合 HTML5 與 JavaScript 編寫簡單的單頁應用。本課程難度一般，適合剛入門前端的同學，需要了解 cavas 並且有 JavaScript 基礎。
課程地址：https://www.shiyanlou.com/courses/363
14. JavaScript 實現代碼壓縮成聖誕樹
課程主要通過 JavaScript 實現了一個工具包，運行工具包，可以將你的 JS 代碼壓縮成聖誕樹，壓縮後的代碼還可以正常運行！通過課程，你的 JS 的將掌握的更加熟練。
課程地址：https://www.shiyanlou.com/courses/1326
15. jQuery 實現圖片輪播效果
輪播圖是在各大網站中經常見到的圖片展示形式，本課程基於 HTML+CSS+JavaScript+jQuery 實現圖片輪播，這是一個很容易上手的前端入門練習項目。
課程地址：shiyanlou.com/courses/8
16. Flask 實現簡單聊天室
Web 2.0 時代，即時通信已經成爲必不可少的網站功能，那實現 Web 即時通信的機制有哪些呢？在這門項目課中我們將一一介紹。最後我們將會實現一個基於 Server-Sent Event 和 Flask 簡單的在線聊天室。本課程難度中等，屬於 python 中等的項目課程，需要有 Flask 和 Python 基礎。可以在完成一系列簡單的項目課之後，嘗試突破本課程中的一些難點。
課程地址：https://www.shiyanlou.com/courses/81
17. HTML 實現 Markdown 編輯器
本課程將通過純前端打造一個實時 markdown 編輯器，用到的庫或框架主要有 marked，Ace，highlight.js 及 Bootstrap。通過本完成本項目，將實踐 web 應用程序開發的相關知識。
課程地址：https://www.shiyanlou.com/courses/460
18. Node.js 實現私人筆記本
本實驗將教大家使用 Node.js 技術完成一個私人筆記本項目，每個註冊用戶可在自己的私密空間中書寫自己的心情和感悟。通過 Express 學習 Node.js Web 開發基礎。本課程難度一般，屬於初級課程，適合具有 Node.js 基礎的用戶，學習 Node.js Web 開發。
課程地址：Node.js 實現私人筆記本
19. jQuery 實現特效導航菜單
我目前是在職前端開發，如果你現在也想學習前端開發技術，在入門學習前端的過程當中有遇見任何關於學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我的前端學習交流3000人裙：前面：851 中間：231 最後：348。裏面聚集了一些正在自學前端的初學者裙文件裏面也有我做前端技術這段時間整理的一些前端學習手冊，前端面試題，前端開發工具，PDF文檔書籍教程，需要的話都可以自行來獲取下載。
本課程中我們將完成一個完整的網站導航欄，項目很簡單，但是非常具有實用性，適合剛入門的小白練手。項目主要用到了 CSS 和 jQuery 的動畫方法。
課程地址：shiyanlou.com/courses/7
最後
快去練習吧！