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

# 6/10 每日任務 Day4

## HTML 任務題目

請修改[範例檔案](https://codepen.io/WangShuan/pen/zYZLOLB?editors=0100)中的 HTML 與 CSS 區塊內容，將樣式優化並整理出至少三個可重複使用的 class ，優化前後所產生的畫面需一致。

舉例來說：
1. 有多個區塊同樣都設置了 margin-left 此時就可以單獨將 margin-left 拉出來設計成 `.ml-1{ margin-left: xx;}`
2. 有多個區域中設置了背景色與文字設 就可以單獨拉出來 設計成 `.bg-xxx{ background-color: xxx; color: xxx; }`
3. 所有區塊都設置了某個樣式 比如字體 是不是也可以拉出來設在 body 中就好
4. 諸如上述情況你還能如何優化 寫出更好的樣式等等

這邊請同學點擊進入範例的 codepen 後 找到右下角的 fork 按鈕
按下 fork 即可將該 codepen 複製一份到自己帳號下做使用。

## JS 任務題目

請在不使用 console.log 查看結果的情況下回答 a b c 的值分別是多少？

let a = 10;
let b = 5;

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

b--
b--
console.log(b)

let c = 9
c++
console.log(c)

## 回報流程

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


## 作業回報區
<!-- 1. [WangShuan - HTML 作業]()
2. WangShuan - JS 作業 - a = 20; b = 3; c = 10;
-->
1. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/eYvLOBa)
2. [LiMin－HTML & JS 作業](https://codepen.io/XuLiMin/pen/yLMxLXe)
3. [drumrick－HTML & JS 作業](https://codepen.io/drumrick/pen/poeOyjO)
4. [Benson－HTML & JS 作業](https://codepen.io/polarBear712/pen/eYvLZKO)
5. [Lai HTML & JS 作業](https://codepen.io/twilight-sl/pen/jOBvWKa)
6. [Yu - HTML & JS 作業](https://codepen.io/yuuuu4444/pen/BaWOKEO)
7. [Lina Chen](https://codepen.io/LinaChen/pen/poeObeJ)
8. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/ExWeyvm?editors=1100)
9. [蔡明達 - HTML & JS 作業](https://codepen.io/bmzpfyxe/pen/BaWOzvB?editors=1100)
10. [駱彥融 - HTML & JS 作業](https://codepen.io/yjluo/pen/oNZPLQM)
11. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/QWpVEMW)
12. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/qBrMNgK)
13. [Katie-HTML 作業](https://codepen.io/aria-mi/pen/xxqaEgy)
14. [Natsu小夏 - HTML作業](https://codepen.io/natsunari/pen/abJamyR)
15. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/OJpoRPP)
16. [Qian - HTML & JS 作業](https://codepen.io/qianhuiwei/pen/WNpgGew?editors=1100)
17. [Janet Shen - HTML & JS 作業](https://codepen.io/janetshen/pen/zYZJKvW?editors=1100)
18. [winnie - HTML & JS 作業](https://codepen.io/hsuanyu0115/pen/ZEeMpro?editors=1100)
19. [Yuna - HTML & JS 作業](https://codepen.io/Yuna-Zhang/pen/rNyZWxR)
20. [小尹 - HTML 作業](https://codepen.io/myQtime/pen/mdWGOmm?editors=1100)
21. [Xing CT - HTML 作業](https://codepen.io/xing10/pen/BaWOLvW?editors=1100)
22. [Yen - HTML & JS 作業](https://codepen.io/skxydvbs/pen/QWpVGVz)
23. [David - HTML作業](https://codepen.io/dotsea/pen/bGqxqbV?editors=1100)
24. [Ken Chen-HTML&JS作業](https://codepen.io/ilovedriftcity168/pen/RwpYGKb)
25. [Yu shiuan chang-HTML&JS作業](https://codepen.io/prankaChang/pen/jOBvOWN?editors=1010)
26. [Teddy-HTML&JS作業](https://codepen.io/nina-web-eng/pen/wvJEWbB?editors=1010)
27. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/dyvqvyw)
28. [William - HTML & JS 作業](https://codepen.io/hsuweihung/pen/vYxzXdY)
29. [BT - HTML & JS 作業](https://codepen.io/Bettyhsu/pen/WNpgjEK)
30. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/Popdmva)
31. [Joy Cheng - HTML & JS 作業](https://codepen.io/joycheng5432/pen/xxqarKR?editors=1100)
32. [Chiao Chang - HTML 作業](https://codepen.io/azulcasper/pen/xxqarPL)
33. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/wvJEqwa?editors=1100)
34. [BaoH - HTML作業](https://codepen.io/baoh/pen/JjWayOw?editors=1100)
35. [Min - HTML作業](https://codepen.io/minnn7716/pen/QWpVGKx?editors=1100)
36. [ChengWei Hou - HTML & JS 作業](https://codepen.io/ChengWeiHou/pen/WNpgEgO?editors=1100)
37. [Haley - HTML & JS 作業](https://codepen.io/wsx3690/pen/RwpYLKK)
38. [Moto - HTML & JS 作業](https://codepen.io/moto-san/pen/LYWJzPY)
39. [OAO - HTML & JS 作業](https://codepen.io/OAOAO/pen/abJaLwb)
40. [kevinhuang (U022RQHRVRU) - HTML 作業](https://codepen.io/h2m730131/pen/NWpLwXQ)
<!-- JS 任務題目:
a = 20, b = 3, c = 10
-->
41. [Snail Yen - HTML 作業](https://codepen.io/SnailYen/pen/RwpYjZB)
42. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/LYWJbQZ)
43. [周周 HTML & JS作業](https://codepen.io/jhoujhou-the-decoder/pen/zYZJPeE?editors=1100)
44. [PinYin HTML & JS作業](https://codepen.io/PinYin/pen/KKWxNPR)
45. [LoKing23 HTML & JS 作業](https://codepen.io/loking23/pen/ZEeMyOb)
46. [Roger HTML & JS 作業](https://codepen.io/redtea227/pen/OJpozGW)
47. [齡移 HTML & JS 作業]()
48. [采 HTML & JS 作業](https://codepen.io/OrliOrli/pen/KKWxoop?editors=1112)
49. [henry HTML作業](https://codepen.io/henrymorgan666/pen/ExWeLwp)
50. [Anne Lin HTML、JS作業](https://codepen.io/mmj159/pen/qBrMKRE)
51. [andyphl HTML、JS作業](https://codepen.io/andyphl/pen/VwpGdxP)
52. [Chung－HTML & JS 作業](https://codepen.io/chung_123/pen/Popdave)
53. [阿丁兒－HTML & JS 作業](https://codepen.io/dingpachan/pen/oNZPyKW)
54. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/WNpgKrW)
55. [Yao Lin - HTML & JS 作業](https://codepen.io/yaoyaoiii/pen/MWpqBKY)
56. [Jeff H](https://hackmd.io/56bbjVLCTI6gamBnSMMgPg?view)
57. [Zackaz - HTML&JS作業](https://codepen.io/zackaz/pen/wvJExJO)
58. [Huanan - HTML&JS作業](https://codepen.io/hua_nan/pen/XWMPPQy)
59. [Annie W - HTML&JS作業](https://codepen.io/anmiya/pen/mdWGzyE?editors=0100)
60. [三隻小貓 - HTML&JS作業](https://codepen.io/bagelover/pen/vYxzQQV)
61. [Overy - HTML & JS 作業](https://codepen.io/overy-tsai/pen/VwpGojq)
62. [Abby-HTML作業](https://codepen.io/abby-shiu/pen/KKWGwZm)
63. [Min Chun Tsai - HTML & JS作業](https://codepen.io/Tsai0926/pen/jOBeExm)
64. [櫻桃- HTML & JS作業](https://codepen.io/linjiayi275/pen/XWMxbWy)
65. [Hi Annie- HTML & JS作業](https://codepen.io/lhohdalu/pen/OJpBymB?editors=1111)
66. [jie - HTML & JS作業](https://codepen.io/jie333/pen/JjWmYZy)
67. [我是泇吟 - HTML & JS作業](https://codepen.io/kljuqbxs/pen/NWpOxBb)
68. [Sabrina](https://codepen.io/a120220ms25/pen/mdWzELG)
69. [Kelvin Wu - HTML & JS作業](https://codepen.io/kai5363/pen/yLMxVBq)
70. [Anita](https://codepen.io/lcogkgva/pen/bGqmBER)
71. [Chien - HTML & JS 作業](https://codepen.io/xxchein/pen/vYxVRKe)
72. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/XWMxPNa?editors=1100)
73. [Clara - HTML & JS 作業](https://codepen.io/Clara-Snowy/pen/yLMRWoE)
74. [ting - HTML & JS 作業](https://codepen.io/pen/?template=mdWzWay)
75. [Achi-HTML作業](https://codepen.io/leaf0608/pen/yLMQeLe?editors=1100)
76. [Michelle - HTML & JS 作業](https://codepen.io/michelle61219/pen/LYWXZgL)
77. [Greg Wu - HTML & JS 作業](https://codepen.io/WuGreg/pen/YzZReGK)
78. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/GRWwxov)
79. [Ting - HTML & JS 作業](https://codepen.io/veqnspek-the-decoder/pen/LYWXdJy)
80. [zong-huan - HTML & JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/ExWOmmG)
81. [coco li - HTML & JS 作業](https://codepen.io/corinna_li/pen/rNyoyXG)
82. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/ZEewzGK?editors=1010)
83. [Erica Chen - HTML & JS 作業](https://codepen.io/ericachen/pen/wvJNvKe)
84. [YOYO - HTML & JS 作業](https://codepen.io/lumedkle/pen/NWpoqxG?editors=1111)
85. [秉成 - HTML & JS 作業](https://codepen.io/mick1031/pen/YzZBpOm?editors=0010)
86. [li li- HTML & JS 作業](https://codepen.io/lintapop/pen/BaWMGxw)
87. [Jimmy.cc - HTML & JS 作業](https://codepen.io/gminc/pen/poeGOKo)
88. [Shiny - HTML & JS 作業](https://codepen.io/shinychen/pen/zYZMgro)
89. [Ching hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/OJpqRKd)
90. [林詠雯-HTML 作業](https://codepen.io/meimeilin/pen/eYvorWo)
91. [蔡秉祐-HTML 作業](https://codepen.io/cwrzyhae-the-animator/pen/NWjWGNL?editors=1100)
92. [Newman - HTML & JS 作業 ](https://codepen.io/newmankz/pen/NWjWrNL)
93. [chiachia - HTML 作業](https://codepen.io/chiachiaD/pen/poPoNZZ?editors=0100)