# 🏅第二週版型攻略

## 洧杰老師主線攻略教學
各位勇者們好：

為了讓大家能順利推倒這關，我來分享一些密技！

第二週作業則是在練習 Flexbox 的技巧，在開始作業前，老師建議你要先看以下資源跟練習，才能順利做出

### 攻略一：練習 Flexbox 排版技巧
1. 練習 [Flex 時光屋](https://courses.hexschool.com/courses/20201/lectures/14759058?preview=logged_in)的題目，卡關的話可以到這[連結](https://rpg.hexschool.com/task/69/show)看攻略(需登入)
2. 觀看老師的[本週直播錄](https://courses.hexschool.com/courses/20201/lectures/15899252)影再次複習

### 攻略二：練習 CSS background 語法
這作業會用到背景圖案的設計，這裡老師釋出些影片讓大家了解其語法的應用
* [background 在 html 元素上載入背景圖片，設定寬高 (6:59)](https://courses.hexschool.com/courses/666803/lectures/11948496)
* [background-repeat：將圖片重複顯示，repeat-x (13:42)](https://courses.hexschool.com/courses/666803/lectures/11948499)
* [background-color：與背景圖片的混用 (9:24)](https://courses.hexschool.com/courses/666803/lectures/11948500)
* [background-position：移動 background 的位置 (4:28)](https://courses.hexschool.com/courses/666803/lectures/11948501)
* [background 縮寫教學 (2:37)](https://courses.hexschool.com/courses/666803/lectures/11948504)
* [圖片取代文字技巧 - 以logo為例 (7:05)](https://courses.hexschool.com/courses/666803/lectures/11948517)
* [圖片種類介紹 ( gif、jpg、png ) (10:34)](https://courses.hexschool.com/courses/666803/lectures/11948518)

## 攻略三：觀看其他勇者的程式碼

這裡老師挑出了幾位做得不錯的學生的程式碼，如果是 GitHub 檔案，請按右邊的「Clone or download」就可點選「Download Zip」下載壓縮檔

* Darren ：[線上 Demo](https://dazzawoo.github.io/liveTutorial/)、[程式碼下載](https://github.com/DazzaWoo/liveTutorial)
* Greg Wu ：[線上 Demo](https://dingpachan.github.io/week2_portfolio/)、[程式碼下載](https://github.com/dingpachan/week2_portfolio)
* 冠穎 ：[線上 Demo](https://bryanchu10.github.io/HexLayoutLiveCourse/week2-personalPage/)、[程式碼下載](https://github.com/bryanchu10/HexLayoutLiveCourse)

## 額外語法補充

## 學員 BLOG 心得與筆記
* [Rex Hung](https://rexhung0302.github.io/2020/04/19/20200419/#more)
* [Kay Chen](https://kaychen1994.github.io/2020/04/18/Week02-Flexbox-%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E8%A1%93/)
* [hsin-yu chen ](https://hackmd.io/vQgYhKSjQraUVJOn-yLUow?view)
* [Ruta Yu](https://medium.com/@RUE503/css-%E8%83%8C%E6%99%AF%E5%B1%AC%E6%80%A7-%E8%AA%BF%E6%95%B4%E4%BD%A0%E7%9A%84%E4%BD%8D%E7%BD%AE%E8%88%87%E5%A4%A7%E5%B0%8F-964170fbe1ed)
* [mona](https://hackmd.io/@koihsun/BJFNVL6_I)

# 後勤組版型範例
## banner 區塊
* [Saffran](https://codepen.io/saffranwang/pen/RwWaJNj)

## About那個section範例
* [Joey](https://codepen.io/Joey1201/pen/abvdrBJ)
* [Greg Wu](https://codepen.io/WuGreg/pen/PoPNJQX)

## My Brand區塊
* [Ruta Yu](https://codepen.io/rue503/pen/GRpZvNr)

## Other Works 區塊
* [kevin_hws](https://codepen.io/kevinshu/pen/yLYJQzV)
* [ZweigDen](https://codepen.io/zweig-teng/pen/yLYgPJW)

## Footer
* [hsin-yu](https://codepen.io/tina2793778/pen/zYvqxOb?editors=1100)

## 感謝牆
> 謝謝 Saffran 的版型設計，幫助我很多~ [name=洧杰]