---

title: 2021直播切版班-22組 | 第四週小組任務
tags: 2021直播切版班, 六角
date: 20210702
image:

---
# ✏第四週小組任務
<!-- [TOC] -->
### 參與人員
| 參與成員暱稱 | Slack ID |
| -------------- | ----------- |
| Kent | U021X7R4AQM |
| 童筱涵 Hsiao-Han Tung | U021F83B07N |
| 粘勝凱 | U026RCXQ456 |
| 阿瓜 | U021KN259UP |

---

這週主要是讓各位同學熟悉 RWD 操作，
建議使用 ZOOM 來討論，當然也可用 Slack，組員沒麥克風也可以一個人分享畫面，其他組員用文字討論也可。

---

### 任務一：請觀看 Gulp 影片，並整合眼鏡形象官網

請觀看第[第四週透過 Gulp 部署網站流程](https://courses.hexschool.com/courses/2020112/lectures/33575267)章節後，將眼鏡形象官網透過 Layout+EJS 來整合，**並在回報中提供參與討論組員的 Git Repo 與 GitHub Pages 網址
**

#### 🍎答案回覆
> [Git Repo](https://codepen.io/)
> [GitHub Pages](https://codepen.io/)
[name=xxx][color=green]

> [Git Repo](https://codepen.io/)
> [GitHub Pages](https://codepen.io/)
[name=xxx][color=gold]

> [Git Repo](https://codepen.io/)
> [GitHub Pages](https://codepen.io/)
> [name=xxx][color=orange]

> [Git Repo](https://codepen.io/)
> [GitHub Pages](https://codepen.io/)
> [name=xxx][color=hotpink]

> [Git Repo](https://codepen.io/)
> [GitHub Pages](https://codepen.io/)
> [name=xxx][color=orangered]

### 任務一截圖
:::spoiler **slack 討論截圖 > 收合**


:::

---
### 任務二：觀看 SCSS 結構，討論組員彼此間該如何逐步規劃 SCSS
* [2014 MOPCON](https://github.com/gonsakon/mopcon2014/blob/master/sass/all.sass)
* [2018 The F2E](https://github.com/gonsakon/theF2EPK/blob/master/source/sass/all.sass)
* [Bootstrap](https://github.com/twbs/bootstrap/tree/master/scss)

## 上一梯學長姐
* Vicky 學姐：[GitHub Repo](https://github.com/peggyted0129/HexSchoolTraining/tree/main/week4gulp/scss)、[GitHub Pages](https://peggyted0129.github.io/HexSchoolTraining/week4gulp/index.html)
* carrie 學姐：[GitHub Repo](https://github.com/echocarriet/layoutWeek4)、[GitHub Pages](https://echocarriet.github.io/layoutWeek4/index.html)
* chiayutsai 學姐：[GitHub Repo](https://chiayutsai.github.io/week4_glasses/)、[GitHub Pages](https://github.com/chiayutsai/week4_glasses)
* 東京自耕農學長(poscss)：[GitHub Repo](https://github.com/overactive1988/lesson3_homework/tree/master/src/css/css/_include)、[GitHub Pages](https://overactive1988.github.io/HexSchool_webslicinglesson2020/week03/)

> 若組員操作有問題，還請 tag @穎旻 助教協助~

### 助教長檢核點

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

#### 🍎任務二答案截圖
:::spoiler **slack 討論截圖 > 收合**
:::

#### 討論中推薦的筆記與同學的架構：
kent提供：
[Sass 架構筆記](https://kentclark.notion.site/Bootstrap-Sass-5262f86dfd404f1fb602e6f880b909f6)
[Sass: 自建CSS框架Grid System與Spacing](https://awdr74100.github.io/2020-06-24-scss-gridsystem-spacing/)
（看了這篇讓我學習到超多，也學習如何過有效產 media）

👥其他同學的架構：
* 沈依蓉：[repo](https://github.com/lily-oa/Lession3-glassesStore)、[demo](https://lily-oa.github.io/Lession3-glassesStore/)（👍筱涵推推）
參考的的變數設置
（讓我學習到使用數值以及英文的 size 做設置，可以思考相同倍數的用數值，比較奇怪的用 size，我的變數命名）
* 黃士桓：[repo](https://github.com/huan5678/week3-glassesStore)、[demo](https://huan5678.github.io/week3-glassesStore/)
ejs、斷點都設置的很不錯，可以參考拿來用
做了很多 hover 效果、遷入 [google map](https://huan5678.github.io/week3-glassesStore/location2.html)
* Vivian Yeh：[repo](https://github.com/vivian1223/glasses-store)、[demo](https://vivian1223.github.io/glasses-store/)
util 通用類別用的很徹底
（很適合拿來學習 util）
肉鬆：[repo](https://github.com/recall131477/week4-work/tree/main/app/assets/style)、[demo](https://recall131477.github.io/week4-work/)
tailwind 大濕
（期許未來四週中，我也能學習 tailwind 應用）

---

## [第四週回報區](https://hackmd.io/@hexschool/B16wUku0O)