學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程
閱讀時間約 1 分鐘
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/
為什麼會看到廣告
12會員
32內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
現代教育強調創新教學法，家庭教育中也可應用這些方法來激發孩子的學習興趣，本文將分享如何在家庭中使用翻轉教室和STEM教育等方法。
應用翻轉教室
讓孩子在家中預習學習材料，課後進行討論和實踐。
引入STEM教育
在家庭中進行簡單的科學實驗和工程項目。
鼓勵自主學習
-
「第一大腦儲存事物與概念的記憶，是分佈式儲存在一個龐大的神經網路。」
這好像蠻有道理，也解釋了寫作的時候，感覺很多回憶透過寫著寫著都連結起來。
所以，其實很多想法就在我們的腦子裡，但要怎麼有效將這些想法叫回來不容易。
我研究卡片盒筆記法收穫最大的，是把想法編號做索引的這個操作。
有些人20歲時就死了，只是等80歲才埋葬。
你可能有聽過這句很有名的名言，看看自己和身邊的人，是不是已經停止前進了呢？
自從疫情改變了學校教學的狀態以後，多元化的教學媒材也紛紛滲入教育之中。既然讓孩子接觸多媒體已經是無法阻止的事實，透過科技來輔助教師分析學生的學習狀況，又何嘗不是一件好事呢？這篇文章想要分享這兩年我是如何打造我的智慧教室，也會提及我如何運用科技來輔助教學、診斷學生的學習。
經歷過疫情以後，我們透過遠距線上教學實現學習的可能性，有越來越多的人了解到學校與文憑不是學習唯一管道，現在我們在自主學習的路上多了一個工具：ChatGPT。
這篇文章是我重點吸收《超速學習》一書如何做的部分，結合ChatGPT，加上我自己實際應用過後的心得，希望可以把它化為一個簡單且實用的方法與步
本文章介紹了間隔重複的概念，並說明了有哪些程式可以透過間隔重複來提高學習和記憶的效率，並提醒讀者要保持彈性，最後在文章結尾附上了間隔重複相關的科學論文。
生活跟工作當中，我們常常運用書籍閱讀、生活觀察、網路搜尋來做情報的蒐集，要提高情報蒐集的品質要做到速度、深度、廣度三點。
➊速度：運用關鍵字搜尋，並且要搜尋第一手資訊。
➋深度：做好主題式學習，內容要多樣性且高價值。
➌廣度：連結生活與工作，提煉案例並作回饋分析。
本文章介紹了遺忘曲線和間距效應的概念，並說明了如何利用這兩個心理學原理來提高學習和記憶的效率。我分享了使用Memory Helper這個App來設定複習時間的經驗，並提醒讀者要保持彈性和自我寬容。
有的自閉症者管到無極限，有的自閉症者完全事不關己。
因此，要用自閉症者的學習方式，協助自閉症者見到人際界線。
視覺自閉症者用社交情境故事圖卡，聽覺自閉症者以討論分析狀況為主
之前的文章，有提到用因果關係進行。
而前提是，那是解決事不關己的自閉症者用的。
這次，我想補充的，是管到無極限的自閉症者，進行
最近的土耳其敍利亞大地震，因人手不夠，台灣的搜救隊進行回報。
因為台灣的九二一大地震，土耳其搜救隊有前來支援。
而在防震知識不斷更新，除了第一時間協助自閉症者更新防震知識，也要用自閉症者的方式，進行學習。
視覺自閉症者要用圖卡配對，聽覺自閉症者要進行聽指令
目前最近的防震措施，是〝趴、扶、穩〞。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
現代教育強調創新教學法，家庭教育中也可應用這些方法來激發孩子的學習興趣，本文將分享如何在家庭中使用翻轉教室和STEM教育等方法。
應用翻轉教室
讓孩子在家中預習學習材料，課後進行討論和實踐。
引入STEM教育
在家庭中進行簡單的科學實驗和工程項目。
鼓勵自主學習
-
「第一大腦儲存事物與概念的記憶，是分佈式儲存在一個龐大的神經網路。」
這好像蠻有道理，也解釋了寫作的時候，感覺很多回憶透過寫著寫著都連結起來。
所以，其實很多想法就在我們的腦子裡，但要怎麼有效將這些想法叫回來不容易。
我研究卡片盒筆記法收穫最大的，是把想法編號做索引的這個操作。
有些人20歲時就死了，只是等80歲才埋葬。
你可能有聽過這句很有名的名言，看看自己和身邊的人，是不是已經停止前進了呢？
自從疫情改變了學校教學的狀態以後，多元化的教學媒材也紛紛滲入教育之中。既然讓孩子接觸多媒體已經是無法阻止的事實，透過科技來輔助教師分析學生的學習狀況，又何嘗不是一件好事呢？這篇文章想要分享這兩年我是如何打造我的智慧教室，也會提及我如何運用科技來輔助教學、診斷學生的學習。
經歷過疫情以後，我們透過遠距線上教學實現學習的可能性，有越來越多的人了解到學校與文憑不是學習唯一管道，現在我們在自主學習的路上多了一個工具：ChatGPT。
這篇文章是我重點吸收《超速學習》一書如何做的部分，結合ChatGPT，加上我自己實際應用過後的心得，希望可以把它化為一個簡單且實用的方法與步
本文章介紹了間隔重複的概念，並說明了有哪些程式可以透過間隔重複來提高學習和記憶的效率，並提醒讀者要保持彈性，最後在文章結尾附上了間隔重複相關的科學論文。
生活跟工作當中，我們常常運用書籍閱讀、生活觀察、網路搜尋來做情報的蒐集，要提高情報蒐集的品質要做到速度、深度、廣度三點。
➊速度：運用關鍵字搜尋，並且要搜尋第一手資訊。
➋深度：做好主題式學習，內容要多樣性且高價值。
➌廣度：連結生活與工作，提煉案例並作回饋分析。
本文章介紹了遺忘曲線和間距效應的概念，並說明了如何利用這兩個心理學原理來提高學習和記憶的效率。我分享了使用Memory Helper這個App來設定複習時間的經驗，並提醒讀者要保持彈性和自我寬容。
有的自閉症者管到無極限，有的自閉症者完全事不關己。
因此，要用自閉症者的學習方式，協助自閉症者見到人際界線。
視覺自閉症者用社交情境故事圖卡，聽覺自閉症者以討論分析狀況為主
之前的文章，有提到用因果關係進行。
而前提是，那是解決事不關己的自閉症者用的。
這次，我想補充的，是管到無極限的自閉症者，進行
最近的土耳其敍利亞大地震，因人手不夠，台灣的搜救隊進行回報。
因為台灣的九二一大地震，土耳其搜救隊有前來支援。
而在防震知識不斷更新，除了第一時間協助自閉症者更新防震知識，也要用自閉症者的方式，進行學習。
視覺自閉症者要用圖卡配對，聽覺自閉症者要進行聽指令
目前最近的防震措施，是〝趴、扶、穩〞。