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

0 Like 1 留言 590 瀏覽

鐵人賽自我挑戰組 DAY 24

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

技術 Day 24 Side Project : Live User Filter 動態篩選器

今天要做的是動態篩選器畫面和功能拆解沒有輸入的情況下，可以看到所有的人名每輸入一個字母，便動態篩選搜尋結果（類似 google 搜尋 bar）...

hannnahTW ‧ 2022-09-30

0 Like 0 留言 548 瀏覽

鐵人賽 Modern Web DAY 17

Have fun! 新手也能打造的Javascript微型專案系列第 17 篇

技術 Have fun! 新手也能打造的Javascript微型專案! Day17: 用打字猜數字無聊？那就用SpeechRecognition語音猜數字唄！(下)

tags: ItIron2022 Javascript 前言我們昨天已經完成了基本的UI部分以及做好之後的事前規劃，剩下要做的事情就只是把js的邏輯補上即可，...

windate3411 ‧ 2022-09-30 ‧團隊桌遊玩樂團

0 Like 0 留言 1314 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day 20 - 開發環境架設(一) : Bootstrap 核心、SCSS架構

開發環境架設(一) : Bootstrap 核心、SCSS架構每日一談嗨，大家好 ! 我是阿蘇到了第20天啦，剩下的天數都會來分享關於正式開發 Side...

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

0 Like 0 留言 965 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 Day 19 - 正式開發 Side project

Day 19 - 正式開發 Side project 每日一談嗨，大家好 ! 我是阿蘇今天是 Day19 ，前面有分享很多開發前的切版知識、開發專題前的準...

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

0 Like 0 留言 810 瀏覽

鐵人賽 Modern Web DAY 16

Have fun! 新手也能打造的Javascript微型專案系列第 16 篇

技術 Have fun! 新手也能打造的Javascript微型專案! Day16: 用打字猜數字無聊？那就用SpeechRecognition語音猜數字唄！(上)

tags: ItIron2022 Javascript 前言猜數字遊戲一直是很熱門的程式語言初學專案之一，可以很好的練習基本的條件式處理，但總是用打字去猜也是...

windate3411 ‧ 2022-09-29 ‧團隊桌遊玩樂團

1 Like 0 留言 557 瀏覽

鐵人賽自我挑戰組 DAY 23

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

技術 Day 23 Side Project : Verify Account UI 帳戶驗證介面

今天要來做的是很常見的用戶驗證介面超白話畫面和功能拆解當輸入一個數字後，便會自動跳到下一個輸入框可以按backspace 按鍵去修改前面的數字運...

hannnahTW ‧ 2022-09-29

0 Like 0 留言 876 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 Day 18 - 開發小知識(二) : 切版學習之路、實作精進切版

Day 18 - 開發小知識(二) : 切版學習之路、實作精進切版每日一談嗨，大家好 ! 我是阿蘇今天是 Day17 ，前面的切版實作技巧分享差不多了，...

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

0 Like 0 留言 583 瀏覽

鐵人賽自我挑戰組 DAY 22

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

技術 Day 22 Side Project : Hoverboard 面板

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

hannnahTW ‧ 2022-09-28

0 Like 1 留言 1019 瀏覽

鐵人賽自我挑戰組 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 留言 885 瀏覽

鐵人賽 Modern Web DAY 13

Have fun! 新手也能打造的Javascript微型專案系列第 13 篇

技術 Have fun! 新手也能打造的Javascript微型專案! Day13: 英打總是龜速？寫個打字測驗遊戲來練習吧！(中)

tags: ItIron2022 Javascript 前言我們昨天完成了基本的ui以及事前的規劃，今天就動手把核心功能完成吧！ Getting starte...

windate3411 ‧ 2022-09-26 ‧團隊桌遊玩樂團

0 Like 0 留言 922 瀏覽

鐵人賽自我挑戰組 DAY 20

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

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

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

hannnahTW ‧ 2022-09-26

0 Like 0 留言 831 瀏覽

鐵人賽自我挑戰組 DAY 19

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

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

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

hannnahTW ‧ 2022-09-25

0 Like 1 留言 952 瀏覽

鐵人賽 Modern Web DAY 12

Have fun! 新手也能打造的Javascript微型專案系列第 12 篇

技術 Have fun! 新手也能打造的Javascript微型專案! Day12: 英打總是龜速？寫個打字測驗遊戲來練習吧！(上）

tags: ItIron2022 Javascript 前言對很多人來說，與外國同事工作最麻煩的地方就是...英打跟不上(讓我們先假設你英文口說跟聽力是ok的...

windate3411 ‧ 2022-09-25 ‧團隊桌遊玩樂團

0 Like 0 留言 1242 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 Day 13 - 切版排版技巧(一) : Flex排版、Box模型

Day 13 - 切版排版技巧(一) : Flex排版、Box模型每日一談嗨，大家好 ! 我是阿蘇今天是Day13 ，我們前面分享了HTML / CSS...

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

0 Like 0 留言 2054 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Day 12 - 切版基礎打底(二) : 必學CSS運用

Day 12 - 切版基礎打底(二) : 必學CSS運用每日一談嗨，大家好 ! 我是阿蘇今天是Day12，我們一樣繼續談談CSS的實作運用，有哪些是必學、...

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

0 Like 0 留言 1234 瀏覽

鐵人賽 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 留言 1254 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

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

hannnahTW ‧ 2022-09-24

0 Like 0 留言 767 瀏覽

鐵人賽自我挑戰組 DAY 16

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

技術 Day 16 Side Project : Theme Clock 動態時鐘(上)

今天我們要來做動態時鐘 ♪(^∇^*)，搭配上背景的黑白兩色切換，因篇幅較長(ㄟ看到這就不想看了)，會分成「上」、「下」兩篇來講解功能拆解時針每一小...

hannnahTW ‧ 2022-09-22

0 Like 0 留言 7820 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day 7 - 動手繪製 Wireframe 線框稿(Figma教學)

Day 7 - 動手繪製 Wireframe 線框稿(Figma教學) 每日一談嗨 ! 大家好，我是阿蘇今天是Day 7 ，今天會分享 Wireframe...

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

0 Like 0 留言 1468 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 Day 10 - Prototype 原型互動 / 產品模擬

Day 10 - Prototype 原型互動 / 產品模擬 (Figma 教學) 每日一談嗨，大家好 ! 我是阿蘇今天是Day10 ，今天來跟大家談談 P...

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

0 Like 0 留言 1997 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 Day 9 - Figma 繪製精美 Mockup (二)

Day 9 - Figma 繪製精美 Mockup (二) 每日一談嗨! 大家好，我是阿蘇又是新的一天開始了，今天是Day 9來繼續昨天的分享，今天主要是...

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

0 Like 0 留言 1680 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 Day 8 - Figma 繪製精美 Mockup (一)

Day 8 - Figma 繪製精美 Mockup (一) 每日一談嗨，大家好 ! 我是阿蘇今天是Day7 我們即將進入設計階段，這邊一樣也是使用 F...

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

0 Like 0 留言 1849 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 Day 6 - Wireframe 線框稿

Day 6 - Wireframe 線框稿每日一談嗨 ! 大家好，我是阿蘇不知不覺就來到了 Day 6 ，有沒有開始對 Side Project 有些靈...

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

0 Like 0 留言 2137 瀏覽

鐵人賽自我挑戰組 DAY 15

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

技術 Day 15 Side Project : Background Slider 全景輪播圖

輪播圖的應用很常見也很廣泛，一般有框架就用框架，像是Bootstrap中的Carousel，不過這系列的文章主要著重在前端三大技術上，所以今天我們要來自己手刻...

hannnahTW ‧ 2022-09-21

0 Like 0 留言 1146 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 Day 5 - 開發前準備(三) : 蒐集資料、擬定風格

Day 5 - 開發前準備(三) : 蒐集資料、擬定風格每日一談嗨 ! 大家好，我是阿蘇又來到了Day 5，今天來談談比較輕鬆的主題那就是如何蒐集 Sid...

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

0 Like 0 留言 784 瀏覽

鐵人賽自我挑戰組 DAY 14

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

技術 Day 14 Side Project : Incrementing Counter 遞增計數器

今天要來做的是動態計數效果，隨著固定的時間遞增固定的數字上去，因為時間設得很短，所以視覺上看起來像是連續的，如圖中那樣! 事前準備引入 fontAwes...

hannnahTW ‧ 2022-09-20

0 Like 0 留言 1351 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 Day 4 - 開發前準備(二):規劃開發期程

開發前準備(二):規劃開發期程每日一談嗨大家好 ! 我是阿蘇今天是 DAY4，今天談的主題是 Side Project 規劃開發期程，不要小看開發前的規劃...

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

0 Like 0 留言 584 瀏覽

鐵人賽自我挑戰組 DAY 13

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

技術 Day 13 Side Project : Drink Water 沒事多喝水

今天要來做的主題還蠻有趣滴~ 如圖中所示，我們的目標水量是要把整個大杯子填滿(2L)，點選下方的小杯子(250ml)，可以把水加入大杯子中，並且顯示目前水量以...

hannnahTW ‧ 2022-09-19

1 Like 0 留言 1049 瀏覽

鐵人賽 Modern Web DAY 6

Have fun! 新手也能打造的Javascript微型專案系列第 6 篇

技術 Have fun! 新手也能打造的Javascript微型專案! Day6: 老是算錢算不清，寫個簡單的計算機用用吧！(上)

tags: ItIron2022 Javascript 前言從今天開始我們會進入一系列的vanilla javascript專案系列，也就是不透過前端框架或套...

windate3411 ‧ 2022-09-19 ‧團隊桌遊玩樂團

0 Like 0 留言 1424 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 Day 3 - 開發前準備(一) : 發想主題

開發前準備(一) : 發想主題每日一談嗨大家好 ! 我是阿蘇今天是 DAY3，今天來開始進入正題，談談 Side Project 主題，中間也會分享自己開...

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