# 第八週

本頁連結：https://hackmd.io/b27afZn0T2OkuT6-E58Ycw

## 完課獎勵說明

完整獎勵說明：https://hackmd.io/ry4GF6KWROKbx9cLf51bkA

RPG 獎勵說明連結：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962883_12062543649513962886

- 2/23 前 60%：框架菁英班直播 → 主題：Next.js 起步走
- 3/9 前 80%：框架菁英班錄影(目前以 Vue 為主，React 可參考主題包含：從零建構 API、Cloud flare、前端工程師如何寫出好履歷)
- 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆
- 100%：數位完賽獎狀

心得牆任務：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962881_12062543649513962910
心得牆素材：https://hackmd.io/OcMERTDpT86G-5PS8NDVjg

## 提醒：作業繳交說明

### React 直播班｜作業繳交截止時間

React 作業繳交最後截止日：**3/23**

補充：

- 第八週任務如果有在 3/23 前繳交，則可以延長批改至 4/13
- **專題不能做為 React 直播班第八週的任務提交**

### 框架專題班｜程式碼批改

> 框架專題班有額外的程式碼批改服務，與 React 直播班的第八週作業並不相同，也不能將專題做為第八週作業的內容
>

#### 時間

- **3/17**：開放程式勇者村任務 - 「**專案程式碼批改**」
建議同學在 3/17-3/21 提交，提交後預計兩週內提供批改回饋
- **4/20**：任務截止

#### 注意事項

1. 團體由一位代表提交，其他成員則在任務中提到由哪一位成員代表提交即可。
2. **專題不能做為 React 直播班第八週的任務提交**，但完成 React 專題一樣能獲得「React 直播班」證書。
因此完成專題任務者也可以拿到 React 完課證書，預計在 5/12 統一發送。

## 本週作業：

React 直播班：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962871_12062543649513962892?tid=12062543649528575022

React 專題班：3/17 開放

## 工作介紹

我們有提供 [職缺博覽會](https://discord.com/channels/801807326054055996/1230451657985232950) 頻道，未來會持續推廣更多的職缺給同學們。

最近有一個資深的工作，如果你先前已經會 Vue 或其他框架，也有相關的工作經驗，可以考慮投遞本分履歷：https://chalk-freedom-ec6.notion.site/React-Node-JS-70-30-19e6ab47eb48804d85a9df0a55ff0b16

## 本週助教解說

還會額外加碼 React 實戰開發的一些技法！

---
## 網站執行建議

### 開始做之前，先對目標有個想像：

1. 可以先看學長姐的作品：https://works.hexschool.io/#/
2. 先對作品限制有一定的了解：https://hexschool.github.io/ec-courses-api-swaggerDoc/#/

基本上需要做的內容包含：

- 規劃一個主題
- 規劃這個主題需要的產品內容
- 規劃網站地圖（總共有哪些頁面）
- 前台：
- 首頁
- 產品列表
- 單一產品
- 購物車
- 購物車表單
- 購買完成
- 關於…
- 管理者：
- 登入介面
- 產品管理
- 訂單管理
- 優惠券管理
- 企劃每一個頁面所需要的內容
- 開始製作網站

### 該有的心態

- 先使用刪去法，了解 “不應該做什麼？”
- 不應該 “過度完美主義”
- 不應該規劃出自己 “無法做出的內容”
- 不應該 “持續沒有推進”
- 那應該怎麼做？
- 已完成目標為導向：主題選簡單一點的
- 確認該做到什麼程度：看一下 API、看一下學長姐，做到什麼程度 ok
- 每一天都有一些進度

### **該怎麼做？**

- 選一個主題，開始搜尋延伸資訊：
- 可以關注的點：
- 有哪些頁面
- 有哪些產品？
- 網站有哪些文案？
- 網站中有加入哪些特效？
- 首頁如何配置？

範例網站：

- 健康餐：https://my.healthydiet.com.tw/
- 兒童監視器：https://tw.getcubo.com/
- 咖啡：https://www.oklaocoffee.net/
- 星巴克：https://www.starbucks.com.tw/home/index.jspx

再一次：

- 有哪些頁面
- 有哪些產品？
- 網站有哪些文案
- 網站中有加入哪些特效？
- 首頁該如何配置？

### 一一擊破：

> 這個過程會花費 1 ~ 2 個全天，但做完之後開發速度會快上許多
>
- 有哪些頁面：
- 請在一開始就列出全部網站的路由 （或網站地圖
- 有哪些產品：（建議找簡單一點的主題）
- 請一一建立相關資料，使用 Unsplash 找圖片、使用 AI 工具建立資料
- 有哪些文案：
- 建議一開始就先把所有文案列出來，案例：
- https://www.figma.com/design/9UUs1l6U2KMIkqvgDGhE1i/Week6-9%3ABootstrap-Theme-%E8%BD%89-Wireframe%E5%A5%97%E8%89%B2?node-id=0-1&p=f&t=ktOzReHnJ0Acxf03-0
- https://www.figma.com/design/zywX9tMk541kHUDDzGvkHL/Wireframe-%E7%AF%84%E4%BE%8B?node-id=0-1&p=f&t=UFnl0gUOtJMiAkuv-0
- 網站中有加入哪些特效？
- 輪播：https://swiperjs.com/
- 彈出訊息：https://sweetalert2.github.io/
- 文字編輯器：https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/self-hosted/react/react-default-npm.html
- 簡單視差滾動：https://michalsnik.github.io/aos/
- CSS 動態效果：https://animate.style/
- 各類網頁常用元件：https://getbootstrap.com/
- 其他找效果的方式（不建議自己找，還是以函式庫為主）：[https://codepen.io/](https://codepen.io/your-work)
- 首頁該如何配置？
- 可以透過簡易的工具，如 Miro、Figma，將預期的內容排版出來

### 設計怎麼辦？

- 先使用刪去法，了解 “不應該做什麼？”
- 不應該 “過度完美主義”
- 不應該規劃出自己 “無法做出的內容”
- 不應該 “持續沒有推進”
- 那應該怎麼做？
- 已完成目標為導向：**“版型” 選簡單一點的**

課程範例版型：

- https://hexschool.github.io/js-training-layout-1/
- https://hexschool.github.io/js-training-layout-2/

範例版型原始碼：

- https://github.com/hexschool/js-training-layout-1
- https://github.com/hexschool/js-training-layout-2

其他參考設計：

- 學長姐的（禁止抄襲）：https://works.hexschool.io/#/
- Shopify 版型：https://themes.shopify.com/themes?locale=zh-TW&surface_detail=navbar-all-themes&surface_inter_position=2&surface_intra_position=1&surface_type=nav
- Bootstrap 版型：https://themes.getbootstrap.com/

**不應該**看得設計類型：這些都太酷炫，不適合用在個人作品，或者是中文的介面上

- https://www.awwwards.com/
- https://www.cssdesignawards.com/

## 示範：將專案加入範例版型

課程範例版型：

- https://hexschool.github.io/js-training-layout-1/
- https://hexschool.github.io/js-training-layout-2/

範例版型原始碼：

- https://github.com/hexschool/js-training-layout-1
- https://github.com/hexschool/js-training-layout-2