要正式成为一位杰出的 Web 开发者，最慢的方式是练。两个较好的练方式是尽量数处构筑新手工程项目。那原因在于每一工程项目单厢明确提出两个独有的难题和软件系统，因而您化解的工程项目越少，您赢得的科学知识就越少。将您完成的每一工程项目都视作您赢得的奥运金牌。您保有的奥运金牌越少，您就越能准备好应付下两个技术难度Villamblard的工程项目。
为的是协助您进阶，我列举了 15 个新手 JavaScript 工程项目。我还在每一工程项目旁遗留下了“在构筑以后试著”部份。每一工程项目都完全免费代销在 GitHub Pages 上
1. CSS 蓝紫色计算机程序
采用那个单纯的 CSS 蓝紫色计算机程序插件让互联网更很漂亮。此插件Windows10大背景色调，并在萤幕上表明该色调的八进制标识符，只需空格键两个按键方可。
在构筑以后试著呵呵（采用 GitHub Pages 代销）
新浪网门牌号：
https://iamcodefoxx.github.io/Gradient-generator/采用 JavaScript
DOM操作方式计算机程序机能要点和想法
构筑那个工程项目教会了我如何采用 onclick，它用于将机能附加到按键。在这种情况下，该函数生成随机的八进制色调并使其正式成为大背景色调。了解这一点非常有用，因为几乎每一现代 Web 插件都采用按键。我有一种感觉，这是一种我会反复采用的技巧。
2、随机名言展现
如果你需要一点动力，我可以满足你。在那个工程项目中，我们将构筑两个配备大量励志名言的随机名言计算机程序。
在构筑以后试著呵呵（代销在 GitHub Pages 上）
新浪网门牌号：
https://iamcodefoxx.github.io/Random-Quote-Generator/采用 JavaScript
DOM操作方式对象机能要点和想法
那个插件可以通过多种方式创建，但有趣的是看到它是采用字典化解的，字典是一种经常未被充分利用的计算机程序。我还学习了两个单纯的算法，负责在用户每次空格键按键时生成两个随机报价。
3. 图片轮播
需要两个插件来表明您所有的精美图片吗？太棒了，在第三个工程项目中，我们将创建两个插件，允许我们通过空格键按键来浏览图片。在编程中，我们称这些照片轮播或图像滑块。
在构筑以后试著呵呵（采用 GitHub Pages 代销）
新浪网门牌号：
https://iamcodefoxx.github.io/ImageCarousel/采用 JavaScript
DOM操作方式控制结构机能要点和想法
了解此类工程项目的实施方式很有趣。起初，我们采用 CSS 来阻止萤幕上的所有图像。然后我们采用 JavaScript 来操纵 CSS 样式，使其一次表明一张图像。在顺利完成那个工程项目以后，我不确定是否可以直接采用 JavaScript 更改 CSS 样式，事实证明是的。
4.数字时钟
考虑购买数字时钟？不再是了，在此工程项目中，您将学习如何构筑自己的。
在构筑以后先试著呵呵（代销在 GitHub Pages 上）
新浪网门牌号：
https://iamcodefoxx.github.io/DigitalClock/采用 JavaScript
DOM操作方式计算机程序机能对象要点和想法在构筑那个工程项目时，我了解到采用 JavaScript 我们可以创建两个内置对象并采用内置函数从中检索时间。这很棒，因为它无需包含额外的库，就像我们在 Python 或 C++ 中所做的那样。我还了解了两个名为 setTimeout 的内置函数，它用于一遍又一遍地调用另两个函数。对于那个工程项目，有必要采用 setTimeout 来确保我们的时间得到正确更新。
5.计算器
计算器。没有它，任何 JavaScript 新手工程项目列表都是不完整的，我们在这里也不例外。
在构筑以后试著呵呵（采用 GitHub Pages 代销）
新浪网门牌号：
https://iamcodefoxx.github.io/Calculator/采用 JavaScript
DOM操作方式机能要点和想法
看到构筑起来如此单纯几乎令人难以置信。在构筑那个以后，我认为每一表达式都需要用某种复杂的函数手动化解。事实证明，有两个名为 eval 的内置 JavaScript 函数可以为我们处理那个难题。我真的很喜欢构筑那个插件，甚至改变了它的风格以赋予它我自己的风格。
6.杂货清单，记账簿
饥饿？让我们用那个购物清单插件去杂货店吧。可以更加清晰的记录你每天花销了多少钱，做两个单纯的记录吧！
在构筑以后先试著呵呵（采用 GitHub Pages 代销）
新浪网源码：
https://iamcodefoxx.github.io/Grocery-List/采用 JavaScript
DOM操作方式机能控制结构事件监听器要点和想法这是两个非常酷的插件，它是列表中我们采用事件监听器的第两个工程项目。事实上，我们采用事件监听器在用户空格键“回车”键时将新工程项目添加到杂货清单，并在用户空格键特定工程项目时采用另两个事件监听器从列表中划掉该工程项目。了解负责删除 div 中所有元素的函数是如何编写的很有用。在本例中，此函数删除了我们杂货清单中的所有工程项目。
7. 小费计算器
采用此小费计算器，无需再围着桌子看谁在处理小费。在构筑以后试著呵呵（采用 GitHub Pages 代销）
新浪网源码：
https://iamcodefoxx.github.io/TipCalculator/采用 JavaScript
DOM操作方式机能要点和想法开发确定每一人给小费金额的函数相当容易。也许这里最大的挑战是采用 CSS 来模仿插件的设计。它看起来像两个相当单纯的设计，但如果不先看教程，实际上做起来有点挑战。
8.待办事项清单
让我们采用这款出色的待办事项列表插件充分利用我们的一天。
在构筑它以后试著它（采用 GitHub Pages 代销）
新浪网门牌号：
https://iamcodefoxx.github.io/TipCalculator/采用 JavaScript
DOM操作方式事件监听器控制结构计算机程序机能要点和想法
那个软件系统与购物清单插件非常相似。我发现自己回头查看那个标识符来协助我化解那个难题。但是，有一点不同，那是更改列表中每一工程项目的大背景色调的机能。我认为这是对工程项目的两个非常好的补充，因为它使它看起来更好。总的来说，我会说这更像是两个审查工程项目，但它仍然是两个较好的实践。
9. 抽认卡，电子提问便利贴（带本地存储）
这是两个允许您创建抽认卡的应用程序，因而请收起那些纸质抽认卡，因为镇上有一位新老板。
在构筑以后试著呵呵（采用 GitHub Pages 代销）
源码门牌号：
https://iamcodefoxx.github.io/Flashcards/采用 JavaScript
DOM操作方式机能控制结构要点和想法首先是两个多么很漂亮的插件。它可以协助学生学习并避免他们花钱购买纸质抽认卡。这是我们采用 flexbox 的列表中的第两个工程项目，因而一开始并没有什么挑战性。然而，一旦我掌握了它，它实际上非常易于采用，并且使工程项目更具活力。特别是，我真的很喜欢 align-item、flex-wrap 和 justify-content 选项，因为它们使抽认卡具有响应性。
10.便签
让我们构筑两个便利贴插件。是的，您现在可以扔掉所有这些便签纸。
在构筑以后试著呵呵（采用 GitHub Pages 代销）
新浪网源码：
https://iamcodefoxx.github.io/Sticky-Notes/采用 JavaScript
DOM操作方式事件监听器机能计算机程序要点和想法构筑那个工程项目的标识符与抽认卡工程项目非常相似，但这没难题，因为需要练。事实上，如果我没有那个工程项目的标识符可以依靠，我将不得不再次观看抽认卡教程视频以检查我是否正确地顺利完成了那个工程项目。当然，那个工程项目确实有一些独有的机能，因而弄清楚如何对这些部份进行编码是一项挑战。总的来说，我从那个工程项目中学到了很多东西，因为它结合了我们迄今为止所学的一切。
11. 计时器
让我们构筑两个计时器。预备，准备，开始！在构筑它以后试著它（采用 GitHub Pages 代销）
源码门牌号：
https://iamcodefoxx.github.io/Timer/采用 JavaScript
DOM操作方式事件监听器机能对象要点和想法事实证明，构筑两个单纯的计时器比看起来要难。人们会认为采用数字时钟工程项目中的相同 setInterval 函数就足以表明正确的时间。事实证明，这种技术根本不起作用。对于那个工程项目，我们创建变量来保存关于时间的不同信息，例如时间开始的时间、时间停止的时间以及时间停止的时间。如果没有这些变量和我们用它们执行的计算，我们的数字时钟将无法正确表明经过的时间。
12. 4 岁儿童学数学
两个很酷的插件，可以教孩子们基本的算术运算。
在构筑以后试著呵呵（采用 GitHub Pages 代销）
新浪网源码：
https://iamcodefoxx.github.io/Math4Kids/采用 JavaScript
DOM操作方式事件监听器控制结构计算机程序总结和思考在那个工程项目中，我学会了如何从两个网页切换到另两个网页以及如何播放声音文件。事实证明，这两项任务都相当单纯。最难的部份是弄清楚如何将答案随机放在不同的盒子里，这样正确的答案就不会总是在同两个位置。我尽力自己弄清楚，但最终还是看了软件系统的教程。
13. Unsplash API（图像计算机程序）
新网站需要一些图片吗？让我们构筑两个图像计算机程序吧。
在构筑以后试著呵呵（采用 GitHub Pages 代销）
新浪网门牌号：
https://iamcodefoxx.github.io/UnsplashAPI/采用 JavaScript
DOM操作方式承诺拿来机能控制结构事件监听器要点和想法顺利完成那个工程项目教会了我如何采用 JavaScript 的内置提取来发出 API 请求。在构建那个工程项目以后，我完全不知道 Unsplash API 的存在。有趣的是，许多老牌公司都将此 API 集成到他们的网站中。每当我的桌面上需要新壁纸时，保有两个图像计算机程序也很酷。
14.滚动打字字幕API（打字机）
新浪网源码：
https://iamcodefoxx.github.io/Typewriter/采用 JavaScript
DOM操作方式事件监听器控制结构计算机程序承诺机能拿来要点和想法学习如何编写打字机脚本很棒。我实际上已经在视频游戏中看到了这种效果。现在我可以在构筑自己的游戏时采用它。就标识符而言，有趣的是了解到我们并不总是需要 CSS 来制作很酷的动画。在那个工程项目中，我们采用内置的 JavaScript 子字符串函数来制作打字机效果。
15. 方形卡片（模板）
一种表明数据的时尚方式或只是一张方形卡片。在构筑以后先试用（代销在 GitHub Pages 上）
新浪网源码：
https://iamcodefoxx.github.io/SquareCards/采用 JavaScript
事件监听器机能收获和想法在那个工程项目中，我学会了如何直接从 JavaScript 打开 YouTube 视频和网页文章。这是对我作为 Web 开发者现在保有的工具库的两个较好的补充（感谢 15 个新手工程项目！）。
这 15 个工程项目是 25 个新手工程项目列表的一部份。如果您想查看其余内容，可以关注我，后续会继续给大家分享！如果觉得有用，记得点赞珍藏哦！
如果你才开始学习后端，我们这里有html+css阶段完整教程，我们在钉钉群里有全套的课程包含（进阶到精通课程、4个综合工程项目（称之为15天训练营，在群里是从第二十三节课开始的）、30个练案例！），如果学习有难题，还可以在群里得到老师
