:::success 【[題目連結](https://hackmd.io/YkzC44BeT5WJz_FktGF1EQ?view)】 <!-- 【檢核】 - [X] 參與人數: 10人 - [X] 參與名單 - [x] 任務內容 - [X] 討論截圖 --> ::: ## 參與人員 - [X] 阿榮#8277 - [X] PayRoom#8328 - [X] WA#9787 - [X] Tina02 - [X] AYA - [X] I401#7101 - [X] abalun#6727 - [X] jia yu#8896 - [X] 無敵笨笨貓#3628 - [X] 貓咪#6294 ## 任務一:玩 Flexbox 遊戲 以下遊戲任選一個,回報時請提供通關截圖,Miss 掉也沒關係: * [Flex pirate 新手關卡](https://hexschool.github.io/flexbox-pirate/index.html#/):預期 20~25 分 * [Flex 青蛙](https://flexboxfroggy.com/#zh-tw):預期 30~50分,後面關卡較難 需要提供破關畫面 ### 破關畫面 | 組員 | 截圖| |:----:|----------------------| |阿榮#8277|![](https://hackmd.io/_uploads/SJG29qJch.png =40%x) ![](https://hackmd.io/_uploads/r1ozC51c3.png =40%x)| |jia yu #8896|![](https://hackmd.io/_uploads/Syv2hoyc2.png =40%x) ![](https://hackmd.io/_uploads/BJUypo1cn.png =40%x)| |WA| ![](https://hackmd.io/_uploads/BJHM3ygc3.png =40%x) ![](https://hackmd.io/_uploads/B153L1l53.png =40%x)| |貓咪|![](https://hackmd.io/_uploads/rJMoXIl93.png =40%x)![](https://hackmd.io/_uploads/rJ4A78g93.png =40%x)| |Tina|![](https://hackmd.io/_uploads/HkSocBb92.png =40%x)![](https://hackmd.io/_uploads/rkCicrbcn.png =40%x)| |PayRoom|![](https://hackmd.io/_uploads/H19pyUb5n.png =40%x)![](https://hackmd.io/_uploads/B1O0y8-c2.png =40%x)| |I401#7101|![](https://hackmd.io/_uploads/HkobZ8b52.png =40%x)![](https://hackmd.io/_uploads/B1Vz-IW5h.png =40%x)| |abalun|![](https://i.imgur.com/YfqKb21.png =40%x) | AYA | ![](https://hackmd.io/_uploads/rkfiR0m5n.png =40%x) | ## 任務二:討論第二週版型該怎麼做 一個人能力有限,八個人團結力量大,彼此討論該版型如何攻略,才能發揮團隊最強力量 ### 🗣️討論 | # | 討論 | |:----:|---------------------------------------------------| |introduction 區塊圖片之間,間距是24px,如果使用margin做推移的話,很容易產生 x軸 (修改很多次都出現x軸)|同學解法: 打開格線系統(ctrl+shift+4),會發現左側塊和右側3張圖,間距都是一樣的24px,所以我就直接`jusfity-content:space-beween;` | |introduction 三個圖片總寬度|可以用 746px 的占比來算,大約 60%,或是使用 calc( 764px / 1296px )| |About me 的四個格子高度拉長,本來使用 `max-width` 來設定高度上限|組員分享解法: 是要加上 `align-items: center` 來讓交錯軸置中| |Guideline 中字體為 Bruno Ace ,但是設計稿中是使用 Bruno Ace SC ,要使用哪種呢?|要用 Bruno Ace SC,兩種字體有一點差異。可以透過 Hi 這個字觀察,其實長不一樣| |在附圖的區塊有備註 hover 效果,但是在圖片下載區中提供的 Discord 有藍框,該怎麼解決?|取得原圖的解法🤩 <br/> 1. 先將檔案 duplicate 一份,複製出來的檔案就是自己的了,可以編輯。如果有註記、編輯...等需求,非常方便 <br/>2. 選取圖片,點右邊眼睛來隱藏 drop shadow 效果 <br/> 3. Export 圖片 | |我想問,1296px 是要自己算還是有哪邊可以直接看到呢?|12(欄) * 86 + 24 (gutter) * 11 = 1296px + 組員補充[每日任務連結](https://hackmd.io/@hexschool/BkrfVEFNh)| ## 任務三:觀看 Vite 影音課程(建議準備 1.5~2 小時,再來挑戰此任務) 請觀看第四週補充知識 章節,看完 GitHub Pages 部署網站流程 (下) 後,影片會引導你將網站上傳到一個空間,並會提供一個網站網址給你,各組員若執行成功,再請將該網址貼到回報區。 ### 完成囉 | 組員 | 連結 | |:----:|--------| | AYA |[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1122731602032742530) | |PayRoom|[Github](https://water38198.github.io/viteDemo/)| |jia yu|[Github](https://jiayu0220.github.io/vite-practice/)| |WA|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1129072299459489903) | |abalun|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1129072299459489903)| |Tina|[Discord](https://discord.com/channels/801807326054055996/1119173716513935510/1131066569091465268 )| |阿榮|[Discord](https://discord.com/channels/801807326054055996/1126477469931819088/1128222282033152090)| ## 語音 & 文字討論截圖 > 【討論時間】: [time=Sun, Jul 16, 2023 20:00 PM] ![](https://hackmd.io/_uploads/SyK7pIZ5h.png) > ![](https://hackmd.io/_uploads/r17-XfS5h.png) > ![](https://hackmd.io/_uploads/Byvz7zHqh.png)