---
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 直的


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

HW2 橫的


圖片跟文字可以自己改～

--

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

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

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