{%hackmd 7G_OcahPRmKhfxvtzPAyYw %}

練功小黑屋
===

網頁設計挑戰
---
* [PS每日挑戰 《Daily Creative Challenge》](https://techshiba.com/daily-creative-ps-challenge/)
* [為什麼你不應該再繼續練習 Daily UI？](https://medium.com/as-a-product-designer/%E5%80%8B%E4%BA%BA%E8%A7%80%E9%BB%9E-daily-ui%E7%9A%84%E9%9A%B1%E8%97%8F%E7%8E%A9%E6%B3%95-%E5%A6%82%E4%BD%95%E5%88%A9%E7%94%A8daily-ui%E7%9C%9F%E6%AD%A3%E8%A8%93%E7%B7%B4%E5%88%B0ui-ux-skill-8befd4997756)

### 繪圖挑戰
* [Line of Action](https://line-of-action.com/zh)

<br>

邊學邊玩
---
- [CODE COMBAT](https://codecombat.com/home)

<br>

專題實戰
---
### 切版實戰篇
- [2023程式體驗營 - 每日切版任務挑戰列表](https://hackmd.io/R7Q2AZtAQ9igsCdWhVXeyw)
- 切版任務
- [x] [RWD 香水電商版型講解 ](https://www.youtube.com/watch?v=dUY8a28AhAw)
- [x] [Flexbox 切版任務](https://www.youtube.com/watch?v=UsiZy4f4y0I)
- [x] [SCSS 切版任務](https://youtube.com/watch?v=cVi3vlGB6Bg )
- [x] [網頁設計流程大揭密 - 網頁切版 PK 戰](https://www.youtube.com/watch?v=nXDLnOXvEM0&t=575s)
- [x] [Bootstrap 5 募資網站體驗營](/@chiaoshin369/Shinbook/%2F%40YmcMgo-NSKOqgTGAjl_5tg%2Fryar-vGOd%2F%252FNdGKchTeRBqbkTMiQ2HSmw)([設計稿](https://hexschool.github.io/boootstrap5WebLayout))
- 專題製作
- [ ] [極速切版 - 個人介紹網站](https://www.youtube.com/watch?v=yHLFbaUbyF4)
- [x] [別人的UIUX作品(別人家的孩子@@)](https://www.figma.com/file/BVsuXxbzLYqNnqJKKNsPoe/RWD-Design?node-id=6%3A73&t=jwm1F2YRl7jfPPsz-0)
- [該做什麼專案？](https://kaochenlong.com/2019/02/08/how-to-be-a-qualified-developer/?utm_source=facebook.com&utm_medium=social&utm_campaign=20210706_astrocamp_jobneed_con_purchase&utm_content=200529_article_kao)
1. 做你自己會用的專案→最近在學的筆記軟體以及《卡片盒筆記法》
2. 致敬你自己也喜歡的產品

### js 專題篇
- [ ] [六角前端學習題目](https://quip.com/iIfKAbN3TMyQ)
- [ ] [ jQuery 基礎實作（一）：網頁乙級相關範例](https://summer10920.github.io/2020/04-23/jq-sampleclass-1/)
- 動畫效果
- [ ] 左右滑動的幻燈片
- [ ] 表單驗證
- [ ] 倒計時效果
- [ ] 網頁讀取進度
- [x] [經典題目「todolist 待辦事項」](https://www.figma.com/file/pFivfS3rDX3N3u3dN9aIlx/TodoList?node-id=0%3A1)
- [x] 純手刻js版本([1](/N8J9t_mQQJqwTHk7-44riA)/[2](/sfd4V-I5QUusGKJSBCcHpg))
- [x] react版本
- 串接 API
- [ ] [jQuery 基礎實作（二）：OpenData API 串接](https://summer10920.github.io/2020/05-08/jq-opendata/#%E7%AF%84%E4%BE%8B%EF%BC%9A%E6%B0%A3%E8%B1%A1%E9%96%8B%E6%94%BE%E8%B3%87%E6%96%99%E5%B9%B3%E8%87%BA-Chart)
- [ ] [建立一個蔬菜網](/c5Ym8OdnSqm68A1bQqBjbQ)
- [ ] [公車時刻表查詢](https://www.youtube.com/watch?v=2F_xu21vUII)
- [ ] [地圖服務與自行車路線規劃](https://www.youtube.com/watch?v=0MbCa_qhmXI)
- [x] 口罩地圖

練習題庫 & 面試合集
---
> 學完程式碼後，如果沒有架網站，實際上學起來會有點空虛。
那接下來就可以練習刷題啦!!
刷題部分最有名的就是 LeetCode ，會包含許多不同的類型、語言，然後分成不同的難度。

* [Leetcode 是什麼？誰需要刷題？工程師面試要刷到什麼程度？](https://tw.alphacamp.co/blog/leetcode-introduction)
* [LeetCode 解題的思考策略，刷題的4個階段](https://tw.alphacamp.co/blog/how-to-solve-problems-on-leetcode)

### 知名挑戰網站
- [新手入門 freecodecamp](https://www.freecodecamp.org/)
- [TypeHero](https://typehero.dev/)：透過 TS 程式題目的，來提高技能
- [codecademy](https://www.codecademy.com/)
- [HTML & CSS](https://www.codecademy.com/learn/web)
- [jQuery](https://www.codecademy.com/learn/jquery)

### 系列整合
- [web前端面试 - 面试官系列](https://vue3js.cn/interview/) - CSS + Javascript + ES6 + 版本控制 + typescript + React + Vue + webpack + HTTP + NodeJS + 操作系統 + 演算法 + 小程序 + 設計模式
- 前端面試問題集系列-4
- [問題集-1](https://hedgehogkucc.github.io/2020-03-23-%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%A9%A6%E5%95%8F%E9%A1%8C%E9%9B%86-1/)
- [問題集-2](https://hedgehogkucc.github.io/2020-03-30-%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%A9%A6%E5%95%8F%E9%A1%8C%E9%9B%86-2/)
- [問題集-3](https://hedgehogkucc.github.io/2020-04-06-%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%A9%A6%E5%95%8F%E9%A1%8C%E9%9B%86-3/)
- [問題集-4](https://hedgehogkucc.github.io/2020-04-13-%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%A9%A6%E5%95%8F%E9%A1%8C%E9%9B%86-4/)

### JavaScript
#### 初級題目
- [x] [2023 程式體驗營 - JS 每日任務挑戰列表](https://hackmd.io/L_66e6FHQnKDhsrtLxrc6Q)
- [x] [JS Practice](https://yuhsien.notion.site/JS-Practice-a692c4dc450c476a8a7d9f8fe997deda)
- [x] [W3SCHOOL - JavaScript 測驗](https://www.w3school.com.cn/js/js_quiz.asp)
- [x] [W3SCHOOL - jQuery 測驗](https://www.w3school.com.cn/jquery/jquery_quiz.asp)
- [ ] [初級 JavaScript 題目練習](https://medium.com/@pvt5r486/%E5%88%9D%E7%B4%9A-javascript-%E9%A1%8C%E7%9B%AE%E7%B7%B4%E7%BF%92-1aa63509e63c)
- [ ] [JS ES6 58 題 - 表單答對40題及格](https://forms.gle/yG7N9QuaHx2DvRxv9)
- [ ] [每個 JavaScript 開發人員都應該知道的 10 個面試問題](https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95#.k5wxhl2s1)
- [ ] forEach 題型練習
- [ ] 如何整合 innerHTML 資料
- [ ] 搭配網頁初始化狀態
- [ ] 免費與投幣式事件監聽設計
- [ ] 事件監聽搭配 if 流程判斷
- [ ] DOM 拉出全域變數進行管理
- [ ] 篩選條件增加流程
+ [ ] JSON (物件表示法)：陣列與物件整合運用
+ [x] [JSON 格式介紹](https://youtu.be/3WHc-Ed5yfI?list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&t=979)
+ [x] 安裝 JSON 檢視 Chrome 套件
+ [x] 下載 JSON 格式資料
+ [x] 利用 JSON 資料
+ [x] JSON讀取教學
+ [ ] 如何篩選出自己想要的資料格式，並賦予到特定變數上
+ [ ] `JSON.stringify()`：將資料轉換成 JOSN 格式的字串
+ [ ] `JSON.parse() `：將資料轉換回原本的格式

#### 面試題目
> 作為面試JS題目所練習的，但聽說因為ChatGPT的原因，現在越來越少js面試刷題了。
- [ ] [面試考題](/@WangShuan/HJQgaUjhu?utm_source=preview-mode&utm_medium=rec#%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%9D%A2%E8%A9%A6%E8%80%83%E9%A1%8C)
- [ ] [最終試煉 - JS 百題斬](https://docs.google.com/forms/d/e/1FAIpQLSeBrQ9NspE3_6MCk2Fi0rMfu3baVcnNrPIEhvKz5ZsB3pwnNw/viewform?c=0&w=1)
- [ ] [feedly](https://feedly.com/)
- [ ] [新手 JS 地下城之歷史淵源](https://courses.hexschool.com/courses/javascript-js/lectures/12019537)
- [ ] [MOTC Transport API V2](https://ptx.transportdata.tw/MOTC/#/)
- [ ] [2023前端面試真題之JS篇](https://juejin.cn/post/7202904269535887418#heading-12)
- [ ] w3HexSchool JavaScript 考題
- [ ] [考題 1](https://hedgehogkucc.github.io/2020-02-03-JavaScript%E8%80%83%E9%A1%8C-1/)
- [ ] [考題 2](https://hedgehogkucc.github.io/2020-02-10-JavaScript%E8%80%83%E9%A1%8C-2/)
- [ ] [考題 3](https://hedgehogkucc.github.io/2020-02-17-JavaScript%E8%80%83%E9%A1%8C-3/)
- [ ] [考題 4](https://hedgehogkucc.github.io/2020-02-24-JavaScript%E8%80%83%E9%A1%8C-4/)
- [ ] [考題 5](https://hedgehogkucc.github.io/2020-03-02-JavaScript%E8%80%83%E9%A1%8C-5/)
- [ ] [考題 6](https://hedgehogkucc.github.io/2020-03-09-JavaScript%E8%80%83%E9%A1%8C-6/)

### JS 刷題直播
- [ ] [JS 刷題流程](https://www.youtube.com/watch?v=iomfbjdajX4)
- [ ] [LeetCode in JavaScript 刷題直播秀](https://www.youtube.com/playlist?list=PL-g0fdC5RMbpWW97Z_-lD-EWh6R3X2pHg)

### 框架
- [ ] [【前端面試題】—30 道常見 React 基礎面試題（附答案）](https://www.readfog.com/a/1631940095579885568)
- [ ] [React面試題](https://juejin.cn/post/7194760495956492344)

全端挑戰
---
* [自己做一個價值幾十萬的動態網站，學會Mern開發、前台UI設計各式觀念與各式Lib、typescript你該學會的前端技術](https://ithelp.ithome.com.tw/users/20150652/ironman/5050)
* [如何构建全栈 AI 应用](https://juejin.cn/post/7234795795216203837#heading-8)
* [OpenAI-API-中文版](https://juejin.cn/post/7225126264663605309)

###### tags: `前端筆記`