---
# System prepended metadata

title: 6/18 每日任務 Day10
tags: [2021 程式體驗營]

---

---
tags: 2021 程式體驗營
---

# 6/18 每日任務 Day10

## HTML 任務題目

請回答關於 RWD 的三題問答題：

### 第一題 

請說明 Mobile First 設計與 Desktop First 設計分別是什麼意思？

### 第二題 

請問下方代碼這種寫法是屬於 Mobile First 設計還是 Desktop First 設計？
```css=
.item{
  width: 100%;
}
@media (min-width: 768px) {
  .item{
    width: 50%;
  }
}
@media (min-width: 1440px) {
  .item{
    width: 25%;
  }
}
```

### 第三題

請問當螢幕寬度小於 414px 時 content 寬度為多少？為什麼？
```htmlembedded=
<!-- HTML -->
<body>
    <div class="content"></div>
</body>
```
```css=
/* CSS */
.content{
  width: 25%;
  margin: 10px;
}
@media (max-width: 414px) {
  .content{
    width: 100%;
  }
}
@media (max-width: 768px) {
  .content{
    width: 50%;
  }
}
```

## JS 任務題目

請同學根據下方文字說明練習使用 [whimsical](https://whimsical.com/) 來繪製自己的流程圖：

小夫想去附近的兒童公園玩溜滑梯 
但是公園有限制必須為 5 歲至未滿 14 歲的兒童才可以玩
於是小夫開始計算自己年齡 發現自己已經是 15 歲
請問他還可以坐溜滑梯嗎？

該練習只需使用以下四種圖案來繪製即可：
![](https://i.imgur.com/2nRjX8w.png)


step1: 進入官網點擊使用 Google 註冊或信箱註冊
step2: 點擊左上角加號選擇要繪製哪種圖選擇 FlowChart 流程圖
step3: 開始依照說明條件繪製出自己的流程圖
step4: 繪製完成後點擊右上角頭像左邊的鎖頭 找到地球那行設置成 can view
step5: 點擊上方出現的 Copy Link 貼到下面回報區即可

完成後同學也可嘗試照著自己的流程圖撰寫 JS 代碼

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

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

## 作業回報區
<!-- 
1. WangShuan - 答案:
第一題：
手機優先設計從最小寬度開始設計，一開始直接寫的是手機版，往後是 @media (min-width: 768px){...}、@media (min-width: 1024px){...} 這種逐漸往大螢幕設計的順序。
桌機優先設計從最大寬度開始設計，一開始直接寫的是桌機版，往後是 @media (max-width: 768px){...}、@media (max-width: 414px){...} 這種逐漸往小螢幕設計的順序。
第二題：
手機優先，因為他是從最小寬度開始設計的。
第三題：
不會執行，因為ＣＳＳ的順序是後面會覆蓋前面的，所以手機版已經被平板尺寸的樣式覆蓋掉，不管是平板還是手機版都會顯示 50％ 寬度。
ＪＳ流程圖：
https://whimsical.com/W56h9tc8TKogTVvm6QEsfx
 -->
 1. [我是泇吟 - HTML && JS 作業](https://codepen.io/kljuqbxs/pen/RwpdGpL)
 2. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/WNpmGKW)
 3. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/LYWaRKO)
 4. [Lina Chen - HTML && JS 作業](https://codepen.io/LinaChen/pen/bGqZBwb)
 5. [明達在這 - HTML 作業](https://codepen.io/bmzpfyxe/pen/LYWabjr?editors=0110)
 6. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/OJpqbZJ)
 7. [henry - HTML & JS 作業](https://codepen.io/henrymorgan666/pen/NWpJbaq?editors=1100)
 8. [Xing CT - HTML & JS 作業](https://codepen.io/xing10/pen/xxqBRjj)
 9. [Sz - HTML & JS 作業](https://whimsical.com/day10-Nq6KCF3Bmvxr9AocWexB2s)
 10. [Isaac - HTML & JS 作業](https://codepen.io/isaac1125/pen/VwpRmON)
 11. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/rNyRjeK?editors=1100)
 12. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/full/poeYRKK)<!--  https://whimsical.com/2021-6-18-Ua49ddfFsLVvE1VQ9eMq31 -->
 13. [Katie- HTML作業](https://codepen.io/aria-mi/pen/KKWEWEP?editors=1100)
 14. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/rNyRmMy)
 15. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/poeYexz)
 16. Nap－[HTML](https://codepen.io/o0o0o1o0/full/RwpdVbB) & [JS](https://whimsical.com/2021-06-18-hex-daily-MnSfKkXFms5ZiT9sH7ikLh) 作業
 17. [BaoH - HTML & JS 作業](https://codepen.io/baoh/pen/JjWzWwN)
 18. [Chung - HTML & JS 作業](https://codepen.io/chung_123/pen/QWpovxE)
 19. [Yu](https://codepen.io/yuuuu4444/pen/LYWayeB?editors=1010)
 20. William - [HTML作業](https://codepen.io/hsuweihung/pen/eYvXGNd)＆[JS作業](https://whimsical.com/js-KvvYftSy4yYshgsA2WGBFS)
 21. [yu shiuan chang HTML & JS作業](https://codepen.io/prankaChang/pen/NWpJyGQ?editors=1010)
 22. Hi Annie-[HTML](https://codepen.io/lhohdalu/pen/poeYaWb)&[JS作業](https://whimsical.com/6-18-UYJZwviEfbXT24LYCgVyFE)
 23. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/YzZgeqv)
 24. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/RwpdyMj)
<!--流程圖 : https://whimsical.com/6-18-js-UBUF9i2D3BP8HSJCXVfVL5-->
 25. [OAO- HTML &JS 作業](https://codepen.io/OAOAO/pen/abJMjqM)
<!--流程圖  https://whimsical.com/6-18-G3C87JX7u4oJ49yjuadcVx -->
 27. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FHJB4cCi9_%2F%252Ftr2SUQD6TByl4UGnxjfvug)
 28. [Benson - HTML & JS 作業](https://codepen.io/polarBear712/pen/ExWMJjq)
 29. [Saiki - HTML & JS 作業](https://whimsical.com/6-18-day10-9PwivGqB2ASfXg7hE4Nry2)
 30. [Anne Lin - HTML & JS 作業](https://whimsical.com/6-18-day10-Ko34yvAPuSYe6sSf7gvon1)
 31. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/VwpRJyZ)
 32. [Min - HTML作業](https://codepen.io/minnn7716/pen/rNybNqQ)
 33. [Ching hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/gOmyWGZ?editors=1100)
 34. [Sabrina](https://codepen.io/a120220ms25/pen/rNybYrr)
 35. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/GRWLLPO?editors=1000)
 36. [PinYin - HTML作業](https://codepen.io/PinYin/pen/mdWYJJX)
 37. [LTL - HTML作業](https://codepen.io/ltlin93/full/GRWebjg)＆[JS作業](https://whimsical.com/6-18-day10-EaGvUXPEci9UJ4RgZoyr48) 
38. drumrick - [HTML 作業](https://codepen.io/drumrick/pen/mdWYZab) 以及 [flowchart 作業](https://whimsical.com/4fQcQtQWGvBwXhDnH7eks6)
39. [jie -HTML作業](https://codepen.io/jie333/pen/QWpXKVm)[&JS作業](https://whimsical.com/57GCbpQTwrnxyViQiwCR9p)
40. [Kelvin Wu - HTML作業](https://codepen.io/kai5363/pen/gOmNRXJ)
41. [YOYO - HTML & JS 作業](https://codepen.io/lumedkle/pen/zYZgPKo)
42. [蔡秉祐 - HTML 作業](https://codepen.io/cwrzyhae-the-animator/pen/NWjWpLN)
43. [Erica Chen - HTML&JS作業](https://codepen.io/ericachen/pen/PomoByB)
44. [袁祥恩](https://whimsical.com/C8pvijfFS3Eroao4eh9KRE)
45. [betty - HTML&JS作業](https://codepen.io/betty-hu/pen/wvdKmXe?editors=1010)
46. Shiny -[ HTML](https://codepen.io/OAOAO/pen/abJMjqM) & [JS 作業](https://whimsical.com/6-18-UGsghScsdQ3HkZR9xbipvZ) 
47. zong-huan-[HTML作業](https://codepen.io/wxsobwib-the-encoder/pen/MWmEPWM)&[JS作業](https://whimsical.com/6-18-L5jHzoAJvqzgTY3BDjipAa)