---
# System prepended metadata

title: E-2 組 第三週小組任務
tags: [網頁切版直播班 - 2024 夏季班]

---

---
tags: 網頁切版直播班 - 2024 夏季班
---

# E-2 組 第三週小組任務
> **討論時間** [time=Tue, 2024 July 23 From 20:00 to 21:00]

- [任務連結](https://hackmd.io/p6RQTYJIR3m0qJ0OKIQE5g?view)

**組員參與名單 (4/4)**
- [x] Jason
- [x] Maci
- [x] 培根
- [x] Sonia

## 問題

### 任務一：請組員們在線上討論，不看老師範例程式碼，從無到有做出 [no.8](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing) 題目，並提供 codepen 檢視，[範例八程式碼介面下載](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing)


![](https://i.imgur.com/Q3PSVHt.png)


| 組員 | Codepen |
| -------- | -------- |
| Sonia     | [Codepen](https://codepen.io/YUJOU/pen/PorzWzv?editors=1100)     | 
| maci    | [Codepen](https://codepen.io/macy1215/pen/yLdJPNO)     | 



### 任務二：IT 邦偵探遊戲

請找出 [IT 邦幫忙的網站](https://ithelp.ithome.com.tw/)，每個頁面的響應式設計的資訊：
1. 這網站總共有幾個斷點？
2. 請描述這網站在 iPad、Mobile 上做了哪些巧思？請提供五處，並附圖，例如：
    * 有元素在 mobile 時被隱藏
    * 在 200 像素以下時會顯示有漢堡選單
    * 某某 class 元素在 iPad 會變成滿版


| 組員 | 第一題 | 第二題 |
| -------- | -------- | -------- |
| Sonia     | 發現4個     | 1. max-width: 992px 時，rightside 隱藏 ![image](https://hackmd.io/_uploads/BySCzNhdA.png)![image](https://hackmd.io/_uploads/S1Stm4nOA.png)2. min-width: 768px時，tabs往上右![image](https://hackmd.io/_uploads/HkfAVNnOC.png)3. screen and (max-width: 600px)、screen and (max-width: 991px)，logo大小變化![image](https://hackmd.io/_uploads/H1wBIE3u0.png)
| 培根 | -------- | 1. max-width: 767px ![image](https://hackmd.io/_uploads/ByZMBm6OA.png)|
| Macy | -------- | 1. .header__inner min-width: 856px![截圖 2024-07-24 下午3.35.17](https://hackmd.io/_uploads/r1jvJ4AOC.png)![截圖 2024-07-24 下午3.36.01](https://hackmd.io/_uploads/rkrskNRd0.png)

|

    



### 任務三：討論第三週版型該怎麼做
| 組員 | 目前進度 | 打算怎麼做 |
| -------- | -------- | -------- |
| Sonia | 剛看完助教直播 | 打算使用vite |
| Jason | 已完成 | 1.使用vite 2.問題討論![image](https://hackmd.io/_uploads/HkRYi76_0.png) |
| 培根 | 進行中 | 打算使用vite、bootstrap |
| Macy | 進行中 | 打算使用vite |



### 任務四：觀看 Vite 影音課程(建議準備 1.5~2 小時，再來挑戰此任務)


請觀看[第四週透過 Vite 部署網站流程](https://courses.hexschool.com/courses/2020112211/lectures/53654004) 章節後，順利完成各影片章節內容。
> 若組員操作有問題，還請 tag @Bingbingboom 助教協助~


| 組員 | GitRepo | GitPages |
| -------- | -------- | -------- |
| Jason     | Done     | Done     |
| 培根     | Done     | Done     |
| Sonia     | [Repo](https://github.com/yujouwu/2024LayoutGGV)     | [Pages](https://yujouwu.github.io/2024LayoutGGV/)     |
| Macy     | [Repo](https://github.com/macy1215/vitesimple)   | [Pages](https://macy1215.github.io/vitesimple/)     |






### 助教長檢核點

* 是否有截圖自己的討論結果

![image](https://hackmd.io/_uploads/HyrA3MpOC.png)
![image](https://hackmd.io/_uploads/B1fj6Mau0.png)
![image](https://hackmd.io/_uploads/rkFhx7aO0.png)
