# 洧杰老師 - 網頁切版練功手冊

此資源與切版版型授權，僅提供給 2022 秋季 JS 直播班學生。

## 業界切版熟練度 - 初級工程師等級表
請以 kata 心態，來刻意練習到以下時間熟練度：
1. 第一關 - [個人介紹頁](https://xd.adobe.com/view/0f1c0abb-4063-4ed0-96b1-452f520f878b-5a4f/) - 至少在 1 小時內做完，[範例](https://www.youtube.com/watch?v=yHLFbaUbyF4&list=PLYrA-SsMvTPPz5pbbfhctdcSJ7L_BWqTs&index=3)
2. 第二關 - [甜點電商產品列表頁面](https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/screen/9ba8ec87-c41b-474f-b92b-d2bb2fc7f922/specs/?fbclid=IwAR1QBaHGuCVAvnqO9nhaJg5ivqLn2BkwHfMYsLPIpttyaIOxI1ig09MlYOM) - 至少在 1.5 小時做完，[範例](https://www.youtube.com/watch?v=iVS7qrMEbe8&list=PLYrA-SsMvTPPz5pbbfhctdcSJ7L_BWqTs&index=6)
3. 第三關 - [範例作業 no8.website](https://hexschool.tw/yRSS0) 自己嘗試做一次，在 1 小時內完成
4. 第四關 - [甜點電商產品列表頁面 RWD 頁面](https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/screen/b11237cd-89ad-4aff-8899-0133ea92eafb/specs/?fbclid=IwAR1QBaHGuCVAvnqO9nhaJg5ivqLn2BkwHfMYsLPIpttyaIOxI1ig09MlYOM)，在 3 小時內做完
5. 第五關 - [募資網站](https://hexschool.tw/hk1Ga) - 在 1.5 天內完成全部頁面，[範例](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/HkOeaJIcO/%2F10fOwZuYQ_uCyWlUNFuk_g)
6. 第六關 - [香水電商](https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/) - 在 5 天內完成，[參考資源](https://www.youtube.com/watch?v=dUY8a28AhAw&list=PLYrA-SsMvTPPz5pbbfhctdcSJ7L_BWqTs&index=9)

## 教學資源

1. 第 1~2 關知識點，請觀看此[新手任務](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2Fgb6aV45KS0W5kmULTdet6Q)影片，僅提供線上觀看，無提供助教檢視服務。
2. 第 3~4 關，請觀看此[影片清單](https://www.youtube.com/playlist?list=PLYrA-SsMvTPN27YtCTQ4zEefHNFgH9EHv)
3. 第 5~6 關，請依照本[手冊](https://hexschool.tw/flgMT)提供的 Bootstrap 影片資源依序學習

## 圖片下載與觀看設計稿的方法

備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view)

備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/webLayoutTraining1st)，圖片個別都放在 **第一關 week1、第二關 student-week1、第六關 perfume-week6 資料夾**，網址規則如下，其他以此類推：
* https://hexschool.github.io/webLayoutTraining1st/week1/photo.png
* https://hexschool.github.io/webLayoutTraining1st/week1/line.svg

>補充：[如果不知道怎麼找到圖片路徑請點我](https://i.imgur.com/O7nQcFm.gif)

## 進階設計模式學習

1. [CSS/SCSS 架構演化史影片](https://www.youtube.com/watch?v=YF2yKIT5QS4)、[簡報](https://drive.google.com/file/d/1i1O-2HwGa6dUYLWMDiqmFBQCtcSzIdvc/view?fbclid=IwAR3Os838FGh2TD7fTAx4fpcB--OAzIMoHiimhQCi9WyuehkO30Ewii6PLmc)
2. [CSS/SCSS 優良部分 - 30 部影片](https://ithelp.ithome.com.tw/users/20040221/ironman/3567?fbclid=IwAR2JANwzCOcNdUjlpB2GCicCGjmbTphATiVwNqpWrnHfGqffjYGuG13sBy8)