---
tags: 公益程式體驗營
---
# 公益程式體驗營-每日任務
加碼作業:[CSS、JS 每日任務](https://hackmd.io/TJJtcVFgTXW2uWhaqclKMg) (不批改可參考同學的或發問)

5/3-[HTML、CSS 差異與文字設定練習](https://hackmd.io/IEQba2AWQpaJ4V-LzYAgXQ)、[我的codepen](https://codepen.io/tinchen/full/abqzLGo)
5/4-[HTML 標籤元素、CSS 判斷](https://hackmd.io/tZJKVENiRieGQ1dLSz4ygA)、[我的codepen](https://codepen.io/tinchen/pen/xxYGbJJ)
5/5-[flex 練習](https://hackmd.io/vPQjg8axR_yz54LCnHoZow) [我的codepen](https://codepen.io/tinchen/pen/xxYwbBj)、[我的codepen-position寫法](https://codepen.io/tinchen/pen/NWyGqyj)
`這裡印象中好像是因為位移，從物件的邊緣計算，補回差額才下-50%待確認`
5/6-[甜點店商-卡片購物車練習](https://hackmd.io/Ol3FuSZzQOqhBFBRpX_19A?both)、[我的codepen](https://codepen.io/tinchen/pen/wvyMWZX)

==

5/9-[position 練習](https://hackmd.io/6WcIg_rYR-e-8vegks_cJg?view)、[我的codepen](https://codepen.io/tinchen/pen/LYQGorX)
`酷那個字可將line-height設定與box3一樣高 或是display:felx要下在box3才能讓文字垂直也置中，flex果然需要反覆練習`
5/10-[flex練習一](https://hackmd.io/QKMXtTHoT8GgkPVs-4-low?both)、[我的codepen](https://codepen.io/tinchen/pen/LYQNmmW)
`.box有設定margin，align-self:flex-end; 會受到影響，所以要將上下的margin清除`
5/11-[flex練習二](https://hackmd.io/GHf3WiVVQ1Wme2DZtIlgWw)、[我的codepen](https://codepen.io/tinchen/pen/BaYzwme)

`2. li a連結點擊範圍加大，我居然常不確定要設定在哪裡，我先用padding: 14px 36px;`
5/12-[RWD練習I](https://hackmd.io/dPkorV9tTfGp6lWMqdAiag)、[我的codepen](https://codepen.io/tinchen/pen/yLvayOq)
`有點忘記scss寫法，要先設定mixin再用include呼叫，include放的位置有點忘了`
5/13-[RWD練習II](https://hackmd.io/i_Jp0XpRSdupyKoWiieh7g)、[我的codepen](https://codepen.io/tinchen/pen/bGLRpgB)、[ANS](https://codepen.io/DoLucky/pen/dydMKyd?editors=1100)
`要補上borderbox，card只需寫width 不用加max-width`

==

5/16-[HTML、CSS觀念補給](https://hackmd.io/W_npyDqyTHS2JCRpFbp3iA)、[codepen題目跟解答](https://codepen.io/tinchen/pen/NWypePW)
5/17-[position趣味小練習](https://hackmd.io/ECgyAgRmR9ykhpo_hYGTNA)、[我的codepen](https://codepen.io/tinchen/pen/gOvWvRM)
5/18-[RWD 觀念補給](https://hackmd.io/n0QBeReFTv2l9bzQkIw71A?view)、[我的codepen](https://codepen.io/tinchen/pen/dydvjLe)
5/19-[基本表單元素label＆input](https://hackmd.io/Bea5G46KQS2-xkS6RArJgQ?view)、[我的codepen](https://codepen.io/tinchen/pen/Jjprbbp)、[w3c type](https://www.w3schools.com/tags/tag_input.asp)
`type和label可查看w3c`
5/20-[label＆input-list](https://hackmd.io/LsKBfdubROu9k2NDh3zkfQ)、[我的codepen](https://codepen.io/tinchen/pen/wvyqxEy)

==


5/23-[color練習](https://hackmd.io/5fLPm1sgRpG0WdGs_5q9_g)、[我的codepen](https://codepen.io/tinchen/pen/jOZLKvm)
`學一個忘一個哈哈哈 mixin和色系darken、lighten有印象但不熟語法，還好有筆記可以速查` 

5/24-[background](https://hackmd.io/Bmh7zvC3RAqUUlQ1RieLlQ?view)、[我的codepen](https://codepen.io/tinchen/pen/LYQzRaz)   
`綜合寫法稍微 忘了 哈哈 然後bgc也寫在一起就可以 不用分開`
5/25-[SCSS/Sass練習](https://hackmd.io/KUW2uzn9SI6vEICMsxKY7Q?view)、[我的codepen](https://codepen.io/tinchen/pen/RwQjboY)、[ANS](https://codepen.io/DoLucky/pen/OJQgBzN?editors=1100)
5/26-[Flex與RWD練習](https://hackmd.io/S18AwRiMSRWU6J8ucf9ywA)、[我的codepen](https://codepen.io/tinchen/pen/GRQOYoG)
`讓我短路一天的rwd...height在桌機時不能寫死，參考別人是用padding推，但需要每個斷點都寫?`