# 前端自修:Homework 1

[Github頁面：基本 HTML/CSS 練習：以 Twitch 為例
](
https://github.com/aszx87410/frontend-intermediate-course/blob/master/homeworks/hw1.md)

[Youtube直播留檔
](https://www.youtube.com/watch?v=-UEWWzWaGeg)

## background屬性用法複習
其實沒有很難，只要打background後，VScode會跳出一堆提示。

## CSS單位

從門外漢到前端新手系列:[Day16 CSS基本樣式-單位與數值](https://ithelp.ithome.com.tw/articles/10222932)
> 1. px
> 2. em
> 3. rem
> 4. vw與vh（一個是viwewidth,，一個是viewheight）
> 6. %百分比
> 7. calc()計算值

其他參考資料：
[一次搞懂 CSS 字體單位：px、em、rem 和 %](https://www.oxxostudio.tw/articles/201809/css-font-size.html)
[CSS 小技巧分享：em 單位的強大用途](https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/css-%E5%B0%8F%E6%8A%80%E5%B7%A7%E5%88%86%E4%BA%AB-em-%E5%96%AE%E4%BD%8D%E7%9A%84%E5%BC%B7%E5%A4%A7%E7%94%A8%E9%80%94-457dc30a83b4)

特別注意：
> 如果在一個div設置一張背景圖，並設置width:100% ;hight:100% ，
> 會發現div的高度根本稱不開。
> 需在html，body上設hight:100%。

[CSS、JS-30天研究筆記系列:【day2】關於CSS height高度屬性](https://ithelp.ithome.com.tw/articles/10199731)

## 遊戲學CSS

~~[codepip](https://codepip.com/)~~
免費仔就不用註冊了，裡面的都是要錢的。

直接google找關鍵字進去玩免費的兩個遊戲即可，
或是從這邊點這兩個連結：
[FLEXBOX FROGGY](https://flexboxfroggy.com/)
[GRID GARDEN](https://cssgridgarden.com/)

以下有最後一關的code，小心暴雷。
。
。
。
。
剛剛花了點時間，破完24關，基本上不需要學過，直接玩就可以。
遊戲體驗大概十分鐘，還滿有趣的。

## YT上的CSS切版

[Live Coding](https://www.youtube.com/playlist?list=PLGz5A0lJEH62clNCkG6Clpy2McsSu2k7w)

[金魚都能懂的網頁切版](https://www.youtube.com/watch?v=rwTMBmnIHcY&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo)

[[鐵人賽2022] :切一個 header、footer](https://www.youtube.com/watch?v=9z724tJTSGs&list=PLt7KG5mmp2AhtZDqvIT9j7K-c8Bn2AiRK&index=11)

## 作業繳交
[Codepen頁面：基本 HTML/CSS 練習：以 Twitch 為例
](https://codepen.io/flwrtykd-the-scripter/pen/QWBpYgL)

## 心得筆記：

學了flexbox之後寫起來還算順，但還欠缺切版經驗。

**中間一度忘記可以用「padding」調整距離，不一定要用margin。**

練習時一度有網路問題，圖片跑不出來還以為是code的錯。

另外上傳之前練習的檔案到codepen，居然現在才註冊(汗顏...
真的是超好用的，整個感覺很有質感很棒很漂亮！！

整理練習下來，發現感覺**簡單的東西，實作也有困難點。**
真的要「把頭洗下去」，而不是一直看教學都不做。
**實作也要靠自己想，不是影片跟著照抄，才能發覺那些地方有功課、做加強。**

最後成功了滿足感意外的高，希望未來好好完成所有作業！加油。

## 未來功課

1.把gridgarden也給破完
2.繼續去玩CSSbattle