# Week 1
###### tags: `SCSS`, `html5doctor`

---

## Sass 7-1 Pattern
Files should be imported according to the folder they live in, one after the other in the following order:

1. abstracts/
1. vendors/
1. base/
1. layout/
1. components/
1. pages/
1. themes/
* [依造 Sass 7-1 Pattern 構建項目](https://awdr74100.github.io/2020-06-08-scss-7-1-pattern/)
> **7-1 模式最重要的是它拆分模組的概念。**
* [sass-guidelin](https://sass-guidelin.es/)

## HTML語意化
[語意化標籤](https://ithelp.ithome.com.tw/articles/10195356)

## 練習
[練習打字](https://www.keybr.com/)
[emmet](https://docs.emmet.io/cheat-sheet/)

## Tailwind
閱讀document嘗試用CDN
[Document](https://tailwindcss.com/docs/installation)

## Tool
[fakeimg](https://fakeimg.pl/)
[碼錶](https://naozhong.tw/miaobiao/)

## week 1 作業 pixel perfect kata
* 第一次練習忘記計時 約20-30
* [test-2](https://codepen.io/chrisc0210/pen/YzaqMGj)
* [test-3](https://codepen.io/chrisc0210/pen/YzaqMGj)
* [test-4](https://codepen.io/chrisc0210/pen/YzaqMGj)
* [test-5](https://codepen.io/chrisc0210/pen/YzaqMGj)

助教回饋（2022-07-212022-07-21）：
1. 可以統一在 body 設定 line-height: 1.5，再針對 h2 設定 line-height: 1.2 就可以囉

2. img、h2、p 這些設定可以移出 * { }

3. footer 不用使用 flex ，這邊用 text-align: center; 就好

4. 關於 emmet 的縮寫可以參考如下，也可以看這個網站呦

display: block; 是 db
display: flex; 是 df
justify-content: center; 是 jcc
align-items: center; 是 aic
padding: 48px 0; 是 p48-0

---

### 參考資料
* [ref1](https://hackmd.io/iE6mxohOS-ujKU398Ewk1w)