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

# 6/11 每日任務 Day5

## HTML 任務題目
請修改[範例檔案](https://codepen.io/WangShuan/pen/JjWBeoJ)的 HTML 與 CSS 區塊完成以下兩種設計：

1. 將第一個藍色背景 div 中的三個 img 設計成 flex 的從右到左排序，然後分散貼齊左右
2. 將第二個綠色背景 div 中的三個 img 設計成 flex 的從上到下排序，然後居中

不會的同學可以到 50 小時影音教學 flex 網頁排版技巧中的 主軸介紹那則影片學習。

範例示意圖：

完成後示意圖：

## JS 任務題目

請參考下方代碼，回答每個 console.log() 的判斷結果(true 或 false)。

let a = '3';
let b = 3;

console.log(a == b)
console.log(a === b)

let c = '9';
console.log(c >= 9)

## 回報流程

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


## 作業回報區
<!--
1. WangShuan - HTML答案:

.row-reverse {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

JS 答案：true , false , true
-->
1. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/LYWJJYB)
2. [Huanan - HTML & JS 作業](https://codepen.io/hua_nan/pen/dyvqgZX)
3. [LiMin - HTML & JS 作業](https://codepen.io/XuLiMin/pen/oNZPQmy)
4. [drumrick - HTML & JS 作業](https://codepen.io/drumrick/pen/rNyZPEa)
5. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/ExWeJXR)
6. [Benson－HTML & JS 作業](https://codepen.io/polarBear712/pen/zYZJXym)
7. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/RwpYmRR)
8. [Lina Chen - HTML & JS 作業](https://codepen.io/LinaChen/pen/QWpVRQB)
9. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/QWpVRBV?editors=1100)
10. [Kaite- HTML 作業](https://codepen.io/aria-mi/pen/ExWeWqJ)
11. [蔡明達 - HTML & JS](https://codepen.io/bmzpfyxe/pen/xxqaNmZ)
12. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/qBrMGLN)
13. [駱彥融 - HTML & JS 作業](https://codepen.io/yjluo/pen/LYWJoob)
14. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/ExWezMj)
15. [Min - HTML作業](https://codepen.io/minnn7716/pen/VwpGOJb)
16. [henry - HTML作業](https://codepen.io/henrymorgan666/pen/ZEeMNgz)
17. [拿鐵 - HTML作業](https://codepen.io/qinsplanet1024/pen/abJagOZ?editors=0010)
18. [Qian - HTML & JS 作業](https://codepen.io/qianhuiwei/pen/BaWOgwM)
19. [ChengWei Hou - HTML & JS 作業](https://codepen.io/ChengWeiHou/pen/qBrMzKV)
20. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/LYWJKBe)
21. [Teddy - HTML & JS 作業](https://codepen.io/nina-web-eng/pen/XWMPLwg?editors=1111)
22. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/JjWagov)
23. [Yu - HTML & JS作業](https://codepen.io/yuuuu4444/pen/YzZOmBz?editors=0110)
24. [Yao Lin - HTML & JS作業](https://codepen.io/yaoyaoiii/pen/rNyZXbZ)
25. [Xing CT - HTML & JS作業](https://codepen.io/xing10/pen/KKWGPYJ)
26. [Moto - HTML & JS作業](https://codepen.io/moto-san/pen/eYvPYgp)
27. [Overy - HTML & JS 作業](https://codepen.io/overy-tsai/pen/MWpPWyg)
28. [小尹 - HTML 作業](https://codepen.io/myQtime/pen/dyvgyQe?editors=1100)
29. [winnie - HTML & JS 作業](https://codepen.io/hsuanyu0115/pen/XWMxJKz?editors=1100)
30. [William - HTML & JS 作業](https://codepen.io/hsuweihung/pen/JjWmove)
31. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/RwpeNew)
32. [櫻桃 - HTML & JS 作業](https://codepen.io/linjiayi275/pen/mdWzyge)
33. [Hi Annie - HTML & JS 作業](https://codepen.io/lhohdalu/pen/abJRvKW)
34. [Haley - HTML & JS 作業](https://codepen.io/wsx3690/pen/gOmBayE)
35. [OAO - HTML & JS 作業](https://codepen.io/OAOAO/pen/VwpEeMR)
36. [jie - HTML-JS作業](https://codepen.io/jie333/pen/ExWdPqG)
37. [yu shiuan chang - HTML-JS作業](https://codepen.io/prankaChang/pen/GRWXYOE)
38. [Roger - HTML-JS作業](https://codepen.io/redtea227/pen/oNZaLgZ)
39. [我是泇吟 - HTML & JS 作業](https://codepen.io/kljuqbxs/pen/GRWYqdY)
40. [Sabrina](https://codepen.io/a120220ms25/pen/JjWmREZ)
41. [Yen - HTML-JS作業](https://codepen.io/skxydvbs/pen/JjWmRve)
42. [PinYin - HTML-JS作業](https://codepen.io/PinYin/pen/RwpeGJb)
43. [Kelvin Wu - HTML-JS作業](https://codepen.io/kai5363/pen/RwpeobW)
44. [Anita](https://codepen.io/lcogkgva/pen/WNpaopd)
45. [Snail Yen- HTML作業](https://codepen.io/SnailYen/pen/mdWzJNq)
46. [Wei Han Jan- HTML & JS 作業](https://codepen.io/begoniasuccess/pen/xxqygwO)
47. [Chung - HTML & JS 作業](https://codepen.io/chung_123/pen/jOBeBPW)
48. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/zYZmZBP)
49. [Jeff H](https://hackmd.io/@jeff14994/r17i-ZZiu)
50. [BaoH-HTML作業](https://codepen.io/baoh/pen/Rwpexvw)
51. [三隻小貓 - HTML & JS 作業](https://codepen.io/bagelover/pen/MWpPGgj?editors=0010)
52. [Yuna - HTML & JS 作業](https://codepen.io/Yuna-Zhang/pen/yLMRjoM)
53. [Tommy - HTML 作業](https://codepen.io/tommy168/pen/eYvPQYq)
54. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/poexqLe?editors=1100)
55. [Anne Lin - HTML、JS作業](https://codepen.io/mmj159/pen/WNpampL)
56. [Clara Cai - HTML & JS 作業](https://codepen.io/Clara-Snowy/pen/mdWzZwX?editors=0110)
57. [Joy Cheng- HTML & JS 作業](https://codepen.io/joycheng5432/pen/QWpJWOo)
58. [ting - HTML & JS 作業](https://codepen.io/pen/?template=YzZRXop)
59. [Achi-HTML作業](https://codepen.io/leaf0608/pen/poeQgby)
60. [Michelle-HTML作業](https://codepen.io/michelle61219/pen/XWMyjWp)
61. [zong-huan - HTML & JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/LYWXyLK)
62. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/QWpJmQY)
63. [Ting - HTML & JS 作業](https://codepen.io/veqnspek-the-decoder/pen/PopxRVd)
64. [Hankan - HTML & JS 作業](https://codepen.io/Hankan/pen/YzZJNyx)
65. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/zYZMjgj)
66. [Min Chun Tsai - HTML & JS 作業](https://codepen.io/Tsai0926/pen/jOBQKxY)
67. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/mdWQvMe)
68. [采 - HTML & JS 作業](https://codepen.io/OrliOrli/pen/rNyqNXm)
69. [Ken Chen-HTML&JS作業](https://codepen.io/ilovedriftcity168/pen/BaWGEgN)
70. [Zackaz - HTML&JS作業](https://codepen.io/zackaz/pen/zYZyoWm)
71. [coco li - HTML&JS作業](https://codepen.io/corinna_li/pen/mdWamWd)
72. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/WNpPeMR?editors=0010)
73. [Erica Chen - HTML&JS作業](https://codepen.io/ericachen/pen/XWMOWwJ)
74. [YOYO - HTML&JS作業](https://codepen.io/lumedkle/pen/MWpLwXO?editors=1111)
75. [秉成 - HTML & JS 作業](https://codepen.io/mick1031/pen/MWpLJvP)
76. [Jimmy.cc - HTML & JS 作業](https://codepen.io/gminc/pen/QWpYzGY)
77. [li li - HTML & JS 作業](https://codepen.io/lintapop/pen/BaWMbLp)
78. [Ching hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/ExWMxGq?editors=1100)
79. [Shiny - HTML & JS 作業](https://codepen.io/shinychen/pen/bGqZNqm)
80. [林詠雯-HTML](https://codepen.io/meimeilin/pen/eYvorWo)
81. [andyphl - HTML & JS 作業](https://codepen.io/andyphl/pen/NWpmeRX)
82. [Chien - HTML & JS 作業](https://codepen.io/xxchein/pen/MWpRdNJ)
83. [LoKing - 作業(全)](https://codepen.io/loking23/pen/gOmVvxx)
84. [周周 - HTML & JS 作業](https://codepen.io/jhoujhou-the-decoder/pen/MWmgVLy)
85. [蔡秉祐 - HTML & JS 作業](https://codepen.io/cwrzyhae-the-animator/pen/GRmRZBr?editors=0010)
86. [Newman - HTML & JS 作業](https://codepen.io/newmankz/pen/xxdxOgV)
87. [chiachia - HTML 作業](https://codepen.io/chiachiaD/pen/abWbBxo?editors=1100)