iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-IT 人自學之術

30天前端設計之旅 系列

在30天中,我會透過書籍和網絡資源提升了我的網頁實作能力。主要參考《HTML5、CSS3、Bootstrap5、JQuery 網頁前端學習手冊》和《超直覺HTML&C++CSS網頁設計:零基礎也能快速上手》這兩本書。
通過結合書本理論與實際的練習,以及利用網絡上的資源進一步學習,不僅提升了網頁設計能力,也加深了對前端開發流程的理解。

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 21

📅 第二十一天:綜合運用前十九天所學,解構網站設計的核心-2!

嗨嗨!今天是我們的DAY 21,今天會延續DAY 20的部分繼續下去! 第三部分:圖片展示與輪播 第七天和第八天我們討論了如何在網頁中嵌入圖像與多媒體。在這個...

2024-10-03 ‧ 由 mingt 分享
DAY 22

📅 第二十二天:讓照片更具創意——鋪設背景、改變形狀、創意裁切!

嗨嗨~歡迎來到「30天前端設計之旅」的DAY 22!今天將探討如何利用 CSS 和 HTML 來進行更具創意的圖片設計。透過為照片添加錯位的背景色、使用斜線背景...

2024-10-04 ‧ 由 mingt 分享
DAY 23

📅 第二十三天:讓照片與文字更具藝術感——濾鏡、偽元素與創意標題設計!

Hello~歡迎來到「30天前端設計之旅」的DAY 23!今天我們將學習如何運用照片濾鏡、偽元素、以及創意文字排版技巧,來提升網站的視覺效果。這些技巧將讓你能夠...

2024-10-05 ‧ 由 mingt 分享
DAY 24

📅 第二十四天:讓按鈕和文字更亮眼——螢光筆底線、波浪線與漸層按鈕設計!

嘻嘻~歡迎來到「30天前端設計之旅」的DAY 24!今天我們將探索更多有趣的文字與按鈕設計技巧,學習如何使用 CSS 實現螢光筆效果、波浪底線、錯位框線按鈕以及...

2024-10-06 ‧ 由 mingt 分享
DAY 25

📅 第二十五天:讓按鈕更有創意——背景色、箭頭與邊角設計!

Welcome~歡迎來到「30天前端設計之旅」的DAY 25!今天我們將繼續深入探索創意按鈕設計的領域,學習如何設計帶有背景色與箭頭、增加視窗效果的按鈕,以及如...

2024-10-07 ‧ 由 mingt 分享
DAY 26

📅 第二十六天:創意升級——扭曲圖形與箭頭按鈕、壓在圖形上方的文字按鈕設計!

hey~歡迎來到「30天前端設計之旅」的DAY 26!今天將進一步提升按鈕的創意設計,學習如何製作扭曲的圖形與簡易箭頭按鈕、壓在圖形上面的文字與箭頭按鈕,並探索...

2024-10-08 ‧ 由 mingt 分享
DAY 27

📅 第二十七天:掌握 Flexbox 布局技巧——靈活的版面編排與佈局設計

嗨嗨~歡迎來到「30天前端設計之旅」的DAY 27!今天我們將深入學習一個強大的布局系統——Flexbox,它能讓你靈活地編排不同尺寸、不同排列的版面,解決傳統...

2024-10-09 ‧ 由 mingt 分享
DAY 28

📅 第二十八天:優化導覽體驗——麵包屑列表、分頁導覽列與定義列表版面

安妞哈塞呦~歡迎來到「30天前端設計之旅」的DAY 28!今天,我們將聚焦於提升用戶體驗的導航設計,學習如何使用麵包屑列表、分頁導覽列以及定義列表版面來優化網站...

2024-10-10 ‧ 由 mingt 分享
DAY 29

📅 第二十九天:動感與視覺交融——Pinterest風格卡片版面、摺疊式選單、輪播版面

yo yo yo~歡迎來到「30天前端設計之旅」的DAY 29!今天我們將學習如何打造更具視覺衝擊力與互動性的網站佈局,包括Pinterest風格的卡片版面、摺...

2024-10-11 ‧ 由 mingt 分享
DAY 30

📅 第三十天:結束,亦是開始——總結我們的30天前端設計之旅

恭喜我們!在過去的30天裡,完成了這段充滿挑戰和創意的學習之旅。從最基礎的HTML語法開始,到結合CSS進行樣式設計,再到使用Bootstrap、JQuery這...

2024-10-12 ‧ 由 mingt 分享