鐵人檔案
轉往前端的第一大關便是切版，這工藝主要由HTML5、CSS3作為底層技術，搭配切版心法，並在各家瀏覽器上呈現畫面，切版是種思維，面對更複雜的細節，要考量到變動彈性，合乎設計邏輯與使用者體驗，並且預防各種爆掉，跑版情況。本系列整理我在學習過程遇過困惑與體會，每個人或許遇到的痛點都不同，這裡就單純分享個人經驗，能提供些見解是我的榮幸，如果內容有技術上不完備之處，歡迎留言交流。
Responsive web design (RWD) 響應式網頁設計 是種解決『裝置範圍』和『裝置尺寸』的設計方法，無論內容是在平板電腦、手機、電視或手錶上查...
繼上篇介紹 RWD，這篇來看看媒體查詢Media Queries Level 4（2021/12）目前為 W3C Candidate Recommendatio...
UI Framework，(User Interface Framework)，是為開發者提供了預設的 HTML、CSS 和 JavaScript 元件，以快速...
初次接觸 SASS（Syntactically Awesome Style Sheets）時，可能只有一頁設計稿，並且沒有特別感受到它的威力。相反地，花了很多時...
身為前端就是跟『瀏覽器』有著萬縷千絲的關係，當然要跟『瀏覽器』大大好好相處，不同的瀏覽器，例如 Google Chrome、Mozilla Firefox、Mi...
雖然還沒碰過被要求效能 a 代誌，但在 Code-Review 中也會被問這有必要用嗎？例如：常用的無敵星星，在 reset 上很好用，以及謠傳權重不要選太層次...
在Day11 Visual Formatting Model 淺談視覺格式化模型探討到，Positioning scheme 中有 normal flow、fl...
基本概念 主軸和交叉軸 Flexbox 容器有兩個重要的軸，即主軸和交叉軸。主軸是 Flexbox 排列元素的主要方向，而交叉軸是與主軸垂直的方向。 主軸對齊...
隨著技術的不斷發展，能夠實現更複雜和美觀的設計，引領潮流的技術是網格佈局（Grid Layout）是種用於排列網頁內容的靈，更易於地實現多欄、多行的佈局。 基本...
當開始擬大綱，回顧決定轉跑道所做的努力和歷程，從打開技術書就像看天書，頭疼不已的狀態，到寫技術文分享，而這過程，除了技術，有太多收穫了，當回想如何學習的並持續深...
