網路資源
Screenshot to Code：只要上傳截圖就能透過 AI 轉換成 HTML 與 CSS
Screenshot to Code 是一個簡單的應用程式，能夠將截圖轉換為程式碼（HTML/Tailwind CSS、React、Vue或Bootstrap）。它利用了GPT-4 Vision生成程式碼，以及DALL-E 3生成相似外觀的圖像。
網路資源
網路資源
Online Instant WYSIWYG Editor：一鍵清除 Word 轉 HTML 時產出的多餘空白及行內 style 樣式
遇到需要將 Word 轉成 html 並發布到網頁上時，往往會遇到 Word 直接轉的 HTML 會有許多不必要的空白以及行內 style 樣式，要一個一個手動拿掉或是自己寫程式過濾都有點麻煩，好在有像 Online Instant WYSIWYG Editor 這樣的工具，雖然看起來很老舊，但可以確實幫我們完成需求也是一個很好用的服務。
教學與資訊
[CSS] 使用 scroll-padding-top 達成免 javascript 也能夠在移動到錨點時設定離瀏覽器頂端有一定距離
先前我們提過可以透過 scroll-behavior: smoth; 達成免 javascript 就可以透過點擊超連結的錨點平滑移到對應的區塊，而如果有時候頁面上方被元素擋住，比如選單之類的，這樣滑過去時因為預設是貼到瀏覽器頂端，所以該區塊最上方就會被遮住，這個以往因為都是靠 javascript 處理所以加個參數就好，現在我們也都能夠完全用 CSS 解決了。
網路資源
Kombai 評析：專為前端設計打造的 AI Agent，從 Figma 一鍵生成高品質 React / HTML＋CSS 程式碼
Kombai 是 AI 前端工具，可將 Figma、截圖或文字提示轉為 React 元件或 HTML＋CSS，支援 email 模板開發，提升設計到程式碼效率。
網路資源
CSS Grid Generator：CSS Grid 樣式產生器
CSS Grid Generator 是一個你可以透過圖形化介面設定想要的區塊後，便能生成 CSS grid 樣式的工具，對於想了解 CSS Grid，或是想直接利用這個工具來產生代碼，都會有很好的幫助。
網路資源
PurgeCSS：刪除 CSS 檔中未使用的程式碼
PurgeCSS 是一個用於刪除未使用 CSS 的工具。它可以成為您的開發工作流程的一部分。 當您正在建立一個網站時，您可能會決定使用像 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等 CSS 框架... 但您只會使用框架的一小部分，並且會包含很多未使用的 CSS 樣式，都可以透過 PurgeCSS 來幫你移除，降低 CSS 檔案的大小。
網路資源
Fancy Border Radius Generator：好用的多變 CSS 圓角產生器
Fancy Border Radius Generator 是一個方便的 CSS 圓角產生器，你只要使用圖形化介面設定圓角的值，就能得到想要的形狀，之後再把 CSS 的樣式複製回去使用即可。
教學與資訊
[CSS] ::marker, ::spelling-error, ::grammar-error 的介紹與應用
介紹 CSS 中 ::marker, ::spelling-error, ::grammar-error 的應用。
網路資源
PXtoEM.com：線上 px 轉 em 的對照工具
PXtoEM.com 是一個可以把 px 轉換為 em 的線上對照表，也可以輸入 px 或 em 轉換為對應的值，網站的應該是有點歷史了，現在是建議大家把 em 改成 rem 會更好控制。
網路資源
Scroll-driven Animations：收錄許多網頁捲動時的特效實踐方法
滾動驅動的動畫在網頁上是一個常見的用戶體驗模式。這些動畫與滾動容器的滾動位置相關聯。這意味著當你向上或向下滾動時，相關聯的動畫會根據直接響應向前或向後滑動。想像一下有趣的效果，比如視差背景圖像或隨著滾動而移動的閱讀指示器。
教學與資訊
利用 javascript 在 css 設定 sticky 且區塊固定位置後也改變樣式
說明如何利用 javascript 在 css 設定 sticky 且區塊固定位置後也改變樣式的方法。
教學與資訊
解決 CSS 利用 :before, :after 設定 content 時，圖片(SVG)長寬為 0 的方法
當使用 CSS :before 和 content 屬性來插入 SVG 圖片時，可能會遇到長寬為 0 的情況。這通常是由於缺少必要的 CSS 屬性導致的。
教學與資訊
在 CSS 中設定字母的大小寫
在 CSS 中，可以使用 text-transform 屬性來設定字母的大小寫。
教學與資訊
[Vue.js] 讓換行符號(\n)可以在 HTML 顯示換行
說明在 Vue.js 讓換行符號(\n)可以在 HTML 顯示換行的方法。
網路資源
SVG Artista：好用的 SVG 動畫產生器，產生出來的動畫可以直接應用在網頁上
SVG Artista 是一個線上 SVG 動畫產生器，只要上傳檔案到網站上，然後透過介面調整參數，接著將 SVG 以及 CSS 的原始碼複製後，就可以在網站上使用了。
網路資源
UI Buttons- 收錄許多按鈕的互動效果，並提供 CSS 的寫法
UI Buttons 是個收錄許多按鈕的互動效果的網站，點擊喜歡的按鈕進入後，還有提供 CSS 的寫法，可以參考後搭配自己喜歡的樣式做修改。
網路資源
Blogger Templates- 收錄許多 Blogger 樣板的網站
Blogger Templates 是一個收錄許多 Blogger 樣板的網站。
網路資源
BTemplates- 收錄許多 Blogger 樣板的網站
BTemplates 是一個收錄許多 Blogger 樣板的網站，給有需要修改 Blogger 樣式的朋友參考。