# Week 2
###### tags: `SCSS`, `flex`, `js`

---

## Flex
[圖解：CSS Flex 屬性一點也不難](https://www.casper.tw/css/2017/07/21/css-flex/)
[Codepen](https://codepen.io/chrisc0210/pen/zYWNMmy)

## nth:child(n)
[30個你必須記住的CSS選擇器](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)

---

[nth:child(n)](https://codepen.io/chrisc0210/pen/rNdWvoe)

li:nth-child(3) {
   color: red;
}

---

[How to choose “List item 2](https://codepen.io/chrisc0210/pen/PoRpKgR)

//X:first-of-type
ul:first-of-type > li:nth-child(2){
  color: red;
}

## background-image

//background-image
//常用語法
background-position
> top ｜ bottom ｜ left ｜ right ｜ center

background-size
> auto ｜ contain ｜ cover

background-repeat
> repeat(預設值)｜ repeat-x ｜ repeat-y ｜ no-repeat

[Codepen](https://codepen.io/chrisc0210/pen/RwMppWR)

## 偽元素
[CSS 偽元素 ( before 與 after )](https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html)
> 使用偽元素的定位，還是當作「輔助」性質會比較恰當。
## Container Setting
### 有兩種計算方式：
1. 列＊12+ 距＊11
e.g. 12＊78 + 11＊24 = 1200
3. 邊界 - 邊距＊2
e.g. 1920 - 360＊2 = 1200

[Codepen](https://codepen.io/chrisc0210/pen/GRxWaqx)

## API
* Movie
[ OMDb & TMDb API (電影）](https://ithelp.ithome.com.tw/articles/10195116)
[omdbapi](http://www.omdbapi.com/apikey.aspx?__EVENTTARGET=freeAcct&__EVENTARGUMENT=&__LASTFOCUS=&__VIEWSTATE=%2FwEPDwUKLTIwNDY4MTIzNQ9kFgYCAQ9kFggCAQ8QDxYCHgdDaGVja2VkZ2RkZGQCAw8QDxYCHwBoZGRkZAIFDxYCHgdWaXNpYmxlZ2QCBw8WAh8BaGQCAg8WAh8BaGQCAw8WAh8BaGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgMFC3BhdHJlb25BY2N0BQhmcmVlQWNjdAUIZnJlZUFjY3TuO0RQYnwPluQ%2Bi0YJHNTcgo%2BfiAFuPZl7i5U8dCGtzA%3D%3D&__VIEWSTATEGENERATOR=5E550F58&__EVENTVALIDATION=%2FwEdAAV39P5KqwNGJgd%2F4UbyWCx3mSzhXfnlWWVdWIamVouVTzfZJuQDpLVS6HZFWq5fYpioiDjxFjSdCQfbG0SWduXFd8BcWGH1ot0k0SO7CfuulNNHYC5f864PBfygTYVt5wnDXNKUzugcOMyH4eryeeGG&at=freeAcct&Email=)

* 閱讀文章而已，未實際練習
[實作串接 API (1) ⏤ Unsplash API](https://jimmyswebnote.com/use-javascript-to-connect-api-with-unsplash/)
[https://quip.com/C6t2ALm9L6G8](https://quip.com/C6t2ALm9L6G8)

## Blog
* 找了一些可以放學習記錄的地方，還在猶豫要使用哪的，也可能再找其他的
[Hexo](https://hexo.io/themes/)
[coderbridge](https://www.coderbridge.com/)

## Reading

[Software Engineering at Google](https://software-engineering-at-google.gh.miniasp.com/#/)

[](https://component.gallery/)
---

## 其他

* React建立環境方式：

$ cd react-slicing //project
$ npm install //***
$ npm start //

[sh: react-scripts: command not found after running npm start](https://stackoverflow.com/questions/40546231/sh-react-scripts-command-not-found-after-running-npm-start)
## Week 2 feedback (2022-07-22)

以下是給你的建議：

1. 網頁中第一個區塊不需要使用 container，因為背景原本即為滿版

2. .materialDesign .bg-banner 為區塊元素，原本就會佔滿水平空間，所以 width: 100%; 可以移除

3. .bg-content 不需要使用絕對定位來垂直水平置中，建議改在 .bg-banner 使用 flex 語法來讓 .bg-content 垂直水平置中

4. 「About」 人像也不需要使用絕對定位。可以移除圖片外層 div、移除圖片的絕對定位以及寬度，然後使用 text-align: center; 水平置中圖片

5. 「About」 的紅色圓點也可以使用偽元素來製作，這樣可以簡化 HTML 結構

可以參考文章：

https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html

6. 「Just Keep XXXD Everyday」算是副標題，建議改為 h3 標籤

7. 「2020 年創立的個人服飾...」文字大小為 20px 而非 24px

8. 「My Brand "XXXD"」區塊的 image 結構應如下圖：

https://i.imgur.com/uehA2pH.png

9. 「Other Works」區塊也建議練習使用 container 的概念（可參考第二週課程影片）

https://i.imgur.com/0PiqU2D.png

學習紀錄整理得很好喔😀，紀錄也可以回顧自己學習的東西~

恭喜你完成第二週主線！