【前言】

我的習慣是先在 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