教學

• 合作推廣, 教學Tutorial

【合作推廣】 AWS帶你在雲端飛

相信大家對於亞馬遜都不陌生吧？就是當你看到海外的酷東西，對錢錢說聲抱歉我需要這個然後點開下單的那個網站，過幾天帶著微笑A到Z的包裹就會出現在你家門外，裡面裝著化成快樂形狀的錢錢。除此之外，你聽過亞馬遜的雲端系統Amazon Web Services (AWS) 嗎？ 「下單我會，但你說的雲端系統是什麼呢？」

• 2021 / 12 / 14

• 閱讀全文 >

• p5.js, 教學Tutorial

【p5.js創作教學】Dreamy Bird 夢幻鳥

本篇記錄創作＜夢幻鳥＞這件作品的過程，利用p5.js在短短的時間內創作出繽紛多彩、眼睛跟著滑鼠游標轉的夢幻鳥，看著他不斷地動，好像趴著在看水族館裡的魚一樣，心情也會跟著雀躍起來唷！

• 2021 / 10 / 12

• 閱讀全文 >

• canvas, CSS, HTML, 基礎, 教學Tutorial

【Canvas創作教學】畫個偵測敵人的動態雷達圖網頁

本次創作直播內容透過 Canvas 物件，將網頁當作畫布，繪製不同的圖形，完成模擬偵測敵人的雷達機介面；運用三角函數概念，以及模組化程式，簡單製作出動態的網頁，詳細的步驟解釋，無論有沒有基礎，都能輕鬆跟著說明完成，剩下的就由你自行發揮囉！

• 2021 / 09 / 23

• 閱讀全文 >

• p5.js, 教學Tutorial

【p5.js創作教學】CreativeCoding 花火大會（直播筆記）

為響應日本的一群Creative Coder在Processing Community Day的社群串聯，扮起虛擬的花火大會，我們也來利用p5.js，結合粒子系統、漸變顏色甚至是聲控模組，一起在夜空中創作出絢麗的煙火吧！

• 2021 / 09 / 16

• 閱讀全文 >

• CSS, HTML, Vue.js, 基礎, 教學Tutorial

Vue.js入門：英文2000字互動遊戲網頁

你多久沒鍛鍊英文了呢？這次直播使用HTML(Pug)CSS(Sass)以及Javascript(Vue.js)來完成一個練習2000字英文單字的小互動遊戲網頁，難度適中，尤其適合剛開始學習Vue.js的新手，無論是跟著步驟逐步操作，或是聽老闆的影片都能快速完成。

• 2021 / 08 / 26

• 閱讀全文 >

• CSS, HTML, Vue.js, 基礎, 教學Tutorial

Vue.js入門：製作iOS風格的動態月曆與待辦清單網頁

手機裡的動態月曆．只消一指就可以增加或是刪除行程，有想過要怎麼在網頁上實現嗎？老闆利用簡單的動態網頁範例和步驟解說，帶你一步步踏進Vue.js的世界。

• 2021 / 08 / 16

• 閱讀全文 >

• CSS, HTML, Vue.js, 基礎, 教學Tutorial

Vue.js入門：完成懷舊的井字圈叉遊戲動態網頁

小時候都玩過圈圈叉叉的遊戲，隨手畫個井字就可以與玩伴鬥智，這次我們要利用Pug、Sass及Vue.js製作出這款動態小遊戲網頁啦！

• 2021 / 08 / 10

• 閱讀全文 >

• Animation, CSS, HTML, Vue.js, 基礎, 教學Tutorial

利用Pug(HTML)、Sass(CSS)及Vue.js製作動態時間軸年表（直播筆記）

不論個人或是品牌，都需要讓網站造訪者快速暸解你的歷史發展，時間軸年表是一個常見且好用的表示方法。利用Pug(HTML)、Sass(CSS)及Vue.js製作出一個屬於你的動態時間軸年表吧！

• 2021 / 08 / 04

• 閱讀全文 >

• D3.js, Data visualization, 教學Tutorial

用D3.js製作視覺化的日常作息方塊圖（直播筆記）

D3.js工具可以把大筆的資料視覺化呈現於網頁上，本篇文章利用淺顯易懂的解說，一步步寫出如同Google日曆般的日常生活作息方塊圖。

• 2021 / 07 / 23

• 閱讀全文 >

• p5.js, 教學Tutorial

【p5.js創作教學】Quantum Unstable 量子不穩定 – 發光糾纏的量子系統

利用p5.js製作出變形的同心圓動態，沒有特別的創作點子時就隨意調整、利用不同的變數增加變化，終究會等到那個靈光一閃，增加許多畫龍點睛的細節，打造出科技HUD風格的量子系統作品《量子不穩定Quantum Unstable》

• 2021 / 07 / 19

• 閱讀全文 >

• Vue.js, 教學Tutorial, 進階

用Vue.js做快速換色與整理的便利貼牆吧！（下）（直播筆記）

需要發想靈感、紀錄個人代辦清單，或和他人討論嗎？製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁，多個願望一次滿足。下集將便利貼牆美化、功能變得更完善，更連結firebase即時資料庫，再多張便利貼也不怕。

• 2021 / 07 / 09

• 閱讀全文 >

• HTML, Vue.js, 教學Tutorial, 進階

用Vue.js做快速換色與整理的便利貼牆吧！（上）（直播筆記）

需要發想靈感、紀錄個人代辦清單，或和他人討論嗎？製作一個能夠自由編輯、增刪、變色、拖曳編排的便利貼牆網頁，多個願望一次滿足。上集我們使用Pug、Sass及Vue.js刻出便利貼的基本功能。

• 2021 / 07 / 05

• 閱讀全文 >

• Vue.js, 基礎, 教學Tutorial

使用Vue.js建立一個sass色票卡視覺化網頁（直播筆記）

寫網頁的時候，單看sass變數的程式碼，會不知道色碼是不是合適的嗎？老闆帶你一小時就能利用Vue.js快速建立好視覺化色票卡小工具。文章會從一開始雛型的設計稿發想，一步步教你如何完成工具。

• 2021 / 06 / 25

• 閱讀全文 >

• p5.js, 基礎, 教學Tutorial

【p5.js創作教學】Aqua Planet 水色星球 – 來製作發光碰撞的行星吧！（直播筆記）

利用p5.js程式一步步創作出會發光的水色星球粒子，並且增加弧形軌跡、連線、外圍刻度尺規等細節，讓整件作品完整且耐人尋味。

• 2021 / 06 / 21

• 閱讀全文 >

• p5.js, 教學Tutorial

【p5.js創作教學】來畫一個瘋狂的龍捲風吧！（直播筆記）

身為台灣人可能沒親眼看過龍捲風，但也大概它知道長甚麼樣子，威力又有多強大。今天我們要利用p5.js來完成瘋狂的龍捲風捲起乳牛與房屋的一張動態圖片。

• 2021 / 06 / 04

• 閱讀全文 >

• p5.js, 基礎, 教學Tutorial

用p5.js玩創作，讓小機器人動起來！哲宇的互動藝術體驗（直播筆記）

Creative Coding並沒有你想像中的複雜，本篇文章將循序漸進地帶領你用p5.js慢慢畫出會動的機器人，並使用時間參數及亂數大量複製，加上與滑鼠的互動，成為一幅可愛的互動藝術作品。再加碼收錄老闆於直播時的Q&A，邀請你一同進入互動藝術創作程式的世界。

• 2021 / 06 / 01

• 閱讀全文 >

• Animation, canvas, 基礎, 教學Tutorial

來用可怕的三角函數做網頁吧! -Part 2科幻時鐘（直播筆記）

上一篇中，老闆利用三角函數幫 DOM 做 CSS 的絕對定位，這次我們雖然也是使用三角函數，但是改使用 canvas 在網頁上繪圖，製作科幻效果的時鐘。

• 2021 / 05 / 14

• 閱讀全文 >

• Animation, CSS, 教學Tutorial

來用可怕的三角函數做網頁吧! – Part 1 衛星繞月球（直播筆記）

• 2021 / 05 / 10

• 閱讀全文 >

• p5.js, 基礎, 教學Tutorial

跟貓借一隻手：召喚效率小幫手－變數（互動藝術創作分享教學）

• 2021 / 05 / 05

• 閱讀全文 >

• 基礎, 教學Tutorial

JS及網頁的模板好夥伴：Canvas sketch入門

• 2021 / 04 / 30

• 閱讀全文 >

• Animation, Vue.js, 基礎, 教學Tutorial

讓我們來快速寫個漂浮感的輪播吧！動態網頁程式教學（直播筆記）

• 2021 / 04 / 26

• 閱讀全文 >

• Animation, p5.js, 基礎, 教學Tutorial

圖形繪製與色彩：從點線面開始的世界（互動藝術創作分享教學）

• 2021 / 04 / 21

• 閱讀全文 >

• Animation, p5.js, 教學Tutorial

【p5.js創作教學】電波電路Wave Circuit – 來做個逼哩逼哩送訊號的電路吧！（直播筆記）

• 2021 / 04 / 16

• 閱讀全文 >

• 基礎, 教學Tutorial

基礎JS物件導向教學（直播筆記）

• 2021 / 03 / 31

• 閱讀全文 >

• Animation, p5.js, 教學Tutorial

【p5.js 創作教學】 色散海葵（直播筆記）

• 2021 / 01 / 25

• 閱讀全文 >

• Animation, CSS, Vue.js, 教學Tutorial

來做SVG動畫讓蔥油餅翻滾吧! （下）：讓場景中的元件動起來（直播筆記）

• 2021 / 01 / 15

• 閱讀全文 >

• Animation, Vue.js, 教學Tutorial

來做SVG動畫讓蔥油餅翻滾吧! （上）：發想素材、將素材引入網頁（直播筆記）

• 2021 / 01 / 15

• 閱讀全文 >

• Animation, D3.js, Data visualization, Vue.js, 教學Tutorial

資料視覺化的動態長條圖製作（下）：Vue/ D3（直播筆記）

• 2021 / 01 / 12

• 閱讀全文 >

• Animation, Data visualization, 教學Tutorial

資料視覺化的動態長條圖製作（上）：jQuery（直播筆記）

• 2021 / 01 / 06

• 閱讀全文 >

• Animation, p5.js, 基礎, 教學Tutorial

p5.js 快速上手：互動網頁教學

• 2020 / 04 / 24

• 閱讀全文 >

• Case study, CSS, Vue.js, 教學Tutorial

讓我們來做個互動天氣地圖吧！（直播筆記）

• 2020 / 03 / 28

• 閱讀全文 >

• Socket.io, 教學Tutorial

用 Socket.io 做一個即時聊天室吧！（直播筆記）

• 2020 / 03 / 25

• 閱讀全文 >

• Animation, canvas, CSS, 教學Tutorial

老闆的網頁實驗室#2－實作 Canvas 遮罩動畫

• 2020 / 03 / 06

• 閱讀全文 >

• Animation, CSS, 教學Tutorial

老闆的網頁實驗室 #1 — 實作CSS拆字動畫

• 2020 / 03 / 06

• 閱讀全文 >