---
# System prepended metadata

title: 第六週小組任務 - 切版班 12 組
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 第六週小組任務 - 切版班 12 組
> 討論日期及時間 > 2022/08/13 20:30-22:30
> 
**組員參與名單(7/10)：**
* christina#6185
* yuyu#6310
* hungya#0773
* yichih#6223
* Wei-Ting#7691
* Winnie Wu#5468
*  DoraHuang#8223

## 問題

### 任務一：請一起編譯 Bootstrap SCSS，並修改變數，讓主色 primary 能變更自己想要的色系，整合自己的 all.scss，並確保有編譯成功，有必要時，組員彼此用 ZOOM 協助除錯，或召喚助教協助

答：
![](https://i.imgur.com/bQKtREs.png)
![](https://i.imgur.com/XVXgx9J.png)

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

> scss變數編譯失敗： 
> 如果使用bs5.2的版本可嘗試加入_maps.scss 
> ![](https://i.imgur.com/I5HkSik.png)
> ![](https://i.imgur.com/eIJhDRD.png)



---

### 任務二：請試著使用 Bootstrap，做這一頁[格線系統練習設計稿](https://bootstrap.hexschool.com/docs/4.2/examples/grid/)

答：


| Name | Codepen |  Github pages |  Github repo | 
| -------- | -------- | -------- | -------- | 
| yuyu#6310     |[ Link ](https://codepen.io/yuyu0905/pen/xxWyGGB?editors=1000)  | - | - |
| christina#6185 |[ Link ](https://codepen.io/chrisc0210/pen/JjLmjay) | - | - | 
| hungya#0773 | - | [ Link ](https://hungya777.github.io/web-design-hexSchool2022-week6-group-hw2/)| [ Link ](https://github.com/hungya777/web-design-hexSchool2022-week6-group-hw2) | 


---


### 任務三：請討論[第六週版型](https://rpg.hexschool.com/training/30/task?type=detail&id=304)的實作流程

答：

#### 第六週作業要用到的插件：
* https://www.swiper.com.cn/
* https://mymth.github.io/vanillajs-datepicker/#/

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


#### 文字跟log的漸層色可以用background的linear-gradient來做 

* [Background-image 之二- 金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/articles/10248148)
* [範例](https://codepen.io/chrisc0210/pen/zYWmqqy)


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


#### 灰色的變數可統一在自己新增的_variables.scss修改
![](https://i.imgur.com/rkd2xn9.png)
![](https://i.imgur.com/TmrBFpQ.png)

---

> 謝謝今天有參與的同學們！(再二週!!)  :100: 
<iframe src="https://giphy.com/embed/IcGkqdUmYLFGE" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/IcGkqdUmYLFGE"></a></p>
