鐵人檔案
前端領域十分廣闊，不僅需要學習程式邏輯，切版更是你/妳成為前端工程師必要的技能之一， 想學會跑，就必須先學會走；想做出一個厲害的動態網頁，就必須先掌握好靜態網頁， 藉由這次自我挑戰讓網頁設計師、前端工程師們更好上手 Tailwind CSS 框架，學習之旅即將啟航。
什麼是響應式設計？ 我們時常聽到的 RWD 全名為 Responsive Web Design，代表網頁根據不同裝置的寬度改變排版與顯示內容。 響應式設計 T...
元件化 什麼是元件化？簡單來說就是將重複的東西包成元件反覆使用，在 Day01 - 什麼是 Tailwind CSS？ 我們有提到 Tailwind CSS...
套件 先前我們都是透過 codepen 講解 Tailwind CSS，實際開發會使用編輯器。套件輔助不但開發更加便利，甚至提升開發效率。接著介紹搭配 Tai...
實戰演練 - Day1 首先恭喜各位看到這邊。（灑花相信各位對於 Tailwind CSS 也有一定的認識，接下來我們將進行實戰演練，每天練習一個區塊，為期6...
實戰演練 - Day2 我們昨天練習了 header 區塊，今天開始進入 main 的區塊，網頁大致分為 header、main、footer 三大區塊，而網...
實戰演練 - Day3 我們昨天練習了類別選單，學到 grid 改變選單按鈕的數量、grayscale 讓圖片以灰階呈現。今天練習區塊是搜尋功能，那麼開始今天...
實戰演練 - Day4 我們昨天練習了搜尋功能，學到如何使用漸變效果、將 select 預設箭頭移除改用圖片顯示並取消點擊事件。今天練習部分是卡片元件，那麼開...
實戰演練 - Day5 我們昨天練習了景點列表，學到圖片放大或圓角外層要加上 overflow-hidden，圖片固定高度加上 object-cover 避免...
實戰演練 - Day6 我們昨天練習了 footer 區塊，學到元素內部間距用 padding，元素外部間距用 margin。瞭解元素標籤不要只使用 div，...
心得感想 首先想跟自己說聲：辛苦了。這是我第一次參加鐵人賽，很高興自己堅持到最後。第一次參加有些東西可能詮釋沒有這麼到位，不過也算是訓練自己的表達與寫作能力。...
