✏️前端基礎
CSS 超好用的混色功能 color-mix()
前端基礎-你知道如何用 css 快速做出色輪嗎？或是你需要讓你的主色透明 10%？又或是你想要在黑暗模式時，將主色的混一點黑色降低飽和度？ 在以往，以上功能的要自己手動去定義顏色才能做到，對沒有學過設計的工程...
前往CSS 超好用的混色功能 color-mix()文章JS Object.groupBy 教學 - 再也不用手寫分組邏輯
前端基礎-groupBy 背景介紹 對資料進行分組是日常開發中常見的需求。就連 Leetcode 都專門出了一題演算法 Group By - LeetCode，就能知道其重要性。 然而，JS 過去並沒有內建...
前往JS Object.groupBy 教學 - 再也不用手寫分組邏輯文章為什麼要 max-width？讓網站更好看的前端技巧
前端基礎-不知道你有沒有注意過這個問題，在你使用大螢幕看某些網站時，他的文字會被拉的很長？請參考我之前看到的超長 cookie banner 👇 這個時候就可以輕鬆用 max-width 解決問題，今天分享...
前往為什麼要 max-width？讓網站更好看的前端技巧文章js padStart 的實際應用 - 將數字處理成你想要的格式
前端基礎-最近在公司遇到一個這樣的小問題，要將 index 的 1, 2, 3 在前端顯示變成 001, 002, 003，之前我看過有人這樣寫： 第一眼看到會有點不確定為什麼要這樣寫，而且未來改動也麻煩，例...
前往js padStart 的實際應用 - 將數字處理成你想要的格式文章10 個實用卻冷門的 HTML 技巧
前端基礎-雖然 HTML 學起來很簡單，但卻有很多實用的技巧被忽略，這些技巧可以讓你更輕鬆地實現特定的功能和效果。 今天介紹 10 個你可能不熟悉，但非常有用的 HTML 標籤及其應用示例，分別是： <de...
前往10 個實用卻冷門的 HTML 技巧文章深入解析 CSS z-index 和 stacking context 堆疊上下文
前端基礎-你有發生過設定 z-index: 999 的元素蓋不過 z-index: 0 的元素嗎，今天我通過這篇文，帶你清楚了解 z-index 以及瀏覽器的元素先後比較機制。 z-index 是什麼 z-...
前往深入解析 CSS z-index 和 stacking context 堆疊上下文文章HTML img 標籤的三個實用方法
前端基礎-限制圖片大小 如果我們用 width: 100%，圖片會跟著父元素的寬度，當父元素越大，圖片也會變大，如下👇 有時候我們希望圖片的大小不要超過原始尺寸，此時就可以用 max-width: 100...
前往HTML img 標籤的三個實用方法文章5 種你一定要會的 CSS 選擇器 - 大幅減少 JS 的使用，製作網頁更有效率
前端基礎-相信 CSS 選擇器對寫網頁的人都不陌生，除了常用的 :hover、:actived、::after 之外，還有其它超很好用的 CSS 選擇器，用的好的話甚至可以取代部份的 JS 程式碼，今天我就整理...
前往5 種你一定要會的 CSS 選擇器 - 大幅減少 JS 的使用，製作網頁更有效率文章為甚麼你寫的 CSS 沒有效果 - CSS 選擇器的優先級、權重
前端基礎-為甚麼你寫的 CSS 沒有效生效呢？ 在 CSS 中優先級可以分成 0 ~ 5 共 6 個等級，數字越大，優先級越大，比如說 !important 就是 5 級優先級，所以他可以覆蓋所有的選擇器。 ...
前往為甚麼你寫的 CSS 沒有效果 - CSS 選擇器的優先級、權重文章JS 事件 Event 詳解 - JS 和 HTML 之間的交互動作 (addEventListener、冒泡、捕獲)
前端基礎-JavaScript 和 HTML 之間的交互動作是靠事件 Event 實現的。當文檔或瀏覽器發生一些用戶行為的瞬間(例如點擊、滾動、縮小放大視窗…等等)，可以利用監聽器 Listener 來監聽並執...
前往JS 事件 Event 詳解 - JS 和 HTML 之間的交互動作 (addEventListener、冒泡、捕獲)文章