---
tags: Vue 實戰班
---

# 第一週支線任務
本直播課程最終目標是需要完成一個電商網頁，過去學員們的[作品](https://www.notion.so/wcc723/2fbc7dc4df4846a386df4b69976e0237)參考：

直播課程內容會著重在 JavaScript 語法上，雖然會提供基本的版型讓學員們套用，但為了增加每個作業的獨特性，因此先公開課程最終目標及參考範例，讓同學們可以事先準備。

- 課程版型範例：https://hexschool.github.io/js-training-layout-2/

### 設計不熟悉怎麼辦？
- Vue 作業批改介紹（錄影影片）：https://courses.hexschool.com/courses/ui2/lectures/14332890
- Vue 作業批改介紹 - 常見問題說明： https://www.notion.so/wcc723/Vue-56a7232022114a7fa4746736829b75b0

### 免費素材資源
- 免費圖示：https://fontawesome.com/start
- 免費圖庫：https://unsplash.com/

### 網站地圖
- 首頁
- 產品列表
- 單一產品頁面 -> 產品欄位包含：
- 標題、內文、圖片(1 ~ 5 張)、原價、優惠價、產品分類、購買數量...
- 活動頁面（可自訂活動項目）
- 購物車
- 購買表單 -> 欄位包含：
- 姓名、電話、信箱、收件地址、備註（選填）、付款方式
- 付款完成頁面

作品參考：https://www.notion.so/wcc723/2fbc7dc4df4846a386df4b69976e0237?v=735180631b6d42a7895538d6eac81e87

### 任務說明：
- 完成版型的**靜態頁面**，至少包含網站地圖內的版型

### 提交難度挑戰：
- LV1：完成以上頁面
- LV2：普通考驗，提交時附註「我要給卡斯伯老師批改」
- LV3：嚴酷考驗，提交時附註「我要給俊儀老師批改」

### 繳交作業流程

1. 於[試算表](https://docs.google.com/spreadsheets/d/1DOk5jCqnz-y_z6M_aFaoNn3n-ayheFhQ6h2LLDzYaXg/edit#gid=0
)中登記繳交狀況


2. 回程式勇者村 - 任務系統回報：https://rpg.hexschool.com/task/91/show

### 作業格式 & 常見 QA

- 繳交作業格式教學（本作業僅能提交 GitHub Pages 的版本）：https://hackmd.io/@hexschool/HJDbvkFqU/%2FK6GUUl_pTRioN9ZpBCeqMQ