言：

最近在 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++编程】有一些视频希望可以帮助到你，学习不怕从零开始，就怕从不开始。