---
# System prepended metadata

title: 前端 Lesson4 & HW
tags: [前端Brian]

---

---
title: 前端 Lesson4 & HW
tags: 前端Brian
---

## 課程內容
- 上次的複習
    - display, inline & block & flex
    - 作業檢查
    - https://codesandbox.io/s/flamboyant-rosalind-g459bl?file=/index.html
- 新的 CSS 屬性
    - 大小 Sizing
        - width, height
        - px rem vh % 
    - 間距 Spacing
        - (border,) padding, margin
- CSS Debug
    - dev tool F12
        - 打勾
        - element.style 編輯
        - model box
        - border 插件
        - 手動刪掉DOM(eg.煩人的廣告) (裝插件就好 ><)
- box model
    - https://www.oxxostudio.tw/articles/202008/css-box-model.html



### CSS debug

```
* {
  outline: 1px solid red;
}
```

## HW

做這個

HW1 直的

![](https://i.imgur.com/QG757sE.png)

覺得太簡單可以發揮創意...

HW2 橫的

![](https://i.imgur.com/MrCa7ri.png)

圖片跟文字可以自己改～

--

這種版型很常見，通稱卡片
做完想改進可以去 yt 搜 CSS card design,tutorials,...
看看人家的手順跟自己有什麼不同

隨便搜了一個
https://www.youtube.com/watch?v=qXRYMdvq_Dc

中間有卡住都可以問ㄛ～～～