難度層層遞進，內容也很有趣，以遊戲和小工具為主。
如果你還沒有前端基礎，推薦從這 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 實現特效導航菜單
本課程中我們將完成一個完整的網站導航欄，項目很簡單，但是非常具有實用性，適合剛入門的小白練手。項目主要用到了 CSS 和 jQuery 的動畫方法。
課程地址：shiyanlou.com/courses/7
最後
快去練習吧！
掃描下方二維碼
獲取web前端、學習資料視頻
備註『公眾號』