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

0 Like 0 留言 719 瀏覽

鐵人賽自我挑戰組 DAY 25

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

技術 Day 25：React 的 Hook - useState 與 useEffect

一、前言昨日誠摯的建議（洗腦）各位學習 React 的 Class 寫法之前，可以先學習強大的 Hook，或許是一種不錯的入門方式。今天要持續的來探討 Ho...

東尼先生 ‧ 2022-10-09

0 Like 0 留言 673 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 DAY 25：前端小功能實作-不分類

一、前言這篇收集了一些常見的組件，每個功能的程式碼並不多，於是決定將這些程式碼集中寫在一起啦～希望這些組件可以被重複利用，並且發揮一定的作用。那麼，現在就來...

東尼先生 ‧ 2022-10-09

0 Like 0 留言 2177 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 Day 24：Scroll 組件實作

組件實作 : Demo、Demo2 一、前言 Scroll 的意思為滾動，它常見的應用，比如在頁面捲動時所產生的效果，這個效果被稱作為「視差滾動」 Par...

東尼先生 ‧ 2022-10-08

0 Like 0 留言 1029 瀏覽

鐵人賽自我挑戰組 DAY 24

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

技術 Day 24：React 的 Hook 初探

一、前言昨天我們把 React 的環境架起來，並且執行「Hello World」程式。今天要來學習一下 Hook 的寫法，至於 Hook 是什麼？以及要如何...

東尼先生 ‧ 2022-10-08

0 Like 0 留言 695 瀏覽

技術實踐拖曳功能

情境：實踐拖曳功能，並 POST 出對應欄位類似這種單字遊戲，把對應的答案移動到框框內，再送出答案參考資料： HTML Drag and Drop AP...

kaochihyu ‧ 2022-10-08

0 Like 0 留言 1146 瀏覽

鐵人賽自我挑戰組 DAY 23

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

技術 Day 23：React 環境建置 - Hello World

一、前言從今天起連續 5 天，我們會專注在前端框架 React 的學習上。學習框架原因不單只是因為專案需求，更多的原因是學框架對于求職來說，已經變成一種標準...

東尼先生 ‧ 2022-10-07

0 Like 0 留言 1404 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 Day 23：Image Overlay 組件實作

組件實作：Demo 一、前言 Image Overlay 指的是圖片上的覆蓋效果，我們要做的是：「使用滑鼠移動到圖片上，頁面會從四個方向來滑入頁面，像是從...

東尼先生 ‧ 2022-10-07

0 Like 0 留言 1394 瀏覽

鐵人賽自我挑戰組 DAY 21

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

技術 Day 21 RWD回應式設計

前言登登登登～～昨天剛完成一個簡易的HTML+CSS的網頁雛形結果…這時候有個問題出來那就是…如果當網頁換成平板試看或是手機的時候我昨天好不容易崩潰排好...

candy82202 ‧ 2022-10-06

0 Like 0 留言 1589 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

東尼先生 ‧ 2022-10-06

0 Like 0 留言 1384 瀏覽

鐵人賽自我挑戰組 DAY 22

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

技術 Day 22：SVG Path 急速入門

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

東尼先生 ‧ 2022-10-06

0 Like 0 留言 941 瀏覽

鐵人賽自我挑戰組 DAY 21

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

技術 Day 21：小作品展示

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

東尼先生 ‧ 2022-10-05

0 Like 0 留言 634 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 Day 21：List 功能實作

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

東尼先生 ‧ 2022-10-05

0 Like 0 留言 2006 瀏覽

鐵人賽自我挑戰組 DAY 20

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

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

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

candy82202 ‧ 2022-10-05

0 Like 0 留言 781 瀏覽

鐵人賽自我挑戰組 DAY 29

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

技術 Day 29 Side Project : Notes App 備忘錄

今天要來做的是備忘錄，可以新增、修改以及刪除，並儲存在local storage中，畫面上錄不到重新整理的按鈕，不過若正確存放到 local storage...

hannnahTW ‧ 2022-10-05

0 Like 0 留言 759 瀏覽

鐵人賽自我挑戰組 DAY 20

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

技術 Day 20：Sass 學習筆記

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

東尼先生 ‧ 2022-10-04

0 Like 0 留言 2184 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day 20：AJAX 功能實作

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

東尼先生 ‧ 2022-10-04

0 Like 0 留言 1522 瀏覽

鐵人賽自我挑戰組 DAY 19

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

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

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

candy82202 ‧ 2022-10-04

0 Like 0 留言 970 瀏覽

鐵人賽自我挑戰組 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

1 Like 1 留言 625 瀏覽

鐵人賽自我挑戰組 DAY 27

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

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

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

steventhibe ‧ 2022-10-04

0 Like 0 留言 2242 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

東尼先生 ‧ 2022-10-03

0 Like 0 留言 1172 瀏覽

鐵人賽自我挑戰組 DAY 19

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

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

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

東尼先生 ‧ 2022-10-03

0 Like 0 留言 1342 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

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

candy82202 ‧ 2022-10-03

0 Like 0 留言 887 瀏覽

鐵人賽自我挑戰組 DAY 27

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

技術 Day 27 Side Project : Drawing App 畫畫面板

今天要來做的是畫畫面板，使用到HTML5的canvas這個元素超白話畫面和功能拆解有一個可以畫圖的畫布點選操控面板可以換色、調整粗細滑鼠左鍵按下就...

hannnahTW ‧ 2022-10-03

0 Like 0 留言 1154 瀏覽

鐵人賽 Modern Web DAY 18

[POSTMAN] 該知道的都知道，不知道的慢慢了解 - 與波斯麵三十天的感情培養系列第 18 篇

技術 Postman challenge Day 17 - 可視化 (Visualizations)

今日主題今天的主題是可視化(Visualizations)，主要的目的是針對每次進行API呼叫後，將回應的資料以圖形的方式來呈現，讓資料本身更容易被理解，不需...

chacoteeth ‧ 2022-10-03 ‧團隊森上依然梅友前

0 Like 0 留言 1682 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 Day 18：Collapsibles 組件實作

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

東尼先生 ‧ 2022-10-02

0 Like 0 留言 1853 瀏覽

鐵人賽自我挑戰組 DAY 18

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

技術 Day 18：jQuery 學習筆記-上

一、前言伴隨著前端框架的不斷演進，jQuery 的使用慢慢地式微，甚至出現了棄用 jQuery 的建議【1】。雖然某些公司專案開上可能不再使用 jQuery...

東尼先生 ‧ 2022-10-02

0 Like 0 留言 674 瀏覽

鐵人賽自我挑戰組 DAY 26

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

技術 Day 26 Side Project : Testimonial Box Switcher 人物介紹(仿限時動態)

今天要來做的事人物的介紹，呈現形式有點類似限時動態，固定時間後會自行跳往下一則動態超白話畫面和功能拆解進度條會動態前進，紀錄目前跑的進度主體內容包含...

hannnahTW ‧ 2022-10-02

0 Like 0 留言 1264 瀏覽

鐵人賽自我挑戰組 DAY 17

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

技術 Day 17：Docker 學習筆記

一、前言這篇文章的主要目的是在記錄學習 Docker 的相關議題，內容包括：「是如何入門？碰上問題時的解決方法？」等等，目標是把環境建立起來，還有整理相關的...

東尼先生 ‧ 2022-10-01

0 Like 0 留言 784 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 Day 17：Testimonials 組件實作

組件實作 : Demo 一、前言 Testimonials 這個組件意思是「證言」，類似推薦信的感覺，也就是網路上的文章底下常見的留言評論區，先不討論這些...