iT邦幫忙

2021 iThome 鐵人賽

DAY 4
1
Modern Web

All In One NFT Website Development系列 第 4

Day 4【HTML + CSS】於是他開始像靈犬萊西一樣到處蒐集證據

【前言】
不知道大家有沒有看過 Youtube 上面一些 5~12 小時的 Coding 教學影片。這是一件頗好笑的事情,以前我都想到底誰會把這種影片看完來學一個語言,結果我這個禮拜就做了不只兩次這件事情,同一個語言還看了不只一部。

其中我花了兩天的時間把前端三巨頭的教學影片精熟,大概就是看著做一次。還好這幾個語言並沒有像 C/C++ 那樣非常著重在記憶體配置上,所以基本上就是看懂這個語言的架構與寫法,一些基礎的內容會了之後,剩下都是需要的時候再瘋狂 Google 了。

【教學資源 - HTML + CSS】
今天推薦我使用的 HTML + CSS 教學影片與相關資源。

The Net Ninja 是一個關於程式語言教學的 Youtube 頻道,他的口條跟語速是我在相關 Youtube 頻道裡面最喜歡的,而且他的簡報還有相關圖例非常簡潔有力。

HTML & CSS Crash Course Tutorial

除此之外,他還會在每個主題的一開始做一個大致的介紹,之後用程式碼實作,最後再有一個結語來複習這堂課講的內容。由於教學資源都是開源的,所以也可以在頻道下方下載。

The Net Ninja 跟很多教學頻道不同,他使用最簡潔的編輯器,最唾手可得的系統進行教學。很多時候即便照著其他頻道實作還是會出現各式各樣的 Error,甚至完全不同的結果。更不用說很多頻道喜歡在完全看不懂的編輯器上編輯,在複雜的命令列或門檻很高的系統上做編譯,這對背景知識嚴重不足的初學者們是很大的負擔。

我之後學習其他相關語言以及前端實作時,發現所有我遇見的 HTML + CSS 架構的語法內容,在 The Net Ninja 的這個教學裡面都有學到過。在最後一篇他還有介紹學完課程之後的延伸學習,有 CSS Animations、CSS Grid、CSS Flexbox、Modern JavaScript、Styling HTML Forms 等。五星推推,推薦給初學者或有興趣的人!

【課後練習】
直到現在大概可以說自己學會前端兩巨頭了,那就直接來實作一個網頁看看吧!今天先把該放上去的 資料放上去,並且簡單的 CSS 排版還有設計。

HTML:
首先是導入字型:

<!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">

建構表格以及基本資料、並且放上圖片:

<form class="box" method="post">
    <h1>Dino Login</h1>
    <img src="2.png" width="200" height="200">
    <input type="text" name="" placeholder="My Dino ID">
    <input type="password" name="" placeholder="My Ethereum Address">
    <input type="submit" name="" placeholder="Login">
  
</form>

目前的成果:

CSS:
配色設計:
雖然我正在使用的 Visual Code 裡面已經有顏色可以直接挑選和看見顏色結果了,但還是推薦三個挑色的網站。有的會直接推薦隨機一組配色給大家,有的可以直接點顏色然後複製 RGB 碼,五星推推!

Coolors - The super fast color schemes generator!
Flat UI Colors 2 - 14 Color Palettes, 280 colors ?

基本排版:

:root {
    --clr-:#66CCCC;
    --clr-bg: #000;
  }
  
  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--clr-bg);
    font-family: "Balsamiq Sans", cursive;
    color: var(--clr);
    padding-right: 10rem;
  }
}

輸入格的設計:

.box input[type = "text"], .box input[type = "password"], .box input[type = "submit"]{
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border:2px solid #3498db;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 24px;
  }

最後再稍微把 Submit 格修改一下顏色之後就成功做出了一個登入介面!

【小結】
某些時候我都覺得 Youtube 頻道教得比學校或 Coursera 上的好,因為語速及口條順暢、教學的過程合理、資源開放、實作的部分簡潔有力。我自己的經驗是學校的教學通常不會有程式碼實作,都只是把概念或者簡報講過(唸過)。這樣效果其實非常有限,還遠不如我自己買一本工具書來查,畢竟沒有人可以完全記住一個語言的語法吧!如果沒有直接看見它怎麼用以及實際效果如何,相信很難從純文字和 PPT 吸收。

不過相對的使用 Youtube 學習也有一些缺點,像是沒辦法對不是很理解的部分提問、也沒辦法詢問更延伸的內容,以及沒有題目可以練習。

【參考資料】
這邊設計參考了以下這個大神的模板,我除了修改了一些版面設計、字型跟顏色,還增加一張未來 NFT 的產品圖。這張估計不會發行,是超級限量版!之後的前端實作我會使用自己的想法跟特效,來做為最後 Project 的成果,這邊都是測試跟學習喔!

Animated Login Form Using Only HTML & CSS


上一篇
Day 3【NFT】你那邊還來得及,趕快 all in Bitcoin
下一篇
Day 5【JavaScript】可以看到,將近是20公分的深度
系列文
All In One NFT Website Development30

尚未有邦友留言

立即登入留言