---
# System prepended metadata

title: 學期一 W2 【選修】Devtool 挑戰
tags: [學期一]

---

###### 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、...


完成之後，別忘了回到這邊，在這個章節底下留言分享你的挑戰心得！
期待看到大家的作品！



- 可以直接給模板
- 預告排版語法下週會教到 -->