iT邦幫忙

html相關文章
共有 855 則文章
鐵人賽 Modern Web DAY 29

技術 Day 29:組件集大成

功能實作 : Demo 一、前言 今天的目標是將現有的組件組成一個 SPA 網頁,最終目標是先把網頁寫出來,至於優化和除錯的部分,就要等整個功能都實作出來...

鐵人賽 自我挑戰組 DAY 28

技術 Day 28:前端測試入門

一、前言 測試是前端裡面的一個重要單元,雖然說很重要,但是在一般的練習專案中,不會特別的去撰寫測試單元,自然就不會去研究相關的資料。趁這次鐵人賽的機會,來好好...

鐵人賽 Modern Web DAY 27

技術 Postman challenge Day 26 - HTML解析 (Parse HTML response)

今日主題 今天的主題是前面章節Using libraries的延伸應用,我們將會使用Postman來解析HTML的內容。在開始之前,記得先把Day 26: Pa...

鐵人賽 Modern Web DAY 28

技術 Day 28:置中功能實作

功能實作 : Demo 一、前言 本篇主要在探討「各種 CSS 置中排版的技巧」,這些技巧主要是參考 Amos 大的「CSS垂直置中技巧,我只會23個,你...

鐵人賽 自我挑戰組 DAY 27

技術 Day 27:React 的 Hook - 概觀

一、前言 Hook 的東西不太可能用幾篇就可以全部介紹完畢,所以在這邊先列出一些使用 Hook 時可能要注意的地方,再慢慢將這些知識點給補上。在第二章節介紹...

鐵人賽 Modern Web DAY 27

技術 Day 27:CSS 選擇器功能實作

組件實作 : Demo 一、前言 今天要來實作CSS Selectors(選擇器),選擇器的最主要用途,就是讓 CSS 可以更精準的選取到想要的元素,如果...

鐵人賽 自我挑戰組 DAY 26

技術 Day 26:最有生產力的一年,價值,就從認識自己開始

一、前言 今天來談談一些比較輕鬆的話題,由於國慶日放假陪伴家人,我就沒有去研究 React 的相關用法。雖然這篇不是純技術的文章,但是應該會是一個很好的經驗談...

鐵人賽 Modern Web DAY 26

技術 Day 26:Flexbox 功能實作

組件實作 : Demo 一、前言 今天要來研究一下 Flexbox 的寫法,它是一個用來排版的神器,可以很有效的處理元素水平與垂直置中對齊,本篇主要是參考...

鐵人賽 自我挑戰組 DAY 25

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

技術 Day 24:Scroll 組件實作

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

鐵人賽 自我挑戰組 DAY 24

技術 Day 24:React 的 Hook 初探

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

技術 實踐拖曳功能

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

鐵人賽 Modern Web DAY 23

技術 Day 23:Image Overlay 組件實作

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

鐵人賽 自我挑戰組 DAY 23

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

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

鐵人賽 自我挑戰組 DAY 22

技術 Day 22:SVG Path 急速入門

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

鐵人賽 自我挑戰組 DAY 21

技術 Day 21 RWD回應式設計

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 自我挑戰組 DAY 29

技術 [Day 29] Checklist: 打個勾勾完賽吧

很快地,今天來到了第29天,我們來實作Day #27 Checklist CodePen: https://codepen.io/stevetanus/pen/...

鐵人賽 自我挑戰組 DAY 29

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

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

鐵人賽 自我挑戰組 DAY 21

技術 Day 21:小作品展示

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

鐵人賽 Modern Web DAY 21

技術 Day 21:List 功能實作

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

鐵人賽 自我挑戰組 DAY 20

技術 Day 20 HTML+CSS 網頁初版挑戰(下)

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

鐵人賽 Modern Web DAY 20

技術 Day 20:AJAX 功能實作

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

鐵人賽 自我挑戰組 DAY 20

技術 Day 20:Sass 學習筆記

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

鐵人賽 自我挑戰組 DAY 19

技術 Day 19 HTML+CSS 網頁初版挑戰(上)

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

鐵人賽 自我挑戰組 DAY 27

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

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

鐵人賽 Modern Web DAY 19

技術 Day 19 - 正式開發 Side project

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

鐵人賽 自我挑戰組 DAY 27

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

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

鐵人賽 Modern Web DAY 19

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

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