# 切版任務二攻略本

## 洧杰推薦影片觀看順序
我們這次的[切版任務二](https://rpg.hexschool.com/training/29/task?id=294&type=detail)，只要做出 CSS 效果，就可過關獲得證書，也就是：

**LV1：做其中一頁的 RWD 頁面，畫面不可顯示 x 軸，背景球可以不做**，為目標來提供推薦學習順序

1. [切版任務一前面的影音課程](https://courses.hexschool.com/courses/1713908/lectures/39488241)都得觀看，必須先學會 Flex 才能挑戰響應式
2. 可先略過 jQuery，先學習 RWD 排版術
3. [伸縮自如的 RWD 排版術(上)](https://www.youtube.com/watch?v=t13Fvg0_xHk&t=1s)
4. [伸縮自如的 RWD 排版術(下)](https://www.youtube.com/watch?v=Du_N0Vyh-Q0)
5. [第三週 - RWD 一點都不難，手把手打造手機版網頁](https://courses.hexschool.com/courses/1713908/lectures/40261726)
7. [CSS background 背景教學 & 圓球作法 (90分鐘)](https://courses.hexschool.com/courses/1713908/lectures/40470360)
8. [切版任務二佈局分享(6/1 更新)](https://courses.hexschool.com/courses/d9be03/lectures/40681055)
9. [GitHub Pages 部署網站手把手教學 (60分鐘)](https://courses.hexschool.com/courses/1713908/lectures/40259232)

## LV2 jQuery
* [QA 折疊選單](https://discord.com/channels/801807326054055996/964349160579010561/981774427471626260)
* [Swiper 輪播效果(@Izumi 泉 助教)](https://hackmd.io/itEybVN0S9uUxiNbpY7-Xw?view)

## 學生攻略筆記
* [Stella/UIUX/台北](https://hackmd.io/@vMqZkbC0R0WZz-Jdp7CuZw/SJBQZ22v9)
* [agnes](https://github.com/tzuchienkao/f2e-exam/tree/master/docs/hexschool/chat_talker#readme)
* [IreneLee](https://hackmd.io/6BbinfZtTW6obEMyeSGt0g?view)
* [Amberhh](https://hackmd.io/FvGzNoAkS-Ct8JeLLPqzDQ?view)
* [Josh Chen](https://hackmd.io/@o--OSQziRmi276EPy3FN0Q/rJtr0ddPc)

## 洧杰切版建議

1. 先挑有把握的區塊來做，沒有規定一定要從上到下來做
2. 做完時，先檢視該區塊 x 軸有無問題
3. 當區塊變多，卻又要檢視 x 軸時，可以用 chrome 檢視工具

## 學生版型推薦

* 原生 CSS 寫法，**適合新手🌟**：Xiang([GitHub](https://github.com/d1074181068/hexschool-mission2)、[GitHub Pages](https://d1074181068.github.io/hexschool-mission2/html/index.html))
* Bootstraop 5 自訂變數+SCSS 寫法：Amber hh([GitHub](https://github.com/iamAmberhh/chatTalker.git)、[GitHub Pages](https://iamamberhh.github.io/chatTalker/))
* Bootstraop 5 自訂變數+SCSS 寫法：Irene Lee([GitHub](https://github.com/IreneLee18/chatTalker)、[GitHub Pages](https://irenelee18.github.io/chatTalker/))

更多版型與助教回饋，可觀看任務二最下方的批改建議，[點擊更多學生版型](https://rpg.hexschool.com/task/294/show)~

<a href="https://rpg.hexschool.com/task/294/show" target="_blank"><img src="https://i.imgur.com/u2AV2XJ.png"> </a>