iT邦幫忙

好想工作室相關文章
共有 217 則文章
鐵人賽 Modern Web DAY 26
新手也能懂的JS30 系列 第 26

技術 JS30-Day26-Stripe Follow Along Nav

Day26-課題內容 在今天的課題當中,我們要將第22天的課題 Follow Along Link HighLighter 聚光燈的效果,做進一步的利用。 當我...

鐵人賽 Modern Web DAY 25

技術 Day25:小事之 CSS 偽元素 與 content Property

W3C 寫道:content 屬性與 ::before 和 ::after 一起使用在文檔中生成內容。 因此,使用 ::before 和 ::after 一定要...

鐵人賽 Modern Web DAY 25
新手也能懂的JS30 系列 第 25

技術 JS25-Event Capture, Propagation, Bubling & Once

Day25-課題內容 在今天的課題當中,我們要針對常用的 EventTarget.addEventListener 做進一步的認識。[1] EventTarge...

鐵人賽 Modern Web DAY 24

技術 Day24:小事之 CSS 偽類 與 偽元素

先來個比較表 . 符號 . . 作用 偽類 : 不是元素 不會出現在 DOM tree 用於定義元素的特殊狀態 偽元素 :: 是元素 會出現在...

鐵人賽 Modern Web DAY 24
新手也能懂的JS30 系列 第 24

技術 JS30-Day24-Sticky Nav

Day24-課題內容 進入JS30的倒數第七天,今天將透過捲動事件加上 CSS屬性的更動,讓我們的導覽列在即將滾出畫面的時候,可以固定在畫面最上方,而不會消失在...

鐵人賽 Modern Web DAY 23

技術 Day23:小事之 CSS hacks

在各家瀏覽器開始出現的時候,除了不同瀏覽器與 IE 各版本間的不相容需要使用 reset.css 或 normalize.css 來進行最初的調整之外,最讓人頭...

鐵人賽 Modern Web DAY 23
新手也能懂的JS30 系列 第 23

技術 JS30-Day23-Speech Synthesis

Day23-課題內容 在第20天的課題當中,我們透過 Web API 中的 SpeechRecognition 介面,將輸入的聲音轉成字串。而今天我們要透過另一...

鐵人賽 Modern Web DAY 22

技術 Day22:小事之 Media Query

Media Queries 中文翻為『媒體查詢』,作用在偵測輸出裝置,它是由一個媒體類型(media type)與零到多個用於檢查特定條件的媒體功能(media...

鐵人賽 Modern Web DAY 22
新手也能懂的JS30 系列 第 22

技術 JS30-Day22-Follow Along Nav

Day22-課題內容 在今天的課題當中,我們要透過滑鼠事件屬性以及 CSS 屬性,在頁面上做出聚光燈。[1] 實作連結 Element.getBoundingC...

鐵人賽 Modern Web DAY 21

技術 Day21:小事之 CSS Reset 與 CSS normalize

為什麼會想介紹 CSS Reset 與 CSS normalize ? 因為在很久很久以前(喂~)。咳!重來。 在 W3C 制訂 HTML 與 CSS 規格時,...

鐵人賽 Modern Web DAY 21
新手也能懂的JS30 系列 第 21

技術 JS30-Day21-Geolocation

Day21-課題內容 在今天的課題當中,我們要透過 Geolocation API,取得我們目前位置的經緯度。[1] 實作連結-大家可以把得到的經緯度貼在 go...

鐵人賽 Modern Web DAY 30
前端新手村 系列 第 30

達標好文 技術 前端新手村 系列目錄

系列目錄 初衷是想寫給新手的一些正確觀念,以及這一路以來脫離新手的重要觀念。對我來說的過程,是 30 天的 w3.org 之旅。幾乎一天一篇,很過癮,也很辛苦。...

鐵人賽 Modern Web DAY 20

技術 Day20:小事之 CSS 權重 (css specificity)

在學習 CSS 的時候,一定會先認識什麼是 html element、什麼是 class、什麼是 id,什麼是 css 的 inline 寫法。了解基本的 cs...

鐵人賽 Modern Web DAY 20
新手也能懂的JS30 系列 第 20

技術 JS30-Day20-Speech Detection

Day20-課題內容 在昨天的課題中我們玩了一下視訊鏡頭,今天要來玩一下麥克風聲控![1] 實作連結 Speech Recognition 透過 Web Spe...

鐵人賽 Modern Web DAY 29
前端新手村 系列 第 29

技術 前端新手村 Animations (下)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 19
新手也能懂的JS30 系列 第 19

技術 JS30-Day19-Webcam Fun

Day14-課題內容 在今天的課題當中,我們要將鏡頭攝影機所取得的影像資料,轉到 canvas 的畫布上,再將 canvas 上的像素資料透過一些方法,將我們的...

鐵人賽 Modern Web DAY 19

技術 Day19:小事之 Google form 的運用

會使用 Google form 是因為在做簡易的網站時,如果需要聯絡我們之類的表單,又不想要麻煩工程師,那麼使用 Google form 會是一個很方便的方式。...

鐵人賽 Modern Web DAY 28
前端新手村 系列 第 28

技術 前端新手村 Animations (上)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 18

技術 Day18:小事之 HTML form

在整個網站裡,form 表單會出現在不少地方,最常看到的是在聯絡我們那頁。 以聯絡我們來舉例,基本的表單如下: <form action="&q...

鐵人賽 Modern Web DAY 18
新手也能懂的JS30 系列 第 18

技術 JS30-Day18-Add Up Times with Reduce

Day18-課題內容 進入JS30的第十八天,今天的課題中,我們也要來處理陣列中的資料, 而這次處理的資料對象為時間,我們要將每個元素的時間加總起來。[1] 進...

鐵人賽 Modern Web DAY 27
前端新手村 系列 第 27

技術 前端新手村 Animations (前傳)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 17

技術 Day17:小事之 HTML table responsive

Table 很方便用來做資料的呈現,但是當需要在各種裝置都能正常顯示的情況下,Table 的使用就很讓人傷腦筋了。 比較常用的 Table RWD 方式有兩種:...

鐵人賽 Modern Web DAY 17
新手也能懂的JS30 系列 第 17

技術 JS30-Day17-Sort Without Articles

Day17-課題內容 進入JS30的第十七天,今天要將陣列中的資料做排序的動作。[1] 進入JS30-Day17 在草稿中作者已經給了一個陣列內容,我們的目的是...

鐵人賽 Modern Web DAY 26
前端新手村 系列 第 26

技術 前端新手村 @import 開心的結構化 CSS

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 16

技術 Day16:小事之 HTML table

HTML <table> 元件代表表格數據──換句話說,就是透過二維資料表來呈現資訊。 早期 table 是同時拿來做網站排版與資料呈現,在 htm...

鐵人賽 Modern Web DAY 16
新手也能懂的JS30 系列 第 16

技術 JS30-Day16-Mouse Move Shadow

Day16-課題內容 轉眼間我們的 JS30 之路已經完成一半了! 今天要來實作一個頁面的影分身之術。在頁面剛開啟時,只有中間一個字串'影分身之術!!',但是當...

鐵人賽 Modern Web DAY 25
前端新手村 系列 第 25

技術 前端新手村 都市傳說之body範圍

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 15

技術 Day15:小事之 HTML 語意化標籤 下篇

html5 Doctor 曾經釋出過下面這個圖,用來幫助你選擇最符合語義的 HTML5 元素。[1] 今天就跟著這張表來看看幾個最常用的 HTML5 標籤該怎...

鐵人賽 Modern Web DAY 15
新手也能懂的JS30 系列 第 15

技術 JS30-Day15-LocalStorage

Day15-課題內容 今天我們要將資料從頁面中的程式碼儲存到Web瀏覽器的儲存空間當中。如此一來,本來存入程式碼當中的資料,就不會因重新整理頁面或者關閉瀏覽器而...

鐵人賽 Modern Web DAY 30

技術 Day30:: 從零開始的jQuery學習紀錄 -完-

符合條件的元件集合/jQuery選取 當你選取一個或多個元件,會回傳一個jQuery物件:一般稱此物件為一個符合條件的元件集合或一個jQuery選取。 單一選取...