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

0 Like 0 留言 1363 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 Day 14：Typing Effect 組件實作

組件實作：Demo 一、前言 Typing Effect 是一種好用的文字效果，看似簡單的語法下，其實藏著一些不太好理解的概念，例如 CSS 的 Anim...

東尼先生 ‧ 2022-09-28

0 Like 0 留言 937 瀏覽

鐵人賽自我挑戰組 DAY 13

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

技術 Day 13 background & border

前言文字樣式設計變化之後那可以試試看更改背景還有框線設計 background color / image 背景顏色 / 圖片 Background-siz...

candy82202 ‧ 2022-09-28

0 Like 0 留言 845 瀏覽

鐵人賽自我挑戰組 DAY 22

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

技術 Day 22 Side Project : Hoverboard 面板

今天要來做的是由多個正方形所組成的hover面板超白話畫面和功能拆解面板主要由多個小正方形所組成當滑鼠經過正方形，就會產生不同的顏色，離開正方形顏色...

hannnahTW ‧ 2022-09-28

1 Like 0 留言 1334 瀏覽

鐵人賽自我挑戰組 DAY 13

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

技術 Day 13：Vim 學習筆記

一、前言其實，我也不知道自己怎麼會想加入這個主題，只是有點想要學習 Vim 的基本操作，順便紀錄一下學過的操作方法，現階段我也沒有想要背任何的指令或是快捷鍵...

東尼先生 ‧ 2022-09-27

0 Like 0 留言 982 瀏覽

鐵人賽自我挑戰組 DAY 12

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

技術 Day 12 CSS text styling

前言進入CSS講了這麼多選擇器，終於來到文字的設計啦！之前在學校做報告時候，常常會使用文件裡面編輯文字，可能這個字體要更改成微軟正黑體，又或是字體的大小需要...

candy82202 ‧ 2022-09-27

0 Like 0 留言 733 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Day12 - 偽裝(上) (table,虛擬類別;偽類)

資產負債表表格元素 <table> HTML自帶製作表格或報表專用的標籤，這裡簡單介紹table中標籤代表的意思： <table>...

前端小小咖 ‧ 2022-09-27 ‧團隊週六 Podcast 團

0 Like 0 留言 2041 瀏覽

鐵人賽自我挑戰組 DAY 19

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

技術 [Day 19] Penrose Triangle: 潘洛斯三角(不可能三角)

今天我們來實作Day #17，潘洛斯三角形為存在於二維空間的三角形，而在現實世界中不可能存在的物體。潘洛斯三角維基百科 Penrose Triangle...

steventhibe ‧ 2022-09-26

0 Like 1 留言 1666 瀏覽

鐵人賽自我挑戰組 DAY 21

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

技術 Day 21 Side Project : Password Generator 密碼生成器(下)

接續Day 20，繼續來講解沒完成的JS部分專案回顧畫面和功能拆解畫面中的密碼生成器裡內有標題 > 結果顯示欄 +複製按鈕 > 需求設定...

hannnahTW ‧ 2022-09-27

0 Like 0 留言 1687 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 Day 13：Tab 組件實作

組件實作 : Demo 一、前言 Tab 組件是一種高互動性的組件，構造是由一個 Menu 選單和一個訊息框組合而成，當選單項目被選中時，會切換到對應的訊...

東尼先生 ‧ 2022-09-27

0 Like 0 留言 2673 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Day 12：Ｍodal 組件實作

組件實作 : Demo 一、前言Ｍodal 指的是互動視窗，也就是讓畫面跳出一個蓋板訊息框。使用 Modal 背景大多由半透明黑色覆蓋；訊息框（互動視窗...

東尼先生 ‧ 2022-09-26

0 Like 0 留言 768 瀏覽

鐵人賽自我挑戰組 DAY 11

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

技術 Day 11 CSS Rules

前言挑戰快要到一半了！！剛完成讓人頭昏眼花的選擇器學習，那選擇器在套用的順序上面也是有優先順序的本篇就是一個補充說明，講一下CSS Rules 幾個規則，...

candy82202 ‧ 2022-09-26

0 Like 0 留言 1297 瀏覽

鐵人賽自我挑戰組 DAY 20

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

技術 Day 20 Side Project : Password Generator 密碼生成器(上)

這篇沒有帥哥可以看，不過也是一個非常有趣的projecto(￣▽￣)ｄ今天要做的是密碼生成器，根據使用者的需求去自動生成密碼，聽起來很厲害，另外考量到這篇的J...

hannnahTW ‧ 2022-09-26

0 Like 0 留言 695 瀏覽

鐵人賽自我挑戰組 DAY 10

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

技術 Day 10 CSS Selector 最後一趴

前言 CSS選擇器來到第三篇了，沒想到讓頭腦打結的規則越來愈複雜，花了好一段時間好好理解跟運用這些選擇器的規則。 Part.3 介紹的基本選擇器如下 Des...

candy82202 ‧ 2022-09-25

0 Like 0 留言 3791 瀏覽

鐵人賽自我挑戰組 DAY 12

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

技術 Day 12：Google Maps API

組件實作 : Demo 一、前言網頁上要顯示店家、場地等地理位置資訊，都會使用到 Google 地圖來輔助。在這個篇章中，我們要來研究關於 Google...

東尼先生 ‧ 2022-09-26

0 Like 0 留言 800 瀏覽

鐵人賽自我挑戰組 DAY 18

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

技術 [Day 18] Blobby: 改變形狀的閃耀泡泡

在昨天的文章學習到新的scale, rotate, translate的寫法，可以從transform獨立出來，今天就可以實際運用，配合SVG的圖形，來達到改變...

steventhibe ‧ 2022-09-25

0 Like 0 留言 2882 瀏覽

鐵人賽自我挑戰組 DAY 11

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

技術 Day 11：Position 功能實作

組件實作 : Demo、Demo2 一、前言原本預定這篇要來寫 pug 的學習筆記，但是對於 CSS 的 Position 的用法還有一點不熟悉，所以...

東尼先生 ‧ 2022-09-25

0 Like 0 留言 1917 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 Day 11：Timeline 組件實作

組件實作 : Demo、Demo2 一、前言 Timeline 時間線的功能很常出現在履歷表，或是各種跟年分有關的介紹。原本參考 W3schools Ho...

東尼先生 ‧ 2022-09-25

0 Like 0 留言 1312 瀏覽

鐵人賽自我挑戰組 DAY 19

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

技術 Day 19 Side Project : Double Vertical Slider雙捲軸

今天要來做的是垂直的輪播圖，點選「上」「下」箭頭可以反方向切換圖片和圖片的描述，做project順便看看帥哥好快樂≡ω≡ 事前準備引入 fontAwes...

hannnahTW ‧ 2022-09-25

0 Like 0 留言 3775 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 Day 16 - 切版進階技巧(二) : 版型規劃、RWD規劃

Day 16 - 切版進階技巧(二) : RWD、版型規劃每日一談嗨，大家好 ! 我是阿蘇今天是Day16 ，今天分享的是RWD、版型規劃，目前大部分的網...

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

0 Like 0 留言 1715 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎

Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎每日一談嗨，大家好 ! 我是阿蘇今天是Day 11，不知不覺終於突破 Day10 啦 !...

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

0 Like 0 留言 936 瀏覽

技術 checkbox 傳送空值?

情況：在做修改功能時，多筆資料想把 checkbox 傳送空值，也就是如果有勾選，POST 到資料庫紀錄 Y，如果不勾選，資料庫就紀錄空值。問題：原本資料...

kaochihyu ‧ 2022-09-24

0 Like 0 留言 2545 瀏覽

鐵人賽自我挑戰組 DAY 18

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

技術 Day 18 Side Project : Drag N Drop 拖與拉

今天要來做的是滑鼠拖拉事件，點選笑臉圖片可以把它拖放到空的正方形中，功能拆解預設情況圖片會放在第一個正方形內持續按著滑鼠左鍵，可以拖拉照片抓起圖片經...

hannnahTW ‧ 2022-09-24

0 Like 0 留言 4165 瀏覽

鐵人賽自我挑戰組 DAY 10

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

技術 Day 10：Webpack 學習筆記

一、前言 Webpack 是網頁的打包工具。當我們的網頁越寫越大，檔案越來越多（例如一個網站有好幾個.html檔案），甚至還有使用到框架。這時候我們可以使用...

東尼先生 ‧ 2022-09-24

0 Like 0 留言 3048 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 Day 10：Form 驗證功能實作

組件實作 : Demo 一、前言驗證功能（Validate）用途在於能夠避免使用者輸入不符合格式的資料，統一的資料格式方便讓程式處理。Form 表單內容...

東尼先生 ‧ 2022-09-24

0 Like 0 留言 1061 瀏覽

鐵人賽 Modern Web DAY 9

前端三分鐘 X 從把妹角度理解前後端如何和平相處系列第 9 篇

技術用 LinkFree 製作一個 Github Pages 取代 LinkTree (9)

什麼是 LinkTree LinkTree 是一頁傳送門，透過 IG 的個人檔案連結來做相關行銷與各平台的串聯。透過 LinkTree 整合 Facebook...

linyencheng ‧ 2022-09-24

0 Like 0 留言 1297 瀏覽

鐵人賽自我挑戰組 DAY 9

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

技術 Day 9 CSS Selector part2

前言前面幾個選擇器是比較基礎簡單可以理解的，到這裡就開始需要思考一下… 今天還有好多選擇器的規範，就不多說直接開始。 Part.2 介紹的基本選擇器如下...

candy82202 ‧ 2022-09-24

0 Like 0 留言 905 瀏覽

鐵人賽自我挑戰組 DAY 17

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

技術 Day 17 Side Project : Theme Clock 動態時鐘(下)

下篇我們要接續上篇的時鐘來講解主要圍繞在JS的部分 JS變數的設定 let hour = document.querySelector(".ho...

hannnahTW ‧ 2022-09-23

0 Like 0 留言 45274 瀏覽

鐵人賽自我挑戰組 DAY 9

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

技術 Day 09：UI 設計工具 Figma 快速入門

成果展示: Demo 一、前言為了逼迫自己學習 Figma 這個線上工具，於是特別寫這一篇。身為一個前端工程師，為什麼需要特別去學習 UI 設計的工具呢...

東尼先生 ‧ 2022-09-23

0 Like 0 留言 1350 瀏覽

鐵人賽自我挑戰組 DAY 8

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

技術 Day 8 CSS Selector part 1

前言前面對CSS應該有一些的基本了解跟認識，那接下來要講到的CSS Selectors 基本選擇器（如果我們想要連結CSS檔案到HTML檔案的話，開新的檔案...

candy82202 ‧ 2022-09-23

0 Like 0 留言 1626 瀏覽

鐵人賽自我挑戰組 DAY 16

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

技術 [Day 16] Upload: 以假亂真的上傳

我們常常在交作業、交報告、分享檔案的時候需要上傳的步驟，那你有想過做一個好看的上傳動畫嗎?今天我們就來實作Day #15，不會實際上傳檔案的好看動畫 Uploa...

steventhibe ‧ 2022-09-23