✏️前端基礎
為什麼你應該要經常設定 max-width？讓網站更好看的前端技巧
前端基礎-不知道你有沒有注意過這個問題，在你使用大螢幕看某些網站時，他的文字會被拉的很長？請參考我之前看到的超長 cookie banner 👇 這個時候就可以輕鬆用 max-width 解決問題，今天分享...
前往為什麼你應該要經常設定 max-width？讓網站更好看的前端技巧文章如何用 JS 將 1,2,3 數字格式化處理成 001,002,003 ? padStart 的實際應用
前端基礎-最近在公司遇到一個這樣的小問題，要將 index 的 1, 2, 3 在前端顯示變成 001, 002, 003，之前我看過有人這樣寫： 第一眼看到會有點不確定為什麼要這樣寫，而且未來改動也麻煩，例...
前往如何用 JS 將 1,2,3 數字格式化處理成 001,002,003 ? 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、冒泡、捕獲)文章JavaScript 的重要觀念 - Event loop 事件循環詳解
前端基礎-甚麼是 Event loop 當我們在瀏覽器中執行 JS 時，通常會遇到一些需要時間來完成的任務，例如向服務器請求數據。這些任務可能需要花費很長時間來完成，但是我們又不能讓 JS 的執行停頓下來，導...
前往JavaScript 的重要觀念 - Event loop 事件循環詳解文章