學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程

JayLinXR-avatar-img
JayLinXR
發佈於軟體開發
更新 發佈閱讀 2 分鐘

Part 1 - 初步介紹編譯器使用以及HTML5 | CSS

初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3

學習重點:

  • 編譯器 (Visual Studio Code)介紹
  • 如何從設計檔案轉到程式碼
  • 路徑和架構介紹



Part 2 - 優化你的HTML5 | CSS

上一集Jay帶你來做個NFT卡片用HTML5 & CSS3，這次教你如何優化你的CSS3

學習重點:

  • 優化你的程式碼
  • CSS3架構以及排版



Part 3 - 學習CSS3動畫效果

在優化你的CSS3後，這集教你如何做CSS3動畫效果

學習重點:

  • 如何用CSS3製作動畫效果




Part 4 - 學習響應式設計(Responsive Design)

這集教大家關於響應式設計概念以及如何實作在NFT卡片上

學習重點:

  • 響應式設計(Responsive Design) 重要性
  • 如何實施響應式設計在NFT卡片專案上



總結

JayLin希望透過這四集影片介紹，你能更了解編譯器使用

HTML5和CSS3有趣的玩法😃

  • HTML5和CSS3架構
  • 優化你的專案
  • CSS3動畫效果
  • 響應式設計(Responsive Design)

更多相關教學文章

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/


JayLinXR軟體開發
留言
avatar-img
留言分享你的想法！
avatar-img
JayLinXR
13會員
39內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
JayLinXR的其他內容
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
Celine 寫在這裡
香氛藝術家 sunkronizo perfume︱以香氛同步日常節奏的台灣獨立調香師品牌
嶄新的台灣獨立調香師品牌Sunkronizo ，這個名稱源自希臘語「同步」的意思。讓香氛不單純只是氣味調製，更是個人風格的展現與靈魂意志延伸的一種溝通語言。 很適合接下來年底聖誕佳節送禮的試香組，以一星期中的日子來為全系列香氛產品命名， 是品牌創立後首個推出全系列概念作品...
#香水#香水評論#試香
Thumbnail
avatar-avatar
Celine 寫在這裡
香氛藝術家 sunkronizo perfume︱以香氛同步日常節奏的台灣獨立調香師品牌
嶄新的台灣獨立調香師品牌Sunkronizo ，這個名稱源自希臘語「同步」的意思。讓香氛不單純只是氣味調製，更是個人風格的展現與靈魂意志延伸的一種溝通語言。 很適合接下來年底聖誕佳節送禮的試香組，以一星期中的日子來為全系列香氛產品命名， 是品牌創立後首個推出全系列概念作品...
#香水#香水評論#試香
Thumbnail
avatar-avatar
awwrated的沙龍
【編輯現場】當世界都想看台灣故事：VOD 串流如何引爆下一個「台流」？
根據美國電影協會（MPA）主辦的「串流服務如何推動臺灣創意經濟」論壇內容，深入探討串流平臺對臺灣影視產業的影響、數據分析、政府政策建議、內容國際化策略，以及臺灣與「韓流」的差距。文章提出 awwrated 在串流生態系中的潛在角色，強調數據、策略與自信是臺灣影視產業發展的關鍵。
#awwrated#Netflix#NETFLIX影集
Thumbnail
avatar-avatar
awwrated的沙龍
【編輯現場】當世界都想看台灣故事：VOD 串流如何引爆下一個「台流」？
根據美國電影協會（MPA）主辦的「串流服務如何推動臺灣創意經濟」論壇內容，深入探討串流平臺對臺灣影視產業的影響、數據分析、政府政策建議、內容國際化策略，以及臺灣與「韓流」的差距。文章提出 awwrated 在串流生態系中的潛在角色，強調數據、策略與自信是臺灣影視產業發展的關鍵。
#awwrated#Netflix#NETFLIX影集
Thumbnail
avatar-avatar
月刊龍貓大王通信
進入串流大戰第二階段！台灣影視作品如何透過全球VOD平台對外發聲？這是來自美國電影協會的觀察
本文探討串流平臺（VOD）如何徹底改變好萊塢和臺灣影視產業的生態。從美國電影協會（MPA）的數據報告，揭示串流服務在臺灣的驚人普及率與在地內容的消費趨勢。文章分析國際作品如何透過在地化元素開拓新市場。同時，作者也擔憂政府過度監管可能扼殺臺灣影視創新自由，以越南為鑑，呼籲以開放態度擁抱串流時代的新機遇
#電影產業#全球在地化#串流平台
Thumbnail
avatar-avatar
月刊龍貓大王通信
進入串流大戰第二階段！台灣影視作品如何透過全球VOD平台對外發聲？這是來自美國電影協會的觀察
本文探討串流平臺（VOD）如何徹底改變好萊塢和臺灣影視產業的生態。從美國電影協會（MPA）的數據報告，揭示串流服務在臺灣的驚人普及率與在地內容的消費趨勢。文章分析國際作品如何透過在地化元素開拓新市場。同時，作者也擔憂政府過度監管可能扼殺臺灣影視創新自由，以越南為鑑，呼籲以開放態度擁抱串流時代的新機遇
#電影產業#全球在地化#串流平台
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day2：語法
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day2：語法
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
#CSS
Thumbnail
avatar-avatar
JayLinXR
學習React.js - 如何開發一個組件(Component)
React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習React.js - 如何開發一個組件(Component)
React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁
當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel
#網站#伺服器#教學
Thumbnail
avatar-avatar
JayLinXR
JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁
當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel
#網站#伺服器#教學
Thumbnail
avatar-avatar
JayLinXR
學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
#學習#教學#程式
Thumbnail
avatar-avatar
JayLinXR
學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
#學習#教學#程式
Thumbnail
avatar-avatar
JayLinXR
深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
#教學#文章#nextjs
Thumbnail
avatar-avatar
JayLinXR
深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
#教學#文章#nextjs
Thumbnail
avatar-avatar
JayLinXR
安裝Google字型到Next.js 教學
當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
#教學#軟體#設計
Thumbnail
avatar-avatar
JayLinXR
安裝Google字型到Next.js 教學
當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
#教學#軟體#設計
Thumbnail
avatar-avatar
JayLinXR
學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程
介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3
#學習#NFT#區塊鏈
Thumbnail
avatar-avatar
JayLinXR
學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程
介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3
#學習#NFT#區塊鏈
Thumbnail
avatar-avatar
王聖禮的沙龍
基礎HTML學習筆記
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
avatar-avatar
王聖禮的沙龍
基礎HTML學習筆記
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
avatar-avatar
Err500
由小專案學程式--Color Flipper
在youtube上找尋前端的小專案來練習，就發現了這個不是很難，又可以讓我練習怎麼把javascript用在網頁裡的專案，於是就跟者影片做了一遍。當然，比起前一個寫遊戲的影片來說，可以說是輕鬆很多。
#網頁設計#程式語言#學習記錄
Thumbnail
avatar-avatar
Err500
由小專案學程式--Color Flipper
在youtube上找尋前端的小專案來練習，就發現了這個不是很難，又可以讓我練習怎麼把javascript用在網頁裡的專案，於是就跟者影片做了一遍。當然，比起前一個寫遊戲的影片來說，可以說是輕鬆很多。
#網頁設計#程式語言#學習記錄
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News