iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

All In One NFT Website Development系列 第 5

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


上一篇
Day 4【HTML + CSS】於是他開始像靈犬萊西一樣到處蒐集證據
下一篇
Day 6【React】阿嬤妳怎麼沒感覺?
系列文
All In One NFT Website Development30

尚未有邦友留言

立即登入留言