推薦 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 開發知識，學習如何對遊戲中的對象進行抽象和封裝。
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 來實作這個效果。
11. HTML5 Canvas 實作小遊戲
本課程基于 HTML5 的 canvas 實作了一個小遊戲，着重介紹了 HTML5 遊戲開發的流程及遊戲開發中需要處理的東西。對 Web 遊戲開發感興趣的同學可以通過這個項目實踐 HTML5 及 JavaScript 基礎知識。
課程位址：https://www.shiyanlou.com/courses/361
12. jQuery 實作圖檔瀑布流效果
本課程基于 jQuery 實作近幾年很流行的瀑布流圖檔無限加載，另外我們會學到如何模拟背景提供 JSON 格式資料。本課程較為簡單，适合剛入門前端的同學作為練手項目。
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 實作特效導航菜單
本課程中我們将完成一個完整的網站導航欄，項目很簡單，但是非常具有實用性，适合剛入門的小白練手。項目主要用到了 CSS 和 jQuery 的動畫方法。
課程位址：shiyanlou.com/courses/7
最後