鐵人檔案
想記錄自己從平面設計開始踏入網頁設計的學習過程，並與他人分享一些知識點，也許是之前學習時不曾了解的抑或是時間久了而遺忘的，都能藉由複習這些文章來拾取記憶的破片。
大家好！歡迎來到我的30天鐵人賽系列文章。我是一名24歲的平面設計師，但比較喜歡網頁設計並之後打算投入相關產業，目前正在自主學習中，今年6月報名了六角學院202...
前情提要 昨天介紹這是切版實作與過程記錄，但在開始切板之前，會有一些前置作業，最重要的莫過於建立環境跟安裝套件，而這次主要會使用VScode進行開發、Vite為...
前情提要 昨天介紹了專案開發工具及簡單的建置環境，但我一開始並不理解為什麼Vite專案裡的SCSS要劃分那麼多種，他們對於pages資料夾裡的html又有甚麼影...
前情提要 昨天介紹也順便設定完我們的SCSS，今天會先切版導覽列的部分，在此之前可以先把設定好的專案上傳到你的github，關於git的教學部分先跳過，因為我不...
前情提要 昨天介紹了容器，並使用了bootstrap元件來客製化成設計稿的需求，如h1標籤之圖片代替文字、連結hover與偽元素，那麼今天要來進行下一個部分，主...
前情提要 在懂得善用斷點與格線系統後，對於開發響應式設計就會快上許多，因為可以藉由套用container、row、col等className來產生佈局變化，並且...
前情提要 昨天最主要是學習swiper，因為聽說swiper的實戰應用率蠻高的，他也比bootstrap的輪播還方便。今天要做的比較簡單，就是套用卡片來客製化板...
前情提要 昨天學了卡片之後，接下來許多東西都可以用類似的排版，包括今天的設計 觀察設計稿 這次要達成的實作效果為：1.四等分背景文案2.hover圖片亮起來 以...
前情提要 昨天學了卡片之後，接下來許多東西都可以用類似的排版，包括今天的設計 觀察設計稿 這次要達成的效果是三等份卡片+hover 開始製作 色即是色，空即是...
前情提要 hover與動畫效果一直都是學習門檻高低差很大的學問，不過最近的網頁設計有在鼓吹精簡化的設計，其中就包括不要使用太多動畫或太花俏的使用者提示效果，總之...
