iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 703 瀏覽

鐵人賽自我挑戰組 DAY 27

從零開始的 Tailwind CSS 學習之旅系列第 27 篇

技術 Day27 -【實戰演練】Taiwan NO.1 Tour - 景點列表

實戰演練 - Day4 我們昨天練習了搜尋功能，學到如何使用漸變效果、將 select 預設箭頭移除改用圖片顯示並取消點擊事件。今天練習部分是卡片元件，那麼開...

肉鬆 ‧ 2022-10-10

0 Like 0 留言 534 瀏覽

鐵人賽自我挑戰組 DAY 26

從零開始的 Tailwind CSS 學習之旅系列第 26 篇

技術 Day26 -【實戰演練】Taiwan NO.1 Tour - 搜尋功能

實戰演練 - Day3 我們昨天練習了類別選單，學到 grid 改變選單按鈕的數量、grayscale 讓圖片以灰階呈現。今天練習區塊是搜尋功能，那麼開始今天...

肉鬆 ‧ 2022-10-09

0 Like 0 留言 354 瀏覽

鐵人賽自我挑戰組 DAY 25

從零開始的 Tailwind CSS 學習之旅系列第 25 篇

技術 Day25 -【實戰演練】Taiwan NO.1 Tour - 類別選單

實戰演練 - Day2 我們昨天練習了 header 區塊，今天開始進入 main 的區塊，網頁大致分為 header、main、footer 三大區塊，而網...

肉鬆 ‧ 2022-10-08

0 Like 0 留言 874 瀏覽

鐵人賽自我挑戰組 DAY 22

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 22 篇

技術 Day 22：客製我要的動畫【Tailwind – Animation 篇】

上一篇我們講到了 transition，但 transition 只是簡單的給予簡易的動畫，實際上能調整的只有整體動畫秒數，但如果我們想要將動畫切分成關鍵影格的...

linlaose ‧ 2022-10-07 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 573 瀏覽

鐵人賽自我挑戰組 DAY 24

從零開始的 Tailwind CSS 學習之旅系列第 24 篇

技術 Day24 -【實戰演練】Taiwan NO.1 Tour - header

實戰演練 - Day1 首先恭喜各位看到這邊。（灑花相信各位對於 Tailwind CSS 也有一定的認識，接下來我們將進行實戰演練，每天練習一個區塊，為期6...

肉鬆 ‧ 2022-10-07

0 Like 0 留言 881 瀏覽

鐵人賽自我挑戰組 DAY 23

從零開始的 Tailwind CSS 學習之旅系列第 23 篇

技術 Day23 - 套件利於開發

套件先前我們都是透過 codepen 講解 Tailwind CSS，實際開發會使用編輯器。套件輔助不但開發更加便利，甚至提升開發效率。接著介紹搭配 Tai...

肉鬆 ‧ 2022-10-06

0 Like 0 留言 720 瀏覽

鐵人賽自我挑戰組 DAY 22

從零開始的 Tailwind CSS 學習之旅系列第 22 篇

技術 Day22 - 元件化的重要性

元件化什麼是元件化？簡單來說就是將重複的東西包成元件反覆使用，在 Day01 - 什麼是 Tailwind CSS？我們有提到 Tailwind CSS...

肉鬆 ‧ 2022-10-05

0 Like 0 留言 854 瀏覽

鐵人賽 Modern Web DAY 19

Full Stack Web Development 網站實作系列第 19 篇

技術 Day 19 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (11) -- Deploy佈署到 Vercel

(1) push 程式碼到 gitHub(2) Import 華國美學畫廊(image gallery app) 到 Vercel(3) 3-1 環境變數(En...

tjabi ‧ 2022-10-04

0 Like 0 留言 694 瀏覽

鐵人賽自我挑戰組 DAY 21

從零開始的 Tailwind CSS 學習之旅系列第 21 篇

技術 Day21 - 說變就變 - 響應式設計

什麼是響應式設計？我們時常聽到的 RWD 全名為 Responsive Web Design，代表網頁根據不同裝置的寬度改變排版與顯示內容。響應式設計 T...

肉鬆 ‧ 2022-10-04

0 Like 0 留言 958 瀏覽

鐵人賽自我挑戰組 DAY 20

從零開始的 Tailwind CSS 學習之旅系列第 20 篇

技術 Day20 - 元素與效果轉換的重要橋梁 - transition

Transition 什麼是 Transition？顧名思義就是為了改變兩個外觀間轉換的屬性，加上 transition 可以補足兩個外觀間轉換的補間動畫，使...

肉鬆 ‧ 2022-10-03

0 Like 0 留言 533 瀏覽

鐵人賽 Modern Web DAY 17

Full Stack Web Development 網站實作系列第 17 篇

技術 Day 17 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (9) -- Head 元件

更改網頁的 title，建立 Meta 元件：(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...

tjabi ‧ 2022-10-02

0 Like 0 留言 395 瀏覽

鐵人賽自我挑戰組 DAY 19

從零開始的 Tailwind CSS 學習之旅系列第 19 篇

技術 Day19 - 全都是假的 - 偽元素

偽元素昨日我們介紹了偽類，與偽類不同的偽元素則是以兩個冒號 :: 作為前綴詞宣告使用，後面接偽元素名稱。 ::before 與 ::after 藉由 ::b...

肉鬆 ‧ 2022-10-02

0 Like 0 留言 335 瀏覽

鐵人賽 Modern Web DAY 16

Full Stack Web Development 網站實作系列第 16 篇

技術 Day 16 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (8) -- 顯示 Supabase 資料在螢幕上

繼續加其他文字資料到圖卡上，增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...

tjabi ‧ 2022-10-01

0 Like 0 留言 502 瀏覽

鐵人賽自我挑戰組 DAY 18

從零開始的 Tailwind CSS 學習之旅系列第 18 篇

技術 Day18 - 元素與偽類的化學反應

偽類以一個冒號：作為前綴詞宣告使用，後面接偽類名稱。 :hover 藉由 hover: 滑鼠停留在元素時變更樣式，舉個例子： <div class...

肉鬆 ‧ 2022-10-01

0 Like 0 留言 441 瀏覽

鐵人賽 Modern Web DAY 15

Full Stack Web Development 網站實作系列第 15 篇

技術 Day 15 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (6) -- 顯示 Supabase 資料在螢幕上

將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後，要秀出這些資料在螢幕上，需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...

tjabi ‧ 2022-09-30

0 Like 0 留言 661 瀏覽

鐵人賽自我挑戰組 DAY 17

從零開始的 Tailwind CSS 學習之旅系列第 17 篇

技術 Day17 - 變換吧！元素

變換（Transforms）透過 transform 屬性藉此變換元素。 Scale（縮放） scale-0 scale-50 scale-75 scal...

肉鬆 ‧ 2022-09-30

0 Like 0 留言 578 瀏覽

鐵人賽 Modern Web DAY 14

Full Stack Web Development 網站實作系列第 14 篇

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...

tjabi ‧ 2022-09-29

0 Like 0 留言 973 瀏覽

鐵人賽自我挑戰組 DAY 14

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 14 篇

技術 Day 14：背景圖片相關樣式【Tailwind – Background-image 應用】

今天來帶大家操作 background-image 以及 background-gradient～在使用 background-image 時，筆者常用以下...

linlaose ‧ 2022-09-29 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 670 瀏覽

鐵人賽自我挑戰組 DAY 16

從零開始的 Tailwind CSS 學習之旅系列第 16 篇

技術 Day16 - 探討網格系統

網格什麼是網格？網格的概念是，類似一套層級系統，同時給你豐富的多樣性，網格完全沒變，變得是網格裡面的東西，早期螢幕寬度約為1024，還需要扣除瀏覽器的 Sc...

肉鬆 ‧ 2022-09-29

0 Like 0 留言 895 瀏覽

鐵人賽自我挑戰組 DAY 13

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 13 篇

技術 Day 13：我要我的東西有邊框【Tailwind – Border 篇】

以邊界 borders 來說，常用的筆者在此分為三大類 border、outline、ring，讓我們開始吧！一、Border Border Widthb...

linlaose ‧ 2022-09-28 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 815 瀏覽

鐵人賽 Modern Web DAY 12

Full Stack Web Development 網站實作系列第 12 篇

技術 Day 12 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (3) -- Navbar

新增 Navbar 至每個網頁頂端：利用 Next 的 Layout 元件，來建立每個網頁都可以看到的 Navbar。新增 components/Layout....

tjabi ‧ 2022-09-27

0 Like 1 留言 569 瀏覽

鐵人賽自我挑戰組 DAY 14

從零開始的 Tailwind CSS 學習之旅系列第 14 篇

技術 Day14 - 效果輔助，讓元件更生動

效果網頁元素增添許多效果產生不同的視覺變化，效果的輔助讓元件更有多樣性。陰影（Box Shadow） shadow-sm shadow shadow-m...

肉鬆 ‧ 2022-09-27

0 Like 0 留言 1677 瀏覽

鐵人賽自我挑戰組 DAY 11

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 11 篇

技術 Day 11：Flexbox 與 Grid 的運用，實現瀑布流排版【Tailwind – 格線系統與 Flexbox 混用篇】

在介紹 flex box 與 grid 之後，今天要來帶大家將兩者合用並實作瀑布流排版囉！一、觀念講解在將 flexbox 與 grid 混用之前，筆者先...

linlaose ‧ 2022-09-26 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 672 瀏覽

鐵人賽 Modern Web DAY 10

Full Stack Web Development 網站實作系列第 10 篇

技術 Day 10 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (1)

這個 app 將從 supabase 讀取資料，在透過自製 Tailwind CSS 元件，呈現類似 netflix，hulu 的影像畫廊(image gall...

tjabi ‧ 2022-09-25

0 Like 0 留言 1042 瀏覽

鐵人賽自我挑戰組 DAY 10

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 10 篇

技術 Day 10：Flex Box 我看到了，但你有格線嗎？【Tailwind – 格線系統篇】

格線系統終於來了，起初在學習 tailwind 的時候還不曉得有格線系統，在 bootstrap 5(bs5) 用過格線系統後就來找找 tailwind 的格線...

linlaose ‧ 2022-09-25 ‧團隊死線衝鋒 Deadline Squad

0 Like 1 留言 575 瀏覽

鐵人賽自我挑戰組 DAY 12

從零開始的 Tailwind CSS 學習之旅系列第 12 篇

技術 Day12 - 掌握空間與距離，版面不再跑版

間距間距在網頁中是不可或缺的，間距不僅能使版面看起來更舒服，也豐富了網頁版面的多樣性。間距單位 p/m-0 ⇒ 0px p/m-1 ⇒ 0.25rem...

肉鬆 ‧ 2022-09-25

0 Like 0 留言 1227 瀏覽

鐵人賽自我挑戰組 DAY 9

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 9 篇

技術 Day 9：我的 Flex Box呢？【Tailwind – Flex Box篇】

前一天講完了 container 容器，必不可少要來我們的排版神器，flex box！本篇對於 flex box 的描述僅針對筆者使用過的功能進行實作哦，讓我...

linlaose ‧ 2022-09-24 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 2049 瀏覽

鐵人賽自我挑戰組 DAY 8

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 8 篇

技術 Day 8：一切準備就緒，Tailwind我來了！【Tailwind – 容器與RWD篇】

在開發時，"容器"不可或缺且面對響應式設計 (RWD) 更需要有容器的概念才適合做出自適應的網頁，現在就讓我們來看看容器與 RWD 是如何在...

linlaose ‧ 2022-09-23 ‧團隊死線衝鋒 Deadline Squad

0 Like 1 留言 482 瀏覽