Day 5【JavaScript】可以看到，将近是20公分的深度

【前言】

我的习惯是先在 Youtube 看完落落长的影片，然後才去 Coursera 看看有什麽学院派会特别注重的地方，还有与 Youtube 教学不同的地方在哪。好处是 Coursera 上面还有一些简单的题目可以写，能够检验一下自己有没有真的学会！

到後面 React.js, Solidity, Smart Contract 都是这样学习的，我自己认为这样学习方法非常有效。通常 Youtube 教学 + Coursera 的影片加起来不会超过 25 个小时（我都会视讲师语速调1.25x~1.75x快转，或跳过一些很基础的东西），再加一些题目以及查询资料的过程，通常 30~50 个小时就可以「大致懂」一个语言在做什麽。

不知道大家都怎麽算 CSS 的像素，一点一点慢慢调，还是用尺~~（温度计）~~量？

【教学资源 - JavaScript】

今天推荐一样是 The Net Ninja 的 JavaScript 教学影片与相关资源。
JavaScript Tutorials for Beginners

一如既往地有很简洁好懂的简报，搭配实作轻松的程序码范例！

最後在 Coursera 上找到一个不错的课程，把前端三巨头再复习一次并且写完题目！
HTML, CSS, and Javascript for Web Developers

【课後练习】

今天一样接续昨天的登入网页！

首先是 focus 以及 hover 特效：

希望按下输入格输入文字的时候，可以有一个向左右延伸的感觉并且更改外框颜色，以及在 hover 递交格的时候可以反白成绿色，并且把滑鼠鼠标改成手指状。

.box input[type = "text"]:focus, .box input[type = "password"]:focus{
    width: 250px;
    border-color: #2ecc71;
  }

  .box input[type = "submit"]:hover{
    background: #2ecc71;
  }

目前的成果：看了看之後觉得这样好像没有什麽创新，我决定把他再改造一番！

.box input[type = "submit"]:hover{
    background: linear-gradient(to right, #000 20%, #bada55 30%, #2ecc71 70%, #000 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 7s ease-in-out infinite;
    font-weight:bold;

    animation: rotate 1.5s linear infinite;
    border-width: 4.7px;
  }

结果展示：(Focus on My Dino ID, Hover on Submit)

【小结】

这里还没用到 JavaScript，虽然在网路上找到很多大神的样板可以借监，但我想等完全了解运作原理之後再自己实作。我觉得写网页的成就感确实比普通在写程序时的成就感高！如果是写商管统计分析的分析，或者 DSA 的题目，结果出来都仅仅只有图表或者基本文字。但网页每次编译後都会有一个很明显的结果出现，写出一个漂亮的网页之後的成就感也非常高！

【参考资料】

这个登入介面的想法是参考以下这个 NFT 的商品网站，有很可爱的老鼠喔！
guttercatgangpets

接续上篇文：设计是参考了以下这个大神的模板，我除了修改了一些版面设计、字型跟颜色，还增加一张未来 NFT 的产品图。最後再把一些自己想到的特效补上去！
Animated Login Form Using Only HTML & CSS