###### tags: `學期一` # 學期一 W2 【選修】Devtool 挑戰 [Toc] ## 【選修】學習挑戰 —— 用 Devtool 做出你的感謝卡！ 🔔 小提醒：請先確認本週進度的章節 & 作業內容都已完成，有額外的時間再來參與挑戰哦！ 這週我們進入了介面的世界，又看完[學長姐跟你說](https://lighthouse.alphacamp.co/courses/39/units/7535)這個單元後，對網頁介面和 Devtool 這個小工具應該稍有概念了。 在前面的[選修挑戰](https://lighthouse.alphacamp.co/courses/39/units/28609)中，大家用 javascript 迴圈刻出你的感謝並送給了親朋好友；而這次的挑戰，我們來用 Devtool 修改出一個更有畫面、更有感覺的感謝卡片吧！ 以下是卡片範例 ↓ <div style="display: flex; width: 100%; justify-content: center;"> <img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22339/thanks.png"> </div> 接著，就換你來做出賀卡啦！ **Step 1.** 點開 [賀卡範例](https://codepen.io/alpha-camp/full/OJEboWp)、打開 Devtool 觀察網頁結構 <!-- 編輯檔 https://codepen.io/alpha-camp/pen/MWGQWKg --> **Step 2.** 找出哪些地方可以修改、置換插圖和文字 👉 補充：可以使用的素材庫 - 底圖素材網路資源： - [Magic pattern](https://www.magicpattern.design/tools/css-backgrounds) - [Grabient](https://cssgradient.io/gradient-backgrounds/) - 插圖素材： - [紅楓葉](https://assets-lighthouse.alphacamp.co/uploads/image/file/22338/maple-leaf.png) - [黃楓葉](https://assets-lighthouse.alphacamp.co/uploads/image/file/22335/leaf.png) - [小花 (1) ](https://assets-lighthouse.alphacamp.co/uploads/image/file/22334/pink-cosmos.png) - [小花 (2)](https://assets-lighthouse.alphacamp.co/uploads/image/file/22333/iris.png) - [花束](https://assets-lighthouse.alphacamp.co/uploads/image/file/22332/bouquet.png) - [紅心](https://assets-lighthouse.alphacamp.co/uploads/image/file/22331/heart.png) - [愛心](https://assets-lighthouse.alphacamp.co/uploads/image/file/22330/hearts.png) - [手指比心](https://assets-lighthouse.alphacamp.co/uploads/image/file/22328/heart__1_.png) - [high-five](https://assets-lighthouse.alphacamp.co/uploads/image/file/22329/high-five.png) 你可以複製以上的圖片連結，置換到頁面中。如果覺得以上素材都不符合你的需求，也歡迎自行上傳圖檔。以目前同學在學期 1 的階段，尚未接觸到本地開發工具，建議可以先使用網路免費的照片上傳空間 (如：[imgur](https://imgur.com/)、[upload.cc](https://upload.cc/) 等)，有了圖片連結後，就可以置換範例中的圖片，做出自己想要的頁面了！ <!-- 不過如果有額外的時間想先接觸本地開發，嘗試本地圖片嵌入的話，也可以先稍微了解，推薦同學參考這篇 MDN：https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML --> **Step 3.** 修改完成後截圖、傳給親朋好友，並別忘了回到這個頁面下方留言處： - 貼上你的賀卡截圖，和同學們分享 - 分享你的朋友們看到賀卡後的回應 - 分享你在製作過程中的感受！ 還有時間的話，也歡迎留言分享你觀摩同學作品後的回饋，給彼此一些鼓勵吧！ 另外也補充，這個挑戰目標是先讓同學試著熟悉 Devtool，去觀察網頁、熟悉前端頁面的結構，若對於自己做出來的卡片的排版、圖片大小有不夠滿意的地方，還不用太著急！你可以查詢 css 相關語法，或者在下週及學期 2-1 的課程中，我們就將帶大家進入更細節的切版、排版技巧囉！ 期待在底下留言區看到大家的卡片！ ☺️ <div style="font-size: 14px; color: #088696; text-height:13px; margin: 0 5px 0 15px;"> <ul style="list-style-type:none; margin-bottom:2px; text-indent : -38px ;"> <p>註 ：AC 保有公開分享同學作品於 Lighthouse、官網、FB 等管道使用之權利。</p> </ul> </div> ## 【選修】學習挑戰 —— 用 Devtool 做出你的萬聖節卡片！ 🔔 小提醒：請先確認本週進度的章節 & 作業內容都已完成，有額外的時間再來參與挑戰哦！ 這週我們進入了介面的世界，又看完[學長姐跟你說](https://lighthouse.alphacamp.co/courses/39/units/7535)這個單元後，對網頁介面和 Devtool 這個小工具應該稍有概念了。 在前面的[選修挑戰](https://lighthouse.alphacamp.co/courses/39/units/28356)中，大家用 javascript 迴圈畫出一顆南瓜燈送給朋友；而這次的挑戰，我們來用 Devtool 修改出一個更有畫面、更有感覺的萬聖節卡片吧！ 以下是卡片範例 ↓ <div style="display: flex; width: 100%; justify-content: center;"> <img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22084/___2022-09-28___1.35.58.png"> </div> 接著，就換你來做出賀卡啦！ **Step 1.** 點開 [賀卡範例](https://cdpn.io/pen/debug/MWGQWKg?authentication_hash=XxMVwmyWeobr)、打開 Devtool 觀察網頁結構 <!-- 編輯檔 https://codepen.io/alpha-camp/pen/MWGQWKg --> **Step 2.** 找出哪些地方可以修改、置換插圖和文字 👉 補充：可以使用的素材庫 - 底圖素材網路資源： - [Magic pattern](https://www.magicpattern.design/tools/css-backgrounds) - [Grabient](https://cssgradient.io/gradient-backgrounds/) - 插圖素材： - [南瓜](https://assets-lighthouse.alphacamp.co/uploads/image/file/22077/pumpkin__1_.png) - [南瓜剪影](https://assets-lighthouse.alphacamp.co/uploads/image/file/22078/pumpkin.png) - [幽靈](https://assets-lighthouse.alphacamp.co/uploads/image/file/22076/ghost__2_.png) - [小幽靈](https://assets-lighthouse.alphacamp.co/uploads/image/file/22075/ghost__1_.png) - [嚇人幽靈](https://assets-lighthouse.alphacamp.co/uploads/image/file/22074/ghost.png) - [枯枝](https://assets-lighthouse.alphacamp.co/uploads/image/file/22081/tree.png) - [有南瓜的樹](https://assets-lighthouse.alphacamp.co/uploads/image/file/22082/dry-tree__1_.png) - [巫師帽](https://assets-lighthouse.alphacamp.co/uploads/image/file/22083/witch-hat.png) - [月亮](https://assets-lighthouse.alphacamp.co/uploads/image/file/21979/moon__1_.png) - [雲層](https://assets-lighthouse.alphacamp.co/uploads/image/file/21981/032-cloud.png) - [有雲層的月亮](https://assets-lighthouse.alphacamp.co/uploads/image/file/21982/002-moon.png) 你可以複製以上的圖片連結，置換到頁面中。如果覺得以上素材都不符合你的需求，也歡迎自行上傳圖檔。以目前同學在學期 1 的階段，尚未接觸到本地開發工具，建議可以先使用網路免費的照片上傳空間 (如：[imgur](https://imgur.com/)、[upload.cc](https://upload.cc/) 等)，有了圖片連結後，就可以置換範例中的圖片，做出自己想要的頁面了！ <!-- 不過如果有額外的時間想先接觸本地開發，嘗試本地圖片嵌入的話，也可以先稍微了解，推薦同學參考這篇 MDN：https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML --> **Step 3.** 修改完成後截圖、傳給親朋好友，並別忘了回到這個頁面下方留言處： - 貼上你的賀卡截圖，和同學們分享 - 分享你的朋友們看到賀卡後的回應 - 分享你在製作過程中的感受！ 還有時間的話，也歡迎留言分享你觀摩同學作品後的回饋，給彼此一些鼓勵吧！ 另外也補充，這個挑戰目標是先讓同學試著熟悉 Devtool，去觀察網頁、熟悉前端頁面的結構，若對於自己做出來的卡片的排版、圖片大小有不夠滿意的地方，還不用太著急！你可以查詢 css 相關語法，或者在下週及學期 2-1 的課程中，我們就將帶大家進入更細節的切版、排版技巧囉！ 期待在底下留言區看到大家的萬聖卡片！ ☺️ <div style="font-size: 14px; color: #088696; text-height:13px; margin: 0 5px 0 15px;"> <ul style="list-style-type:none; margin-bottom:2px; text-indent : -38px ;"> <p>註 ：AC 保有公開分享同學作品於 Lighthouse、官網、FB 等管道使用之權利。</p> </ul> </div> ## 【選修】學習挑戰 —— 用 Devtool 做出你的中秋賀卡！ 🔔 小提醒：請先確認本週進度的章節 & 作業內容都已完成，有額外的時間再來參與挑戰哦！ 這週我們進入了介面的世界，又看完[學長姐跟你說](https://lighthouse.alphacamp.co/courses/39/units/7535)這個單元後，對網頁介面和 Devtool 這個小工具應該稍有概念了。 在前面的[選修挑戰](https://lighthouse.alphacamp.co/courses/39/units/28356)中，大家用 javascript 迴圈畫出一隻可愛的月兔送給朋友；而這次的挑戰，我們來用 Devtool 修改出一個更有畫面的的中秋賀卡吧！ 以下是賀卡範例 <div style="display: flex; width: 100%; justify-content: center;"> <img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21995/___2022-08-30___3.44.05.png"> </div> 接著，就換你來做出賀卡囉 **Step 1.** 點開 [賀卡範例](https://codepen.io/alpha-camp/full/BarXwMV)、打開 Devtool 觀察網頁結構 <!-- 編輯檔 https://codepen.io/alpha-camp/pen/BarXwMV --> **Step 2.** 找出哪些地方可以修改、置換插圖和文字 👉 補充：可以使用的素材庫 - 底圖素材網路資源： - [Magic pattern](https://www.magicpattern.design/tools/css-backgrounds) - [Grabient](https://cssgradient.io/gradient-backgrounds/) - 插圖素材： - [月亮](https://assets-lighthouse.alphacamp.co/uploads/image/file/21979/moon__1_.png) - [雲層](https://assets-lighthouse.alphacamp.co/uploads/image/file/21981/032-cloud.png) - [有雲層的月亮](https://assets-lighthouse.alphacamp.co/uploads/image/file/21982/002-moon.png) - [煙火](https://assets-lighthouse.alphacamp.co/uploads/image/file/21985/015-fireworks.png) - [燈籠](https://assets-lighthouse.alphacamp.co/uploads/image/file/21983/003-paper_lantern.png) - [月兔剪影](https://assets-lighthouse.alphacamp.co/uploads/image/file/21978/rabbit__2_.png) - [兔子](https://assets-lighthouse.alphacamp.co/uploads/image/file/21986/rabbit__1_.png) - [月餅](https://assets-lighthouse.alphacamp.co/uploads/image/file/21980/001-moon_cake.png) - [柚子](https://assets-lighthouse.alphacamp.co/uploads/image/file/21984/013-pomelo.png) 你可以複製以上的圖片連結，置換到頁面中。如果覺得以上素材都不符合你的需求，也歡迎自行上傳圖檔。以目前同學在學期 1 的階段，尚未接觸到本地開發工具，建議可以先使用網路免費的照片上傳空間 (如：[imgur](https://imgur.com/) 等)，有了圖片連結後，就可以置換範例中的圖片，做出自己想要的頁面了！ <!-- 不過如果有額外的時間想先接觸本地開發，嘗試本地圖片嵌入的話，也可以先稍微了解，推薦同學參考這篇 MDN：https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML --> **Step 3.** 修改完成後截圖、傳給親朋好友，並別忘了回到這個頁面下方留言處： - 貼上你的賀卡截圖，和同學們分享 - 分享你的朋友們看到賀卡後的回應 - 分享你在製作過程中的感受！ 期待在底下留言區看到大家的中秋賀卡哦 ☺️ <div style="font-size: 14px; color: #088696; text-height:13px; margin: 0 5px 0 15px;"> <ul style="list-style-type:none; margin-bottom:2px; text-indent : -38px ;"> <p>註：這個挑戰目標是先讓同學試著熟悉 Devtool，去觀察網頁、熟悉前端頁面的結構，若對於自己做出來的卡片的排版、圖片大小有不夠滿意的地方，還不用太著急！你可以查詢 css 相關語法，或者在下週及學期 2-1 的課程中，我們就將帶大家進入更細節的切版、排版技巧囉！</p> </ul> </div> <!-- ## 【選修】網頁破壞王 -- 來玩 Devtool 吧！ 小提醒：請先確認本週進度的章節 & 作業內容都已完成後，再來進行挑戰吧 恭喜你來到課程第二週的最後！ 進入了介面的世界，又看完[學長姐跟你說](https://lighthouse.alphacamp.co/courses/39/units/7535)這個單文後，對網頁介面和 Devtool 這個小工具應該稍有概念了。接下來，和班上同學們一起來用 Devtool 來玩玩看網頁吧！ <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vRRVIExExERUQ9BPHC2HMhLelPMpQlJu4dsX0rgUgdUW_BcIKYg4S_w3t7fHqjIObHrztEYTl5Qqg_3/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe> </div> * 點擊[這個連結](https://docs.google.com/presentation/d/1_3I3RkjQGiK6ywb1gfIFCWxCl6oqezfAiaYSOK1YuHE/edit#slide=id.p)進入文件中 * 完成你的作品 * 回到這個頁面，和同學分享你的挑戰心得！ Youtube - (教案) 104 人力銀行 - 105 蝦皮拍賣 博客來 FaceBook Line 維基百科 - Netflix IG 改回原本的 Logo - 需要各種素材（from ACer/小精靈）、梗圖 - 時事梗 - 給幾個統一的框架讓同學置換圖片 Hint：自己的圖片上傳：雲端、imgur、... 完成之後，別忘了回到這邊，在這個章節底下留言分享你的挑戰心得！ 期待看到大家的作品！ - 可以直接給模板 - 預告排版語法下週會教到 -->