iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30天30個前端任務 系列

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

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

#11. Color theme switcher + Clock(原生JS版)

#11. 白天/夜間模式切換+時鐘顯示 這次作品的靈感是來自這個dribbble CodePen: https://codepen.io/zyrxdkoz/pe...

2021-09-11 ‧ 由 SingYo 分享
DAY 12

#12. Drawing App(原生JS版)

#12. Drawing App 這次要挑戰的是比小畫家還陽春的繪圖app,會利用到canvas api,請看倌直接到CodePen裡試試看。 實作邏輯 先切...

2021-09-12 ‧ 由 SingYo 分享
DAY 13

#13. Split Landing Page(原生JS版), #14. RGB to Hex Converter(原生JS版)

#13. Split Landing Page 今日的挑戰比較偏向CSS,是做出一個有滑動效果的Landing Page。滑鼠Hover上去的時候就會改變wid...

2021-09-13 ‧ 由 SingYo 分享
DAY 14

#15. CSS Perspective Slider(Vue版)

#15. CSS Perspective Slider 今天挑戰的任務算是我蠻喜歡的一個小project,就是刻出四個slider來控制一個圖片的CSS屬性,包...

2021-09-14 ‧ 由 SingYo 分享
DAY 15

#16. Quiz App(原生JS版)

#16. Quiz App 所謂Quiz App就是提供給用戶答題的小應用,包含數個選擇題,選完一個選項後會自動跳到下一道題目,最後顯示出有哪幾題答對。大家同樣...

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

#16. Quiz App(Vue版)

本日任務說明 繼昨天完成的Quiz App(原生JS版)後,這次要來看的是Vue版:Demo Link | CodePen(原生JS版) Vue版和原生JS版本...

2021-09-17 ‧ 由 SingYo 分享
DAY 15

#17. Image Carousel(原生JS版)

今天要分享的專案是照片輪播UI,也就是俗稱的Carousel。 Carousel可以框架實現,像是Bootstraps和Swiper.js,但要怎麼自己手刻一個...

2021-09-18 ‧ 由 SingYo 分享
DAY 15

#18. Fixed Navbar(原生JS版)

Navbar是每個前端心手都會練習到的部分,本日任務另外添加一個小小的效果:下拉網頁時改變Navbar樣式。實作請參考CodePen 實作邏輯 & 程式...

2021-09-20 ‧ 由 SingYo 分享
DAY 15

#19. 3D Background Boxes

這次的任務是透過偽元素來打造立體盒子,同時利用background position屬性來做出方塊組成的效果。有點像幼兒會玩的立體方塊拼圖。 讓我們先看一下成...

2021-09-23 ‧ 由 SingYo 分享