言：

最近在 GitHub 上發現了一個 vanillawebprojects[1] 開源倉庫，里面收集了 20 個 JavaScript+Html+CSS的練手項目，沒有使用任何框架，可以讓你從基礎入門到深入學習。這些項目原本是 Udemy 上 20 Web Projects With Vanilla JavaScript 課程的一部分，但是如果你已經擁有了一些基礎，不妨試著看一下源碼，然后模仿實現吧

1. Form Validator 表單驗證

判斷輸入的表單字段是否合法

2. Movie Seat Booking 預定電影座位

一個簡單的電影座位預定演示項目

3. Custom Video Player 定制視頻播放器

一個簡單的網頁視頻播放器

4. Exchange Rate Calculator 匯率計算器

計算不同貨幣的兌換匯率

5. DOM Array Methods Project DOM 數組方法

練習如何操作 DOM 數組

6. Menu Slider & Modal 動態菜單以及彈窗

練習如何彈出登錄注冊窗口，以及滑動彈出菜單

7. Hangman Game 字符偵探游戲

練習如何判斷隱藏字符是否正確

8. Mealfinder App 點餐應用

簡單的點餐查詢應用

9. Expense Tracker 購物結算應用

簡單的購物車結算應用

10. Music Player 音樂播放器

簡單的網頁音樂播放器

11. Infinite Scrolling 網頁無限滾動演示

網頁無限向下滾動實現

12. Typing Game 打字游戲

簡單的打字輸入游戲

13. Speech Text Reader 文本閱讀器

文本閱讀器

14. Memory Cards 記憶卡片

測試記憶的記憶卡片

15. LyricsSearch App 歌詞搜索應用

網頁歌詞搜索器

16. Relaxer App 休閑呼吸應用

模擬呼吸的節奏

17. Breakout Game 彈跳破冰游戲

簡單的網頁破冰游戲

18. New Year Countdown 新年倒計時

網頁新年倒計時

19. Sortable List 榜單應用

網頁財富榜單

20. Speak Number Guessing Game 猜數字游戲

說出數字，猜測數字

今天我們給大家分享了，20 個 JavaScript+Html+CSS 練手小項目，大家覺得哪個最簡單，哪個最復雜呢？趕緊去 Github 倉庫拉取項目，碼上行動吧

歡迎關注公眾號：KnowHub 知識加油站！

參考資料

[1]

vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects

屆生或者要自學前端的同學看過來，這里有完整的前端路線圖+學習方法+項目學習+簡歷；

一、前端學習時間安排表

• HTML+CSS：25天
• JavaScript：20天
• 環境基礎：15天
• Bootstrap（15天）、jQuery UI（15天）、Amaze UI；流行的前端框架：jquery mobile、angular.Js（20天）、Vue.js（20天）、React.js（20天）
• Echarts（1周）、tableau（1周）

以上時間安排是每天至少學習6小時的時間安排，大家可以根據每天學習的小時數字型加減天數。

二、前端學習資源

知識點包括了：HTML+CSS-->移動web->JavaScript基礎-->Web APIs->數據交互&異步編程-->Node.js-->Vue2+Vue3-->React核心技術-->微信小程序。

黑馬程序員前端：2022年前端學習路線圖52 贊同 · 10 評論文章

很多小白開始自學前端都是先來背HTML的標簽，從HTML、body、div...往下背，跟背英語單詞一樣，學了背了就忘了，然后失去學習動力。

其實正確的方式是，從靜態頁面的完成開始，不用過于糾結記住標簽，因為很多前端大牛都是通過多年的經驗形成了下意識的記憶。

HTML標簽明白了之后，開始了CSS學習，什么陰影，圓角、動畫等等的，這些都是日常應用。但是這里需要注意的是，要熟練掌握css定位的原理，盒子模型，等等，如果這些沒有弄清楚，javascript學習就會遇到困難。

更多HTML+CSS學習筆記如下（已完結）：

• 認識網頁 / HTML標簽大全 / 表格 / 列表
• CSS入門筆記 / Css樣式表 / emmet語法 / CSS的復合選擇器 / 顯示模式 /
• CSS背景 / CSS三大特性 / 盒子模型 / 圓角邊框、盒子陰影、文字陰影
• 浮動知識點匯總 / PS切圖 / CSS屬性書寫順序（重點） / CSS練手之學成在線頁面制作
• CSS定位的4種分類 / 學成在線模塊添加 / HTML+CSS之定位（position）的應用
• 案例：淘寶輪播圖 / 元素的顯示與隱藏 / 土豆網鼠標經過顯示遮罩 /
• 【重點】CSS之精靈圖 / 字體圖標 / 用戶界面樣式源碼 / vertical-align 屬性應用 /
• 溢出的文字省略號顯示 / 常見布局技巧+案例 / CSS新增選擇器 / 盒子模型和其他新特性

HTML+CSS項目《品優購》完整筆記+源碼（萬字版可復制）：

• HTML+CSS大項目1：品優購項目筆記+源碼（萬字！收藏）
• HTML+CSS大項目2：品優購項目筆記+源碼（萬字！收藏）

移動開發筆記（更新中）

• 移動WEB開發之入門&視口 / 二倍圖 / 主流方案選擇 / 攜程網首頁案例制作
• rem基礎&媒體查詢 / less基礎 / rem實際開發適配方案 /

JavaScript基礎內容（已完結）

• 認識JavaScript / 注釋以及輸入輸出語句 / 變量的使用、語法擴展、命名規范
  數據類型簡介以及簡單的數據類型 / 獲取變量數據類型/運算符&算數運算符 / 遞增和遞減運算符
  比較運算符和邏輯運算符 / 賦值運算符以及運算符優先級 / 流程控制-實際案例學習if語句
  三元表達式&分支流程控制 switch 語句 / JavaScript的for循環學不明白怎么辦？
  以案例學習JavaScript雙重for循環 / JavaScript中while以及do while循環
  JavaScript遍歷數組，附5個案例 / 函數的概念和使用/JavaScript函數的參數
  JavaScript的返回值 / 函數案例練習

JavaScript最全拔高（更新中）
JavaScript面向對象開發相關模式 / JavaScript創建對象簡單方式到優化 / JavaScript面向對象游戲案例：貪吃蛇

其他資源：

• TypeScript 中文手冊：官網翻譯版。
• Javascript模塊化編程（一）：模塊的寫法
• Javascript模塊化編程（二）：AMD規范
• Javascript模塊化編程（三）：require.js的用法

三、項目和簡歷

這里就不多說了，是什么寫什么就好。

開發經驗

• ? 精通 HTML、CSS、JS 基礎，熟悉 H5、CSS3 新屬性，熟悉 ES6 新特性
• ? 熟悉響應式，flex 等頁面布局方式，熟練使用 less、sass
• ? 熟練運用 Vue、React 前端開發框架，了解 ReactNative 的基本實現原理
• ? 熟悉組件間的通信和數據的管理 , 熟練 Redux/Vuex 使用
• ? 熟悉常見 UI 框架如：Bootstrap、Element-UI、Vant、Ant-design 等
• ? 熟悉 Webpack 等構建工具
• ? 熟悉微信小程序開發流程
• ? 熟練使用 Git 等項目管理工具
• ? 了解 NodeJS，了解 Express 框架開發

項目經歷（這里可以參考寫）

項目一：優聯校園后臺管理系統

項目描述：優聯校園是一款大學生校園生活服務軟件，為在校大學生提供社團活動，二手交易，學生兼職，學生租房，

駕校報名、微商城等服務，項目技術棧：React + React-router + Axios + Ant-design + React-redux

責任描述：

• 1. 負責應用管理模塊，包括社團管理、二手交易、學生兼職、學生租房等界面，使用 Antd 中 Button , Form , Modal ,
• Table 等組件來展示頁面
• 2. 使用 React-router 來配置路由，實現組件間頁面的跳轉
• 3. 使用 Axios 來請求數據并渲染頁面
• 4. 根據需求文檔完成業務邏輯
• 5. 抽離公共組件并封裝到項目組件庫中

自我介紹

多人說不要寫自我評價。覺得這個版塊非常沒有用。我認為恰恰相反，千篇一律的自我評價，什么認真啊踏實啊確實讓人反感。但是如果可以寫成【敏捷開發的忠實粉絲，單元測試驅動開發的實踐者，曾主動重構代碼】，【看書愛好者，年度目標5本書，已完成4本，正在看《領域驅動設計》】。有沒有感覺這樣的自我評價，就非常有意思？

經我作為一名學生，也很苦惱自己會不知道如何學習編程，自己平時總結下來了相關的學習資源，大家平時也可以養成積累的好習慣，下面是一些簡單的分享，適合剛入門或者將進入職場的大家。

1、菜鳥教程

https://www.runoob.com/

里面有各種語言的案例和講解，適合自己翻閱快速入門和對照著學習改錯

2、博客園

https://www.cnblogs.com/

和csdn網站差不多，但是里面的內容質量高，適合自己快速找到有效的學習文章或者素材

3、CSDN

https://www.csdn.net/

CSDN內容現在比較混雜，內容相對來說不太好了，但是里面的一些知識以及招聘信息等還是可以看看的

4、源碼網站

http://www.verysource.com/download/jpeg_6b_rar-603868.html

適合自己自學時練手的時候找到相關項目練習

5、我愛競賽網

http://www.52jingsai.com/portal.php

如果你是一名大學生，可以在這上面施展拳腳，找到適合自己的比賽，國內來說是做的非常不錯的網站了

6、源碼之家

https://www.mycodes.net/

看起來像一個界面不夠優良的垃圾網站，但其實這個網站很良心，里面覆蓋面廣，收集了各個行業比較突出的人的文章和分享的內容

7、騰訊軟件中心

https://pc.qq.com/

適合大家下載各種各樣的軟件，比如devC++編譯器，錄屏軟件，播放器等，下載速度快，不會出現各種各樣的垃圾網站

8、稿定設計

https://www.uupoop.com/

適合在線PS,無需下載ps軟件,也可以修圖等待，比較實用?方便

9、騰訊云+社區

https://cloud.tencent.com/developer

很多人被邀請到這上面開始寫作和推廣文章，也建立了各種論壇，但是我的技術有限，大多數大牛的文章自己知之甚少。

10、關注一些公眾號平臺，或者自己做一個申請一個公眾號或者其他網站賬號，把自己所積累的有用的知識做一個分累總結。方便自己復習用，這個特別有效果也是自己實行大半年以來的感悟，總結起來還是對自己有很大的幫助！

同樣，也希望我的這一些分享對你有幫助。

所以說，想要在程序員生涯內有更高的成就的話，最最重要的是盡可能的提升自己的編程能力，并且，與其想著怎么去提升，不如從現在開始動手動腦，如果對于C/C++感興趣的話，可以關注+私信小編【C/C++編程】有一些視頻希望可以幫助到你，學習不怕從零開始，就怕從不開始。