iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30天30個前端任務 系列

會利用JS, CSS, HTML完成三十個前端小專案。每個專案都會紀錄:
需求、處理問題的邏輯(演算法)、處理中遇到的問題,最終效果,分享程式碼。
目的是讓自己可以靈活地運用前端三元素來處理問題。

參賽天數 15 天 | 共 19 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文
DAY 1

#0. 前言+環境配置

前言 Hi!我是SingYo,謝謝你點進來看這個系列! 這是我第一次參加鐵人賽。 其實說30個前端「任務」有點籠統,較精確的說法會像是UI元件(UI compo...

2021-09-01 ‧ 由 SingYo 分享
DAY 2

#1. Hidden Search Component搜尋框彈出效果(CSS)

今天的任務: 部署至GitHub Page(後續部署在vercel) 搜尋框彈出效果 Demo Link|Git Commit 以下說明執行任務經過 搜尋框彈...

2021-09-02 ‧ 由 SingYo 分享
DAY 3

#2. Blurring Loading Image(原生JS版), Vercel 出乎意料好用

將專案部署到Vercel 挑戰開跑這兩天,遇到最困擾的就是無法順利將專案部署到GitHub Pages。關於這個問題,也有其他網友遇到,為了不影響主題進度,決定...

2021-09-03 ‧ 由 SingYo 分享
DAY 4

#3. Expanding Cards(原生JS版)+ 用tailwindcss玩grid排版

今日專案進度 A. 用grid方式將專案重新排版(透過tailwind css) B. 使用vue-router建立新的分頁 C. 卡片擴展效果(codepen...

2021-09-04 ‧ 由 SingYo 分享
DAY 5

#4. Covid 19 Tracker(Vue版)

今天任務的實作內容,主要是參考這支影片 影片中使用的程式碼風格是Vue的Option API,在我的專案中則是換成Composition API。Demo Li...

2021-09-05 ‧ 由 SingYo 分享
DAY 6

#5. Q&A Section(原生JS版)、#2. Blurring Loading(Vue版)、#3. Expanding Cards(Vue版)

今日任務 1. Q&A Section (原生JS寫法) Codepen Link: https://codepen.io/zyrxdkoz/pen/Z...

2021-09-06 ‧ 由 SingYo 分享
DAY 7

#6. Scroll Animation(原生JS版), #7. Progress Steps(原生JS版)

Scroll Animation 卡片滑動載入效果(原生JS版) CodePen: https://codepen.io/zyrxdkoz/pen/dyROrL...

2021-09-07 ‧ 由 SingYo 分享
DAY 8

#8 Button Ripple Effect(原生JS版)、#5. Q&A Section(Vue版)

Button Ripple Effect(原生JS版) CodePen Link: https://codepen.io/zyrxdkoz/pen/yLXgxO...

2021-09-08 ‧ 由 SingYo 分享
DAY 9

#9. Netflix Sidebar(原生JS版)

Netflix Sidebar(原生JS版) 效果說明 點擊左上方的menu按鈕(俗稱漢堡排),然後Sidebar從側邊滑出。滑出的特殊效果會有三層不同顏色的,...

2021-09-09 ‧ 由 SingYo 分享
DAY 10

#10. Drag & Drop(原生JS版)

第十天的心得 本來想要趁這幾天多做一些Vue的改寫,跟原生JS版同步,但時間上蠻趕的,又遇上一些難題。因此這幾天先以原生JS版為主。可以預期到了第三十天鐵人賽結...

2021-09-10 ‧ 由 SingYo 分享