一些小白參加工程師體驗營的小小紀錄
5/17補充：[第三週小組任務](https://codepen.io/xjbowjbr-the-builder/pen/wvbKYLN)

# 課程小節練習

### HTML & CSS
- [x] 完成進度：需批改共5題（已完成）

| 目次 | 作業練習 | 助教批改 |
| -------- | -------- | -------- |
| 1 | [CodePen 教學 - 將你的程式碼分享給別人](https://codepen.io/xjbowjbr-the-builder/pen/GRLaype) | :heavy_check_mark: |
| 2 | [HTML 標籤教學 - 小節作業](https://codepen.io/xjbowjbr-the-builder/pen/wvZbObb) | :heavy_check_mark: |
| 3 | [CSS - 使用 CSS 變更 HTML 標籤特性 - 小節練習](https://codepen.io/xjbowjbr-the-builder/pen/MWRMLBB) | :heavy_check_mark: |
| 4 | [flex-direction - 決定 flex 軸線](https://codepen.io/xjbowjbr-the-builder/pen/mdgZoyW) | :heavy_check_mark: |
| 5 | [Flex 表頭選單練習](https://codepen.io/xjbowjbr-the-builder/pen/OJGeqGB) | 無提交批改 |
| 6 | [Flex 小節作業](https://codepen.io/xjbowjbr-the-builder/pen/rNbEgrq) | :heavy_check_mark: |

### SCSS
- [x] [Sass、SCSS 小試身手](https://codepen.io/xjbowjbr-the-builder/pen/qBGRwbO) 助教批改中

# Flex 修煉時光屋練習
- [x] 完成進度：共10題（已完成）

| 關卡 | 作業練習 | 課程素材來源 |
| -------- | -------- | -------- |
| 關卡一 | [並排卡片](https://codepen.io/xjbowjbr-the-builder/pen/KKYOZmK) | 無 |
| 關卡二 | [雙欄排版](https://codepen.io/xjbowjbr-the-builder/pen/poBMpBE) | logo：https://hexschool.github.io/flexImgUrl/2/logo.png |
| 關卡三 | [雙欄選單設計](https://codepen.io/xjbowjbr-the-builder/pen/MWRNQEr) | logo：https://hexschool.github.io/flexImgUrl/3/logo.png
| | | pic：https://hexschool.github.io/flexImgUrl/3/pic.png |
| 關卡四 | [表頭表尾設計](https://codepen.io/xjbowjbr-the-builder/pen/wvZVmMr) | logo：https://hexschool.github.io/flexImgUrl/4/logo.png |
| | | pic：https://hexschool.github.io/flexImgUrl/4/pic.png |
| 關卡五 | [常見三種排版](https://codepen.io/xjbowjbr-the-builder/pen/vYMojpa) | logo-big：https://hexschool.github.io/flexImgUrl/5/logo-big.png |
| | | logo-medium：https://hexschool.github.io/flexImgUrl/5/logo-medium.png |
| | | logo-small：https://hexschool.github.io/flexImgUrl/5/logo-small.png |
| 關卡六 | [圖文並排](https://codepen.io/xjbowjbr-the-builder/pen/QWRLLBv) | logo：https://hexschool.github.io/flexImgUrl/6/logo.png |
| | | pic：https://hexschool.github.io/flexImgUrl/6/pic.png |
| 關卡七 | [首頁橫幅排版](https://codepen.io/xjbowjbr-the-builder/pen/NWVKKVg) | headerLogo：https://hexschool.github.io/flexImgUrl/7/headerLogo.png |
| | | footerLogo：https://hexschool.github.io/flexImgUrl/7/footerLogo.png |
| 關卡八 | [圖文並排設計](https://codepen.io/xjbowjbr-the-builder/pen/oNRvEBP) | pic：https://hexschool.github.io/flexImgUrl/8/pic.png |
| 關卡九 | [訂單設計](https://codepen.io/xjbowjbr-the-builder/pen/dyEbdNg) | pic：https://hexschool.github.io/flexImgUrl/9/pic.png |
| 關卡十 | [產品列表](https://codepen.io/xjbowjbr-the-builder/pen/VwOwaGg) | pic1：https://hexschool.github.io/flexImgUrl/10/pic1.png |
| | | pic2：https://hexschool.github.io/flexImgUrl/10/pic2.png |
| | | pic3：https://hexschool.github.io/flexImgUrl/10/pic3.png |

# 每日任務
## 切版每日
- [ ] 完成進度：慢慢一天天追進度（[任務列表](https://hackmd.io/sXIOv_1PTvWP4t3Aq3c8eQ?view)）

| 題目連結 | 作業練習 | 備註 | 解答 |
| - | - | - | - |
| [Day1](https://hackmd.io/rIz2aFALQr6Wl-li-GHPOA?view) | [切版任務 Day1 - HTML 標籤元素、CSS 判斷](https://codepen.io/xjbowjbr-the-builder/pen/yLWLjGB) | | |
| [Day2](https://hackmd.io/l_dLOkHtQ6-gbpI1EiOdOg) | [切版任務 Day2 - 圖片處理技巧](https://codepen.io/xjbowjbr-the-builder/pen/qBGBKRp) | ||
| [Day3](https://hackmd.io/bAAtJftmToWI4q1I0venVA) | [切版任務 Day3 - box-sizing](https://codepen.io/xjbowjbr-the-builder/pen/abrbaWv) | ||
| [Day4](https://hackmd.io/te9J_VM2Si2ZSZJbtn4qlA?view) | [切版任務 Day4 - HTML、CSS 文字設定與 margin、padding 運用](https://codepen.io/xjbowjbr-the-builder/pen/abrzKVw) | [題目圖檔連結](https://i.imgur.com/tAJAG6m.png)、[參考解答](https://codepen.io/hexschool/pen/jOvJvWW) ||
| [Day5](https://hackmd.io/idtd1qALSKSKtusuZuz_dQ?view) | [切版任務 Day5 - Material Icons + Figma Icon 名稱觀看教學](https://codepen.io/xjbowjbr-the-builder/pen/jOoPbJG) | [Material Icon 官網](https://fonts.google.com/icons) ||
| [Day6](https://hackmd.io/yf7D3mbLSLG072pYTeEIOw?view) | [切版任務 Day6 - Google Fonts 線上外部字型載入](https://codepen.io/xjbowjbr-the-builder/pen/bGydEpr) | [Google Fonts](https://fonts.google.com/) ||
| [Day7](https://hackmd.io/CQJTeiDXRPigcFQd-mAsnA) | [切版任務 Day7 - jQuery 基礎教學＋點選按鈕動態切換 active 效果](https://codepen.io/xjbowjbr-the-builder/pen/yLWNORe) | [模板](https://codepen.io/jmimiding4104/pen/gOyqoJX) ||
| [Day8](https://hackmd.io/lz1IGFo0RY2toqIipRVEmA) | [切版任務 Day8 - flex 練習 I](https://codepen.io/xjbowjbr-the-builder/pen/ExzjKdm) | ||
| [Day9](https://hackmd.io/kvQUCl6qS4W7iP3DhNEcuQ?view) | [切版任務 Day9 - flex 練習 II](https://codepen.io/xjbowjbr-the-builder/pen/eYaNzpR) | align-self: flex-end ||
| [Day10](https://hackmd.io/_mCayFjdRnGqgqTvTpmLEA) | [切版任務 Day10 - flex 運用](https://codepen.io/xjbowjbr-the-builder/pen/RwmPRpm) | ||
| [Day11](https://hackmd.io/fuQeA9yITDWjmJvt_xx1cA) | [切版任務 Day11 - position 練習 I](https://codepen.io/xjbowjbr-the-builder/pen/pomJEvL) | ||
| [Day12](https://hackmd.io/8Z_LG18pRy69miRyWX6ymQ) | [切版任務 Day12 - 運用 jQuery 呈現手機版漢堡選單效果](https://codepen.io/xjbowjbr-the-builder/pen/mdYJrYB) | [模板](https://codepen.io/jmimiding4104/pen/mdgvXWX) ||
| [Day13](https://hackmd.io/IT9EBbnzR_ai4rjxfCOn4g) | [切版任務 Day13 - HTML、CSS 觀念補給](https://codepen.io/xjbowjbr-the-builder/pen/ZENGBOE) | ||
| [Day14](https://hackmd.io/3YgdxHXQTB24CkzGaPWU9w) | [切版任務 Day14 - RWD 觀念補給](https://codepen.io/xjbowjbr-the-builder/pen/QWRbGGP) | ||
| [Day15](https://hackmd.io/ByRQjGfJRVa6q-H62WZKmw) | [切版任務 Day15 - RWD 練習 I](https://codepen.io/xjbowjbr-the-builder/pen/MWdwBdQ) | ||
| [Day16](https://hackmd.io/AH1hzQUEQ8m4bjiNRU_CpQ) | [切版任務 Day16 - RWD 運用](https://codepen.io/xjbowjbr-the-builder/pen/MWdaewy) | ||
| [Day17](https://hackmd.io/AcEp56sxTQ2vVbT4hI41EQ) | [切版任務 Day17 - Flex 與 RWD 練習](https://codepen.io/xjbowjbr-the-builder/pen/pomjqJw) | [模板](https://codepen.io/hexschool/pen/ZEqeVza) ||
| [Day18](https://hackmd.io/wj_Q0WDvTfiInn3C4ihGyQ) | [切版任務 Day18 - Navbar 隨著斷點變換樣式、排版](https://codepen.io/xjbowjbr-the-builder/pen/KKLzqGw) | [模板](https://codepen.io/jmimiding4104/pen/oNRjaBz) ||
| [Day19](https://hackmd.io/2U3xMNKcT7KvM6Z_UgMwIQ) | [切版任務 Day19 - 偽元素](https://codepen.io/xjbowjbr-the-builder/pen/pomydgm) | [模板](https://codepen.io/jmimiding4104/pen/BaEepoP) ||
| [Day20](https://hackmd.io/9P8Zhl22TmW_k9G2aox1RQ) | [切版任務 Day20 - 標題偽元素裝飾](https://codepen.io/xjbowjbr-the-builder/pen/eYazYpq) | [模板](https://codepen.io/jmimiding4104/pen/pomypOr) | [解答](https://codepen.io/jmimiding4104/pen/RwOmpvw) |
| [Day21](https://hackmd.io/EkgKxVkIR3yJQHuICjjWUQ?view) | [切版任務 Day21 - background 練習](https://codepen.io/xjbowjbr-the-builder/pen/qBGawbr) | [模板](https://codepen.io/hexschool/pen/jOerWwg) [圖檔](https://i.ibb.co/3yhw5PR/string-of-beads.png) | [解答](https://codepen.io/hexschool/pen/oNaLbwG?editors=1100) |
| [Day22](https://hackmd.io/UuTe1k1MQM6diu4ykljVpw) | [切版任務 Day22 - 運用背景創造下底線](https://codepen.io/xjbowjbr-the-builder/pen/yLWarOB) | [模板](https://codepen.io/jmimiding4104/pen/NWVqRpX) | [解答](https://codepen.io/jmimiding4104/pen/YzbwJKy) |
| [Day23](https://hackmd.io/A7o1JZmKR86sQbwVz_iENg) | [切版任務 Day23 - overflow 選單製作](https://codepen.io/xjbowjbr-the-builder/pen/abrBBoV) | [模板](https://codepen.io/jmimiding4104/pen/BaezeLz) | [解答](https://codepen.io/jmimiding4104/pen/QWRERLG) |
| [Day24](https://hackmd.io/GlYzU1d4R7SvDPz2O-Qh6Q) | [切版任務 Day24 - 選單四角 hover 效果製作](https://codepen.io/xjbowjbr-the-builder/pen/dyEOObj) | [模板](https://codepen.io/jmimiding4104/pen/vYwXBNq) | [解答](https://codepen.io/jmimiding4104/pen/abrZrJQ) |
| [Day25]() | []() | | |
| [Day26]() | []() | | |
| [Day27]() | []() | | |
| [Day28]() | []() | | |
| [Day29]() | []() | | |

## JS每日
- [ ] 完成進度：還沒接觸到JS（[任務列表](https://hackmd.io/RfLmCYymQVql-fLQD1ksPA?view)）

| 題目連結 | 作業練習 | 備註 | 解答 |
| - | - | - | - |
| [Day1](#) | [破關中](#) | |
| [Day2]() | []() | | |
| [Day3]() | []() | | |
| [Day4]() | []() | | |
| [Day5]() | []() | | |
| [Day6]() | []() | | |
| [Day7]() | []() | | |
| [Day8]() | []() | | |
| [Day9]() | []() | | |
| [Day10]() | []() | | |
| [Day11]() | []() | | |
| [Day12]() | []() | | |
| [Day13]() | []() | | |
| [Day14]() | []() | | |
| [Day15]() | []() | | |
| [Day16]() | []() | | |
| [Day17]() | []() | | |
| [Day18]() | []() | | |
| [Day19]() | []() | | |
| [Day20]() | []() | | |
| [Day21]() | []() | | |
| [Day22]() | []() | | |
| [Day23]() | []() | | |
| [Day24](https://hackmd.io/ogS1gxpTTT6BXecJxKb4Iw?view) | [JS 任務 Day24 - Hexo 環境建立](https://codepen.io/xjbowjbr-the-builder/pen/abrwMNw) | | |
| [Day25](https://hackmd.io/byOjn3r8RgubK2VA9eBa7A?view) | [JS 任務 Day25 - Hexo 新增一篇文章、選單](https://codepen.io/xjbowjbr-the-builder/pen/NWVgJBG) | | |
| [Day26](https://hackmd.io/VpMD_QEFRHeVawBrNobk4g) | [JS 任務 Day26 - Hexo 調整樣式](https://codepen.io/xjbowjbr-the-builder/pen/JjqJVwg) | | |
| [Day27](https://hackmd.io/M-ydOCGESMis39QhP-Zp2g?view) | [JS 任務 Day27 - Hexo 部署至 Github Pages](https://github.com/Shiro-li/studynote) | | |
| [Day28]() | []() | | |
| [Day29]() | []() | | |

# 主線證書任務破關中

* [程式勇者村連結](https://rpg.hexschool.com/#/training/12062289980032551059/board)
* [六角學院課程平台](https://courses.hexschool.com/courses/enrolled/2484395)
* [2024體驗營設計稿連結](https://www.figma.com/file/rX9YdVutqj9jF0kw72SAKi/2024ver.-%E9%AB%94%E9%A9%97%E7%87%9F%E8%A8%AD%E8%A8%88%E7%A8%BF?type=design&node-id=202-2&mode=design&t=x11sOKD6o08oGfuS-0)
* [設計稿圖片空間](https://github.com/hexschool/2022-web-layout-training/tree/main/2024%20web-camp)

## 報到任務

- [x] 完成進度：已完成！助教已審核

## 切版任務（一）

- [x] 完成進度：已完成！助教已審核
- [x] [切版任務（一）作業連結](https://codepen.io/xjbowjbr-the-builder/pen/GRaRxvZ)

## 切版任務（二）

- [x] 完成進度：已上傳（助教審核中）
- [ ] 完成進度：已完成！助教已審核
- [x] [GitHub Pages](https://shiro-li.github.io/hex.mission2/)

## 感謝牆任務

- [x] 完成進度：已上傳（助教審核中）
- [ ] 完成進度：已完成！助教已審核
- [x] [體驗營心得](https://hackmd.io/@Shiro-Li/SJ1XSlMHR)

## HEXO架站任務

- [x] 完成進度：已上傳（助教審核中）
- [ ] 完成進度：已完成！助教已審核
- [x] [Hexo架站任務](https://shiro-li.github.io/studynote/index.html)

# 學習資源
| 分類 | 名稱 | 描述 |
| -------- | -------- | -------- |
| 工具 | [六角線上模擬器](https://codepen.io/peiqun/pen/WYzzYX) | Flex模擬器 |
| 工具 | [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/) | Emmet的作弊小抄 |
| 工具 | [jq速查表](https://oscarotero.com/jquery) | jq速查表 |
| 工具 | [Wappalyzer](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg?hl=zh-TW) | 擴充-套件檢視 |
| 素材 | [unsplash](https://unsplash.com/) | 免費素材圖庫 |
| 雲端 | [firebase](https://console.firebase.google.com/) | Storage可以放圖 |
| 版控 | [Git](https://git-scm.com/) | [下載安裝git](https://w3c.hexschool.com/git/3f9497cd) |
| 版控 | [GitHub](https://github.com/Shiro-li) | 我的GitHub |
| 教材 | [六角Git教學](https://w3c.hexschool.com/git/cfdbd310) | [助教](https://kaychen1994.github.io/2021/03/28/git-learning/)提供 |
| 教材 | [Bootstrap 5](https://hackmd.io/@YIHQx96xTI-K9vDjhzEfDA/BJNuQONoO/%2F%40YmcMgo-NSKOqgTGAjl_5tg%2Fryar-vGOd) | 新手 |