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

0 Like 0 留言 2587 瀏覽

鐵人賽 Modern Web DAY 22

從零開始手刻網站，30 天打造我的前端武器庫系列第 22 篇

技術 Day 22：鍵盤輸入事件實作

組件實作：Demo 一、前言鍵盤輸入監聽事件是一個很有用的功能，或許在瀏覽一般的網頁時，比較不常使用鍵盤控制。但如果是遊玩網頁遊戲，取得鍵盤的監聽就會變...

東尼先生 ‧ 2022-10-06

0 Like 0 留言 1977 瀏覽

鐵人賽自我挑戰組 DAY 22

手刻武器庫，30 天前端學習心得系列第 22 篇

技術 Day 22：SVG Path 急速入門

組件實作：Demo 一、前言今天要來介紹的東西是「與繪畫相關的東西 - CSS 和 SVG」，CSS 來製作圖形是一件很常見的事情，至於為什麼會特別的提...

東尼先生 ‧ 2022-10-06

0 Like 0 留言 1046 瀏覽

鐵人賽 Modern Web DAY 21

30天讓你爺爺取得 FreeCodeCamp 響應式網頁設計證書系列第 21 篇

技術 Day21 - 雜誌(下) (隱式格線屬性)

格線雜誌隱式格線屬性 (implicit grid properties) 前一篇講到了grid-template-columns grid-templat...

前端小小咖 ‧ 2022-10-06 ‧團隊週六 Podcast 團

0 Like 0 留言 1129 瀏覽

鐵人賽 Modern Web DAY 25

UX 這條路，跪著也...走不完啊啊啊～系列第 25 篇

技術 Day 25 【職涯之路】我應該要學HTML/CSS嗎？

這個問題大概是目前最多人問的問題了！由於我自己的背景是網頁設計轉過來UI/UX相關職類，所以依照我的觀點來看，我會建議：不用到專精或真的會切版，但至少要能夠理...

Wen Chien ‧ 2022-10-10 ‧團隊蝦兵蟹將

0 Like 0 留言 843 瀏覽

鐵人賽自我挑戰組 DAY 21

CSS甜點烘焙店系列第 21 篇

技術是時候該擺一攤珍珠奶茶了，box-shadow用好用滿、簡單複製物件

您好，歡迎光臨CSS甜點烘焙店店面在昨天已經大致完成，旁邊不如再來一個飲料攤位吧~ Html如下 .beverageStore .mid Bubble Te...

Isha Wang ‧ 2022-10-06

0 Like 1 留言 2675 瀏覽

鐵人賽自我挑戰組 DAY 30

在30天利用HTML & CSS & JavaScript完成Side Project實作系列第 30 篇

技術 Day 30 Side Project : pokedex 精靈寶可夢圖鑑

超白話畫面和功能拆解背景顏色取決於寶可夢的類型 CSS手刻卡片排版每個卡片內包含寶可夢圖片、名稱、編號、背景顏色、類型，以上這些都要動態呈現運...

hannnahTW ‧ 2022-10-06

1 Like 0 留言 5874 瀏覽

鐵人賽 Modern Web DAY 22

防禦性 CSS - 建立「防患未然」的匠人心態系列第 22 篇

技術【Day22】Grid - 自動填滿效果

情境 CSS Grid 是一個格線佈局屬性，跟 Flexbox 的使用非常相似，是由外容器和內元件來組成整個結構。以下面結構為例： <div class...

Taiming ‧ 2022-10-06 ‧團隊光明頂

0 Like 0 留言 667 瀏覽

鐵人賽 Modern Web DAY 20

30天讓你爺爺取得 FreeCodeCamp 響應式網頁設計證書系列第 20 篇

技術 Day20 - 雜誌(上) (grid)

格線雜誌保持彈性篇display: flex;：彈性盒子讓作用的標籤內部形成一個彈性盒子空間，內部的子元素會沿著橫向的主軸( main axis )與縱向的...

前端小小咖 ‧ 2022-10-05 ‧團隊週六 Podcast 團

0 Like 0 留言 1238 瀏覽

鐵人賽自我挑戰組 DAY 21

手刻武器庫，30 天前端學習心得系列第 21 篇

技術 Day 21：小作品展示

組件實作 : Demo、Demo2 一、前言昨天學習 Sass 的最主要目的，就是為了要看懂自己以前寫的東西，我把它統稱為小作品，當時的這些小作品我是照...

東尼先生 ‧ 2022-10-05

0 Like 0 留言 1064 瀏覽

鐵人賽 Modern Web DAY 21

從零開始手刻網站，30 天打造我的前端武器庫系列第 21 篇

技術 Day 21：List 功能實作

組件實作 : Demo 一、前言 List 也是一種很常見的功能，其實 List 可以跟之前做的 Day 18：Collapsibles 組件實作搭配使...

東尼先生 ‧ 2022-10-05

0 Like 0 留言 2957 瀏覽

鐵人賽自我挑戰組 DAY 20

一趟30天網頁設計的學習冒險＃explain like i‘m five 系列第 20 篇

技術 Day 20 HTML+CSS 網頁初版挑戰（下）

前言我們昨天先嘗試設計了一個框架跟樣式的簡易模板出來也把HTML的基本架構建立好了，接下來就是使用CSS來進行排版美化了打開CSS檔案一樣先設計最上方的...

candy82202 ‧ 2022-10-05

0 Like 0 留言 829 瀏覽

鐵人賽自我挑戰組 DAY 20

CSS甜點烘焙店系列第 20 篇

技術新鮮出爐的甜點來囉~利用scale()快速將【櫥窗佈置】到位

您好，歡迎光臨CSS甜點烘焙店第2-15天畫的甜點們，終於要把它們擺上架了不過一次放進來的架構有點龐大，以下就以品項帶過，最後完成會釋出codepen讓大家參...

Isha Wang ‧ 2022-10-05

1 Like 1 留言 2163 瀏覽

鐵人賽 Modern Web DAY 21

防禦性 CSS - 建立「防患未然」的匠人心態系列第 21 篇

技術【Day21】Grid - 最小內容大小

情境談到響應式的佈局排版，除了 Flexbox 之外，還有一個不容忽視的重要屬性，就是 Grid。以下圖為例，我們透過 Grid 也能夠很輕易的將主要內容以...

Taiming ‧ 2022-10-05 ‧團隊光明頂

0 Like 0 留言 1068 瀏覽

鐵人賽自我挑戰組 DAY 20

手刻武器庫，30 天前端學習心得系列第 20 篇

技術 Day 20：Sass 學習筆記

一、前言之前在 Hahow 學習前端相關的課程，學了一點 Sass 的基本寫法，印象中大概學了 4 個月，後來使用純 CSS 作為開發環境，導致 Sass...

東尼先生 ‧ 2022-10-04

0 Like 0 留言 6468 瀏覽

鐵人賽 Modern Web DAY 20

從零開始手刻網站，30 天打造我的前端武器庫系列第 20 篇

技術 Day 20：AJAX 功能實作

組件實作 : Demo 一、前言 AJAX（Asynchronous JavaScript and XML）中文翻作「非同步的 JavaScript 與...

東尼先生 ‧ 2022-10-04

0 Like 0 留言 633 瀏覽

鐵人賽 Modern Web DAY 19

30天讓你爺爺取得 FreeCodeCamp 響應式網頁設計證書系列第 19 篇

技術 Day19 - 城市(下) (background)

城市天際線背景(backgroud) CSS能夠將元素的背景指定為顏色、背景圖片或是漸層，以下來簡單介紹： background-color 背景顏色就是能...

前端小小咖 ‧ 2022-10-04 ‧團隊週六 Podcast 團

0 Like 0 留言 2662 瀏覽

鐵人賽自我挑戰組 DAY 19

一趟30天網頁設計的學習冒險＃explain like i‘m five 系列第 19 篇

技術 Day 19 HTML+CSS 網頁初版挑戰（上）

前言前面講了那麼多HTML架構啦～CSS排版樣式設計啦～那如果直接嘗試挑戰會是如何呢？自己本身是沒有設計背景的，所以曾經嘗試用學習到的這些語法，然後拼湊看...

candy82202 ‧ 2022-10-04

0 Like 0 留言 1012 瀏覽

鐵人賽自我挑戰組 DAY 19

CSS甜點烘焙店系列第 19 篇

技術店面的靈魂之【窗】，框、板、反光，2層搞定！

您好，歡迎光臨CSS甜點烘焙店今天體力恢復的還不錯，除了還是有劇咳，沒力氣吼小孩之外，其它還算安好我們就來開始店面的展示櫥窗吧~ Html部份，繼續在.al...

Isha Wang ‧ 2022-10-04

0 Like 0 留言 1564 瀏覽

鐵人賽自我挑戰組 DAY 29

Do you wanna play? CSS game ぎりぎり系列第 29 篇

技術 [Day 29] Checklist: 打個勾勾完賽吧

很快地，今天來到了第29天，我們來實作Day #27 Checklist CodePen: https://codepen.io/stevetanus/pen/...

steventhibe ‧ 2022-10-06

0 Like 0 留言 779 瀏覽

鐵人賽自我挑戰組 DAY 28

Do you wanna play? CSS game ぎりぎり系列第 28 篇

技術 [Day 28] Motivational Modal: 無限心靈雞湯

如果你想要成長，跨出你的舒適圈。泥濘中跌倒再站起，失敗就是一種學習。你就是你，獨一無二，綻放著，閃耀著。今天我們來實作Day #26 Motivational...

steventhibe ‧ 2022-10-05

1 Like 1 留言 808 瀏覽

鐵人賽自我挑戰組 DAY 27

Do you wanna play? CSS game ぎりぎり系列第 27 篇

技術 [Day 27] Map Marker: 烏石港衝浪去

我們在使用google map的時候，會將自己喜愛的地方標記起來，以備未來想要查看時，能夠更迅速的掌握資訊 ~今天我們來實作Day #25，以下有些class命...

steventhibe ‧ 2022-10-04

4 Like 0 留言 1014 瀏覽

鐵人賽 Modern Web DAY 20

防禦性 CSS - 建立「防患未然」的匠人心態系列第 20 篇

技術【Day20】Flexbox - 最小內容大小

情境 Flexbox 的排版已經太方便，以至於網頁上到處都可以發現 Flexbox 的蹤跡。今天我們再來舉一個例子，假設我們需要做一個使用者管理頁面，那我們可能...

Taiming ‧ 2022-10-04 ‧團隊光明頂

0 Like 0 留言 3803 瀏覽

鐵人賽 Modern Web DAY 19

從零開始手刻網站，30 天打造我的前端武器庫系列第 19 篇

技術 Day 19：滑動頁面組件實作

組件實作 : Demo 一、前言滑動頁面組件 Overlay 的用途是當作側邊選單，可以用在隱藏一部分的資訊，讓頁面看起來更乾淨，反過來說，Overla...

東尼先生 ‧ 2022-10-03

0 Like 0 留言 1857 瀏覽

鐵人賽自我挑戰組 DAY 19

手刻武器庫，30 天前端學習心得系列第 19 篇

技術 Day 19：jQuery 學習筆記-下

組件實作 : Demo、Demo2 一、前言今天要來繼續研究 jQuery 的用法，經過我非常努力的看書後，發現勾不起我寫文章的動力，索性就直接在網路上...

東尼先生 ‧ 2022-10-03

0 Like 1 留言 1057 瀏覽

鐵人賽自我挑戰組 DAY 18

CSS甜點烘焙店系列第 18 篇

技術可愛的【馬卡龍小招牌】，善用偽元素::before與::after

您好，歡迎光臨CSS甜點烘焙店是的！就在昨日我確診了，自己發燒、喉嚨痛、全身酸痛之外，還要顧2隻小屁孩外加打理3餐，只能找空檔來完成文章，還好前幾日就有預先畫...

Isha Wang ‧ 2022-10-03

0 Like 0 留言 1073 瀏覽

鐵人賽自我挑戰組 DAY 26

Do you wanna play? CSS game ぎりぎり系列第 26 篇

技術 [Day 26] Button: 咔鏗完成!

在寫鐵人賽文章時，我們常常會按下儲存草稿，這時候會有一個完成的動畫~一個圓圈轉動配上一個勾勾，簡單俐落!今天我們來實作Day #24 Button CodePe...

steventhibe ‧ 2022-10-03

0 Like 0 留言 2204 瀏覽

鐵人賽自我挑戰組 DAY 18

一趟30天網頁設計的學習冒險＃explain like i‘m five 系列第 18 篇

技術 Day 18 進階CSS （排版聖品登場！！登登登登～）

前言繼五花八門的選擇器之後，來到了空間學堂，同樣程度的燒腦啊～講到CSS最後的這趴重點就要回想到當初我們的區塊（想當初～～ Day 6講到區塊元素 Day 1...

candy82202 ‧ 2022-10-03

3 Like 0 留言 3169 瀏覽

鐵人賽 Modern Web DAY 19

防禦性 CSS - 建立「防患未然」的匠人心態系列第 19 篇

技術【Day19】Flexbox - 內元件溢出

情境 Flexbox 是 CSS3 的盒子模型(box model)，顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box)，這個模型讓排版變得容...

Taiming ‧ 2022-10-03 ‧團隊光明頂

0 Like 0 留言 2625 瀏覽

鐵人賽 Modern Web DAY 18

從零開始手刻網站，30 天打造我的前端武器庫系列第 18 篇

技術 Day 18：Collapsibles 組件實作

組件實作 : Demo、Demo2 一、前言 Collapsibles 翻譯為折疊的意思，所以它可以像是下拉選單一樣，點擊按鈕後即可展開內容，其實這個組件的作...

東尼先生 ‧ 2022-10-02

0 Like 0 留言 1694 瀏覽

鐵人賽 Modern Web DAY 28

從零開始學 - Side Project專題開發及切版實作技巧系列第 28 篇

技術 Day 28 - 專案開發技巧篇(六) : 推薦實用套件

專案開發技巧篇(六) : 推薦實用套件每日一談嗨，大家好 ! 我是阿蘇今天是Day28 ，今天分享的是實用套件分享，我們可以在網路找到很多好用的套件，有很...

阿蘇蘇 ‧ 2022-10-13 ‧團隊死線衝鋒 Deadline Squad

技術 Day 22：鍵盤輸入事件實作

技術 Day 22：SVG Path 急速入門

技術 Day21 - 雜誌(下) (隱式格線屬性)

技術 Day 25 【職涯之路】我應該要學HTML/CSS嗎？

技術 是時候該擺一攤珍珠奶茶了，box-shadow用好用滿、簡單複製物件

技術 Day 30 Side Project : pokedex 精靈寶可夢圖鑑

技術 【Day22】Grid - 自動填滿效果

技術 Day20 - 雜誌(上) (grid)

技術 Day 21：小作品展示

技術 Day 21：List 功能實作

技術 Day 20 HTML+CSS 網頁初版挑戰（下）

技術 新鮮出爐的甜點來囉~利用scale()快速將【櫥窗佈置】到位

技術 【Day21】Grid - 最小內容大小

技術 Day 20：Sass 學習筆記

技術 Day 20：AJAX 功能實作

技術 Day19 - 城市(下) (background)

技術 Day 19 HTML+CSS 網頁初版挑戰（上）

技術 店面的靈魂之【窗】，框、板、反光，2層搞定！

技術 [Day 29] Checklist: 打個勾勾完賽吧

技術 [Day 28] Motivational Modal: 無限心靈雞湯

技術 [Day 27] Map Marker: 烏石港衝浪去

技術 【Day20】Flexbox - 最小內容大小

技術 Day 19：滑動頁面組件實作

技術 Day 19：jQuery 學習筆記-下

技術 可愛的【馬卡龍小招牌】，善用偽元素::before與::after

技術 [Day 26] Button: 咔鏗完成!

技術 Day 18 進階CSS （排版聖品登場！！登登登登～）

技術 【Day19】Flexbox - 內元件溢出

技術 Day 18：Collapsibles 組件實作

技術 Day 28 - 專案開發技巧篇(六) : 推薦實用套件

標記使用者

技術是時候該擺一攤珍珠奶茶了，box-shadow用好用滿、簡單複製物件

技術【Day22】Grid - 自動填滿效果

技術新鮮出爐的甜點來囉~利用scale()快速將【櫥窗佈置】到位

技術【Day21】Grid - 最小內容大小

技術店面的靈魂之【窗】，框、板、反光，2層搞定！

技術【Day20】Flexbox - 最小內容大小

技術可愛的【馬卡龍小招牌】，善用偽元素::before與::after

技術【Day19】Flexbox - 內元件溢出