鐵人檔案
會利用JS, CSS, HTML完成三十個前端小專案。每個專案都會紀錄：
需求、處理問題的邏輯（演算法）、處理中遇到的問題，最終效果，分享程式碼。
目的是讓自己可以靈活地運用前端三元素來處理問題。
前言 Hi!我是SingYo，謝謝你點進來看這個系列！這是我第一次參加鐵人賽。 其實說30個前端「任務」有點籠統，較精確的說法會像是UI元件（UI compon...
今天的任務： 部署至GitHub Page（後續部署在vercel） 搜尋框彈出效果 Demo Link｜Git Commit 以下說明執行任務經過 搜尋框彈...
將專案部署到Vercel 挑戰開跑這兩天，遇到最困擾的就是無法順利將專案部署到GitHub Pages。關於這個問題，也有其他網友遇到，為了不影響主題進度，決定...
今日專案進度 A. 用grid方式將專案重新排版（透過tailwind css） B. 使用vue-router建立新的分頁 C. 卡片擴展效果（codepen...
今天任務的實作內容，主要是參考這支影片影片中使用的程式碼風格是Vue的Option API，在我的專案中則是換成Composition API。Demo Lin...
今日任務 1. Q&A Section (原生JS寫法) Codepen Link: https://codepen.io/zyrxdkoz/pen/Z...
Scroll Animation 卡片滑動載入效果（原生JS版） CodePen: https://codepen.io/zyrxdkoz/pen/dyROrL...
Button Ripple Effect（原生JS版） CodePen Link: https://codepen.io/zyrxdkoz/pen/yLXgxO...
Netflix Sidebar（原生JS版） 效果說明 點擊左上方的menu按鈕（俗稱漢堡排），然後Sidebar從側邊滑出。滑出的特殊效果會有三層不同顏色的，...
第十天的心得 本來想要趁這幾天多做一些Vue的改寫，跟原生JS版同步，但時間上蠻趕的，又遇上一些難題。因此這幾天先以原生JS版為主。可以預期到了第三十天鐵人賽結...
