--- tags: 軟體工程師體驗營 - 2024 --- # 🏅 切版任務 Day5 - Material Icons + Figma Icon 名稱觀看教學 ## Material Icons [Material Icon 官網](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled) > [Material Icons Guide](https://developers.google.com/fonts/docs/material_icons) > 使用 Material Icon > 使用 Filled style **載入 Material Icon** 在 HTML `<head>` 內加入下方 CDN ```htmlembedded= <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ``` 使用 Codepen 時，也可以直接在設定中 CSS 區塊「Add External Stylesheets/Pens」加入 CDN URL（如圖） ![](https://i.imgur.com/vVB4njM.png) **選擇想要使用的 Icon** 點選 icon，出現右側欄 ![](https://i.imgur.com/MEfhxnE.png) 將 **Icon font** 中第一個區塊程式碼貼至 HTML 區塊內 > [Material Icons 載入範例](https://codepen.io/hexschool/pen/PoypBKv) ## 題目 練習使用 **Material Icons** 載入下方 icon ![](https://imgur.com/CVp0Kgp.png) > Arrow Forward、Arrow Downward、Menu、Close ### 補充：Figma 如何觀看 icon 名稱 ![](https://imgur.com/BdENbkZ.png) >設計師提供設計稿時，大多會有相關的導覽頁（guideline）提供相關基礎設定與相關資訊。 ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： https://codepen.io/jmimiding4104/pen/JjVwpqL --> 回報區 --- | 報數 | Discord 名字 | Codepen／其他回饋 | |:----:|:----------------:| --------------------------------------------------------------------------- | | 1 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/NWmVvQj) | | 2 | Meng | [Codepen](https://codepen.io/menglin1203/pen/LYvojKo) | | 3 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/QWPRqyO) | | 4 | Larry | [Codepen](https://codepen.io/larrylinr5/pen/yLrWzaE) | | 5 | Chen | [Codepen](https://codepen.io/yingchangchen/pen/XWQweXy) | | 6 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/zYXQEZb) | | 7 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/GRLaMvr) | | 8 | macihuang | [Codepen](https://codepen.io/macy1215/pen/mdgYBBO) | | 9 | 柯基 | [Codepen](https://codepen.io/jimjimEAC/pen/JjVqrMj) | | 10 | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/abxrLJr) | | 11 | 阿若 | [Codepen](https://codepen.io/skar5268/pen/NWmVaMY) | | 12 | jamesct34 | [Codepen](https://codepen.io/JCT34/pen/OJGYxZx) | | 13 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/LYvozBp) | | 14 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/poBmWZx) | | 15 | 白白 | [Codepen](https://codepen.io/YuBai/pen/XWQweMO) | | 16 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/XWQweBL) | | 17 | LGJason | [Codepen](https://codepen.io/j811108/pen/RwOmLEV) | | 18 | Peggy | [Codepen](https://codepen.io/peggy0419/pen/KKYLXye) | | 19 | 閆安 | [Codepen](https://codepen.io/yanann7777/pen/xxeNXJx) | | 20 | MY | [Codepen](https://codepen.io/ahmomoz/pen/jORoaOX) | | 21 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/yLrWzmr) | | 22 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/jORoaWJ) | | 23 | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/oNORobZ) | | 24 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/dyLEzZa) | | 25 | zuien1120 | [Codepen](https://codepen.io/anki0072011/pen/gOyJXav) | | 26 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/KKYLyaL) | | 27 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/eYoaeRN) | | 28 | sunadme | [Codepen](https://codepen.io/su-su-the-sans/pen/abxrLVe) | | 29 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/dyLEZJZ?editors=1000) | | 30 | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/xxeNPqR) | | 31 | hsiehmo16 | [Codepen](https://codepen.io/mohsieh/pen/poBmdZv) | | 32 | ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/xxeNXow) | | 33 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/WNWBXJq?editors=1100) | | 34 | Chingya | [Codepen](https://codepen.io/chingya1214/pen/poBmdeM) | | 35 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/rNbgYKL) | | 36 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/yLrWPQY) | | 37 | boin | [Codepen](https://codepen.io/boinji/pen/vYMwWwz) | | 37 | 秀 | [Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/vYMwWba) | | 38 | Eden | [Codepen](https://codepen.io/iseden/pen/LYvoePd) | | 40 | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/qBwGpEo) | | 41 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/abxrEZE) | | 42 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/OJGYzbL) | | 43 | Ching | [CodePen](https://codepen.io/huangching/pen/qBwGpry) | | 44 | erichsu0406 | [CodePen](https://codepen.io/esxwvufg-the-flexboxer/pen/KKYLZvN) | | 45 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/VwNOrqx) | | 46 | damon0323 | [Codepen](https://codepen.io/swk9eny2/pen/vYMwpmP?editors=1010) | | 47 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/zYXQpKP) | | 48 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/GRLayQK) | | 49 | Emma | [Codepen](https://codepen.io/huang_L/pen/VwNOyBN) | | 50 | lele | [Codepen](https://codepen.io/Wpypy/pen/QWPRQwM?editors=1011) | | 51 | Camila | [Codepen](https://codepen.io/camilalo/pen/mdgYXVV) | | 52 | yuling | [Codepen](https://codepen.io/igzdflpu/pen/eYoaGWQ) | | 5３ | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/ExJzoRR#) | | 54 | Aust1n | [Codepen](https://codepen.io/AustinYEH/pen/KKYLQgQ?editors=1000) | | 55 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/yLrWvOj) | | 56 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/ZEZNrOj?editors=1100) | | 57 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/GRLaQvN) | | 58 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/qBwGxdG?editors=1100) | | 59 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/BaEeYJd) | | 60 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/BaEeYxw) | | 61 | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/jORoZrY?editors=1100) | | 62 | 宇 | [Codepen](https://codepen.io/jian-yu-chen/pen/WNWBdqj) | | 63 | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/xxeNYMG) | | 64 | arthurtu_01549 | [Codepen](https://codepen.io/vzqfnjnz-the-flexboxer/pen/XWQwZyL) | | 65 | KUN. | [Codepen](https://codepen.io/barry91205/pen/MWRdQLx) | | 66 | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/qBwGxzZ) | | 67 | Toung | [Codepen](https://codepen.io/Toung/pen/dyLEdxO) | | 68 | 禮央 (れお) | [CodePen](https://codepen.io/J-Y-P/pen/OJGYQEx) | | 69 | 小米 | [Codepen](https://codepen.io/hlgudwue-the-typescripter/pen/JjVqred) | | 70 | 邵 | [Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/xxeNWad) | | 71 | Frank Chiang | [Codepen](https://codepen.io/frankchiang/pen/ExJzEGW) | | 72 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/JjVqLwy) | | 73 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/gOyJeZQ) | | 74 | 紫珩 | [Codepen](https://codepen.io/tzhengliin/pen/GRLaxbP) | | 75 | Jenny L | [Codepen](https://codepen.io/lesley0029/pen/qBwGYEx) | | 76 | Six | [Codepen](https://codepen.io/Max-kuo/pen/NWmVMNP) | | 77 | 黛Dye | [Codepen](https://codepen.io/Dye_Note/pen/bGJyMeN) | | 78 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/XWQwqMe) | | 79 | sweewei | [Codepen](https://codepen.io/sweewei-Law/pen/wvZbjra) | | 80 | Ellie | [Codepen](https://codepen.io/Ellie-Chiang/pen/zYXQKWj) | | 81 | Elva Su | [Codepen](https://codepen.io/evensu_/pen/xxeNjYJ) | | 82 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/ExJzLeR?editors=1111) | | 83 | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/bGJyKaY?editors=1100) | | 84 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/ExJzoWQ) | | 85 | SYUAN | [Codepen]( https://codepen.io/syuan25/pen/oNORMJp) | | 86 | FURUTO | [Codepen]( https://codepen.io/oditudnw-the-flexboxer/pen/PogvdPv) | | 87 | JESS | [Codepen](https://codepen.io/-8412/pen/gOyJdOE) | | 88 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/ExJzegb) | | 89 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/poBmOKP) | | 90 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/vYMwzpM) | | 91 | MDFK | [Codepen](https://codepen.io/aqcrrhwb/pen/vYMwaep?editors=1100) | | 92 | Langyc | [Codepen](https://codepen.io/Hsiflow-Lang/pen/YzMbMpR) | | 93 | jerry | [Codepen](https://codepen.io/sony791210/pen/NWmVmER) | | 94 | liugod3824🔥 | [Codepen](https://codepen.io/kjssvtkr-the-animator/pen/abxrxgR)✔ | | 95 | LYC | [Codepen](https://codepen.io/LY-C/pen/abxrrKe) | | 96 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/LYvooXp) | | 97 | emmayo | [Codepen](https://codepen.io/emmayo/pen/GRLaboO) | | 98 | JY | [Codepen](https://codepen.io/jylee0805/pen/poBmMzj?editors=1100) | | 99 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/xxeNvOp?editors=1100) | | 100 | CCY | [Codepen](https://codepen.io/cyizumi/pen/xxeNvma) | | 101 | Kasie | [Codepen](https://codepen.io/KasieL/pen/mdgZbJJ) | | 102 | spadegun | [Codepen](https://codepen.io/spadegun/pen/eYowOvL) | | 103 | Mika | [Codepen](https://codepen.io/shumtzhz-the-encoder/pen/vYMqYWW) | | 104 | Chewsday | [Codepen](https://codepen.io/Chewsday/pen/MWRMwwQ?editors=1100) | | 105 | kevinwen2014 | [Codepen](https://codepen.io/wenwoo/pen/xxeoZOP) | | 106 | emmazhang. | [Codepen](https://codepen.io/zhangemma/pen/eYowJNB) | | 107 | yicheng | [Codepen](https://codepen.io/YiChengCHANG/pen/jORjWGq) | | 108 | 真真瑋瑋 | [Codepen](https://codepen.io/Yujhen-Li/pen/yLrdeqb) | | 109 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/PogrZEM) | | 110 | Linfe | [Codepen](https://codepen.io/Linfe/pen/bGJPEPw) | | 111 | aoya9155 | [Codepen](https://codepen.io/aoya2139/pen/MWRMygO) | | 112 | Schnauzer | [Codepen](https://codepen.io/Cocker-Spaniel/pen/ExJBNwr) | | 112 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/LYvKLpN) | | 113 | 婉玲Dacy | [Codepen](https://codepen.io/xxaynqoq-the-animator/pen/OJGeVyX) | | 114 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/ZEZdJBB) | | 115 | sylviabuy | [Codepen](https://codepen.io/sylviabela/pen/wvZLqNK) | | 116 | Ran | [Codepen](https://codepen.io/Ran-Ran-the-typescripter/pen/wvZLryd) | | 117 | JIAWUN | [Codepen](https://codepen.io/wkasixgv-the-sasster/pen/qBwzpbV) | | 118 | kawa | [Codepen](https://codepen.io/z83xji6/pen/poBXaKV) | | 119 | Rayne | [Codepen](https://codepen.io/Kelsier/pen/bGJPjBK) | | 120 | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/ExJBroG) | | 121 | Maca | [CodePen](https://codepen.io/uimaca/pen/vYMqPEy) | | 122 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/dyLBEGL) | | 123 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/eYoqOgM) | | 124 | kebukeyi | [Codepen](https://codepen.io/kebukeyi/pen/eYoqYLY) | | 125 | weeixunzht | [Codepen](https://codepen.io/CalebZhang/pen/ExJqaeb) | | 126 | asabulu_von_f | [Codepen](https://codepen.io/asabulu/pen/GRLVgNY) | | 127 | qet1717 | [Codepen](https://codepen.io/yizukwgs-the-flexboxer/pen/zYXgrJE) | | 128 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/KKYOzGQ) | | 129 | maru3096 | [Codepen](https://codepen.io/deamru/pen/KKYONmq) | | 130 | mike00712 | [Codepen](https://codepen.io/buliyuil-the-animator/pen/vYMoWex) | | 131 | arielyao | [Codepen](https://codepen.io/ArielYao822/pen/qBwepYp) | | 132 | 靜靜 | [Codepen](https://codepen.io/iclai/pen/vYModLM) | | 133 | Eileen | [Codepen](https://codepen.io/Eileen-io/pen/gOyVepg) | | 134 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/qBweojO) | | 135 | Stone | [Codepen](https://codepen.io/stonetein/pen/abxejvg) | | 136 | Aasta | [Codepen](https://codepen.io/Aasta-the-typescripter/pen/gOyVQQo) | | 137 | Mars | [Codepen](https://codepen.io/Mars-the-flexboxer/pen/gOJYOwg) | | 137 | 嵬 | [Codepen](https://codepen.io/Obivld/pen/gOJYYXb) | | 138 | jimmy.0706 | [Codepen](https://codepen.io/WeiJun-Mao/pen/bGJXeQm) | | 139 | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/KKLPaZB) | | 140 | Guan(yangguan.) | [Codepen](https://codepen.io/Yang-guan/pen/vYwBgqZ) | | 141 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/rNgBWjG?editors=1111) | | 142 | 達達 | [Codepen](https://codepen.io/Adam-Tsai/pen/bGybYGq) | | 143 | Areta | [Codepen](https://codepen.io/Areta-Gu/pen/rNgBvqM) | | 144 | chichi | [Codepen](https://codepen.io/chichihuang/pen/rNgBKqd) | | 145 | discat3119 | [Codepen](https://codepen.io/dizzysoup/pen/jOoNjbG) | | 146 | wan_ju | [Codepen](https://codepen.io/Laura21/pen/eYaYmZq) | | 147 | yo0x0oy | [Codepen](https://codepen.io/Dayton-Hsieh/pen/BaeayvM) | | 148 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/gOJOPoz) | | 149 | PoWei#8484 | [Codepen](https://codepen.io/Po-Wei-Lai/pen/BaeaMYX) | | 150 | Sana | [Codepen](https://codepen.io/-Chouno/pen/dyEPzOM) | | 151 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/MWdYEqj) | | 152 | 雪維 | [Codepen](https://codepen.io/Shawey/pen/oNRvJEe) | | 153 | Ed Huang | [Codepen](https://codepen.io/yide1986/pen/gOJbERb) | | 154 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/jOoPbJG) | | 155 | Chieh | [Codepen](https://codepen.io/Wei-Chieh-T/pen/abrvBmv?editors=1100) | | 156 | erwinchiang | [Codepen](https://codepen.io/vsujlkjy-the-scripter/pen/VwOvzbw) | | 157 | flyingcatman5487 | [Codepen](https://codepen.io/ysklpokt-the-looper/pen/MWdKeoy?editors=1100) | | 158 | xiang | [Codepen](https://codepen.io/Huchi-the-encoder/pen/ZENQyPK) | | 160 | 搗蛋鬼別搗蛋 | [Codepen](https://codepen.io/yaling0616/pen/wvbMyJp) | | 161 | sunknight_002 | [Codepen](https://codepen.io/aqortatm-the-solid/pen/ZENQZRx) | | 162 | jami_37521| [Codepen](https://codepen.io/jamiHexo/pen/BaeKNOY) | | 163 | ted| [Codepen](https://codepen.io/bomtovou-the-animator/pen/zYQqvZB) | | 164 | hsiu8767 | [Codpen](https://codepen.io/hsiu8767/pen/mdYPBdV) | | 165 | cindyLo | [Codpen](https://codepen.io/cindy820218/pen/OJYNvQa) | <!--【快速複製】 | num | user | [Codepen]() | -- >
Last changed by  
 
六角學院 - HexSchool
萬人學生好評推薦，由淺入深的實戰繁中程式設計教學，每週線上互動社群交流問答會！ 適合無經驗新手入門。帶您學會一技之長。線上帶你學會程式開發。
653

Read more

🏅 切版任務 Day4 - HTML、CSS 文字設定與 margin、padding 運用

根據下列同樣的 A、B 模式，以 HTML 與 CSS 觀念中， HTML 決定了網頁的『架構』、CSS 形成網頁『樣式』，請問 A、B 各自最接近 HTML、CSS 差異描述，各為哪個?

5/21/2024
🏅 切版任務 Day3 - box-sizing

此為 box-sizing 屬性的預設值，width(寬)、height(高) 只包括內容本身的寬高，不包括 border、padding。舉例：當有一個 box 設定 width: 30px; height: 20px; border: 10px solid black;，則此 box 總寬高：寬度: 50px, 高度: 40px

5/21/2024
🏅 切版任務 Day2 - 圖片處理技巧

圖片預設下方會有 2 ~ 3px 空隙，請同學參考此文章了解原理，並回答下方問題。

5/21/2024
🏅 切版任務 Day1 - HTML 標籤元素、CSS 判斷

依照下列 HTML 與 CSS 程式碼內容判斷，請分享以下 HTML 標籤a. p、span、div、a 各為什麼顏色b. p、span、div、a、img 是區塊元素（block）還是行內元素 （inline）？

5/21/2024
Read more from 六角學院 - HexSchool
Published on HackMD