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