鐵人檔案
前言 前端網頁開發至今發展 20 餘年，在 2023 年的今日如果還是想要從事網頁開發，到底該從何下手呢？還是一樣從 HTML 、CSS 與 JavaScrip...
上一個單元了解了為何要使用 tailwindcss 與其好處，接下來第一件事情一定是建立專案，要使用 tailwindcss 的方式有很多種，最快的方式就是直接...
上一個單元已經學會了如何安裝與設定一個新的專案，在進入真正的 UI 開發之前，如果只是想要單純測試某些 UI 樣板，而又不想使用上一個單元的方式建立專案，則可以...
在真正進入到網頁排版之前，還必須弄清楚一些事情，這個單元先從一個簡單的按鈕開始，透過製作一個按鈕，進而推展到製作各種組件，最後才是排版。 首先一開始，先寫一個按...
這個單元要來製作一個簡單的 header，使用上一個單元學習到的按鈕元件，這邊一口氣直接先放上三個按鈕： <div> <a class=&...
這個單元會延續上一個單元來繼續製作，在上一個單元完成了一個非常簡單的 header 呈現方式，但還少了非常重要的 RWD 排版： <header clas...
這個單元要來練習建立一個橫幅排版，最終希望的完成品會呈現如： 首先，一樣先建立基礎的排版： <section class="">...
接下來這個單元來製作一個簡單的卡片排版： 先宣告一些基本的排版： <a href="/"> <div class=...
這個單元將接續上一個單元製作的卡片排版來延伸。 一般來說使用卡片排版，會有好幾個卡片同時出現，接下來就繼續討論如何放入多個卡片排版。 一開始宣告最上層的 div...
這個單元繼續來介紹卡片排版的方式，前一個單元介紹了一種非常簡單的卡片排版，接下來要來介紹包含圖片的卡片排版方式。 一開始一樣宣告 div 標籤，與文字標籤： &...
