# 六角學院切版直播班: QUICK NOTE
## 第一堂課 (updated 2021.07.02)

### 一些小常識

1. debug:
使用瀏覽器預覽時，如果碰到錯誤的地方，可先在chrome上面編輯(/除錯)，等確認好再將內容貼到vs code 上面。

2. 關於行距:
段落的高度並非是由文字撐出來的，而是靠行距產生高度。
之所以在沒有設置行距的狀態下段落也會有高度的原因，是因為文字預設本身就有預設行距。
如果行距設為0px,即使文字本身有高度，也會上下全部黏在一起。
`line-height: 0;`


3. 圖片預設下方會多2~3px:
會這樣是因為圖片預設為inline元素，而inline元素預設的vertical align是baseline，本身就會與底層父元素保持一點距離。
解決方法有下列幾種:
1. 從display方面做修改:改成block
`img{display:block;}`
* 也可寫成，inline-block，如果希望可以保持原有的inline特性的話。
2. 改變vertical-align 為middle也可以。
`img{vertical-align:middle;}`
3. font-size設成0px。
`img{font-size:0px;}`

## 第四堂課(updated 2021.07.28)

### 名詞介紹

1. 何謂Gulp?
Gulp 是一種前端任務工具，由JS寫成，建構於nodejs和npm上。
2. layout:
網頁的共同區塊，比如說header、footer區塊。撰寫多頁式網頁時，通常就會拉出來作業，內容區塊在依照各主題去分開編輯。
以讀冊(taaze)為例，下方頁首區塊就屬於layout的範疇，不管切換到哪頁，都會呈現在頁面上。
**Ref: https://www.taaze.tw/rwd_list.html?t=31&k=01&d=00**
3. ejs:
為一種簡單的樣板語言，利用JS生成HTML頁面。下列網站有一些深入的解釋，
[https://ejs.bootcss.com/](https://ejs.bootcss.com/)

4. [npm](https://www.npmjs.com/):
背後核心元素為node.js，可用來下載各種套件。ex.Bootstrap、jQuery、Gulp。

5. Gulp
前端任務工具，由JS撰寫而成的。

### 關於SCSS

1. SCSS 結構:
由於SCSS是由上到下編譯的緣故，故通常會先將變數(variable.scss)檔案放在最上面，然後再放reset將瀏覽器預設樣式清除掉，其次才會是放共同區塊(layout)、網頁其他內容的scss設定。
具體編排原則可參考如下來做設定。
1. 變數(設定常見變數ex.顏色、字體...)
2. reset
3. mixin (自己寫好的模板)
4. grid(斷點設計，有的人會特別獨立出來一個檔案來寫~)
5. layout(共同區塊)
6. index(首頁)
7. product(其他頁面，比如產品頁)
8. ...(其他頁面，請自行發想)

2. 更新SCSS結構:(**updated 08.17.21**)
1. variable -- 變數
-- 如果使用bootstrap的話，需要修改bst上面的一些樣式(fs,padding...)時，建議獨立拉出來放在variable.scss檔案裡。這個檔案位置一樣放在最前面，然後才是bst...。
3. reset
-- 如果使用bst，這個就不用了，因為bst本身就有使用css樣式清除(使用的是normalize)。
5. base
-- 這個放全站設定。
7. utilities
-- 工具類。
9. layout
10. 頁面

## 第七堂課(updated 2021.09.02)
### 名詞解釋
1. @keyframes 關鍵影格 -- 宣告一個動畫,定義動畫起始及結束點，還有哪個時間點的效果。
2. animation-name -- 要執行的動畫名稱
3. animation-duration -- 要執行的過程秒數
4. animation-delay -- 要先延遲多久才會開始，如果同時有多個動畫要跑，可以以此制定先後順序。
5. animtation-iteration-count -- 要重複幾次&設定infinite 無限跑
* "number" (ex. 1)
* infinite
* 如果設定無限跑，會很吃效能，所以切記動畫範圍不可以太大!
7. animation-fill-mode:停留在哪個影格
* forwards(停留在最後一個位置，會觸發第一個效果)
* backwards(停留在第一個位置)
* both:上述兩個都會觸發

## 彩蛋課程(updated 2021.08.28)

### 架站工具

* [ Godaddy 註冊網址](https://tw.godaddy.com/domains/domain-name-search)
因為Godaddy不提供免費https 服務，所以需要改使用cloudfare來託管DNS(有免費https服務)

* [cloudflare 申請 HTTPS 服務](https://www.cloudflare.com/zh-tw/)
注意: 因為DNS改由cloudflare託管了，所以相關DNS設定要在這邊設定~
如下範例，就在這邊新增網址就好囉)

### 名詞解釋

1. 網域名稱 Domain(網域):
是由一串用點分隔的字元組成的網際網路上某一台電腦或電腦組的名稱，用於在資料傳輸時標識電腦的電子方位。([wiki](https://zh.wikipedia.org/wiki/%E5%9F%9F%E5%90%8D))
一個網域下面可以對應很多個網址。但一個網址只能對應一個網域。
2. DNS:
網域名稱系統，每個網域名稱都會使用此系統，如果把網域想成地址，DNS就像是GPS，透過設定DNS，就可以讓訪客找到網站。
* A: 連到一個主機位址
* CNAME: 連到一個網址去(ex. github)
* MX: 電子郵件
3. 頂級網域:
是網際網路域名系統的等級中，位於根域空間的最高級域名，例如com是網址example.com的頂級域。([wiki](https://zh.wikipedia.org/wiki/%E9%A0%82%E7%B4%9A%E5%9F%9F))
* 常見頂級網域:
.io
.tech
.art
.com -- 商業用，通常是企業才會使用，個人用途不應使用這個。
.org -- 用於非營利組織
.edu -- 僅限特定高等教育機構，包括但不限於中專院校、大學等。
.gov -- 僅限美國的政府實體和機構，以及具有資格的美國州、縣、市政府機構使用。