###### tags: `學期一`
# 【選修】學習挑戰 —— 「牛」轉乾坤新年賀卡

目標：練習 HTML/CSS & engagement

cta: 完成賀卡 + 分享出來

需要 initial code

Outline
- 賀卡成品 demo（基礎 + 進階）
- 製作重點
- 完成後，到頁面下方分享 + 分送給親友
- 技術提示
- 賀卡 initial code

#### 一起製作新年賀卡吧！

新年快樂！

#### 製作賀卡的小提示

期待見到你的分享！

---
# 【選修】學習挑戰 —— 「牛」轉乾坤新年賀卡

>**學習成果與目標**
>・透過更多樣的程式應用，持續精進自己的開發能力

在 2 月的這段期間，AC 準備了兩份技術挑戰，讓大家有更豐富的練習機會，也可以同時做出相當特別的、只有懂網頁開發基礎的你才做得出的新年賀卡！

#### 1. JS 挑戰 —— 用 for 迴圈刻出新年賀卡

過去的幾週，同學們已經對 JavaScript 語法相當熟悉，也懂得如何拆解問題、透過運算思維解決問題。

建立在這樣的基礎上，請你試圖用目前會的 JavaScript 刻出以下的圖形吧！

<h5 style="font-size:1.2rem">「春」字圖形</h5>
<div style="width:50%">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15131/_____2021-02-05___1.32.34.png" >
</div>

<!-- 我們期待透過這個小小的活動，除了能更充分地練習我們目前為止所學的內容，也希望你把握這個機會，跟親朋好友分享一下你這兩週在 AC 的成果。

同時，你也可以在圖形下方寫下你想跟親友們說的話，並把 repl 的結果截圖下來，就成為一張非常方便寄出的電子賀卡囉！ -->

<h5 style="font-size:1.2rem">小提示</h5>
只要照著類似附圖中的方式編寫，就可以成功畫出來囉！

<div style="width:100%; text-align: center">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15133/_____2021-02-05___1.36.04.png" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15133/_____2021-02-05___1.36.04.png" >
</a>
<small>點擊圖片看大圖</small>
</div>

#### 成果範例

<div style="width:50%">
<h5 style="font-size:1.2rem">新春賀卡</h5>
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15134/_____2021-02-05___1.37.57.png" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15134/_____2021-02-05___1.37.57.png" >
</a>
</div>

你也可以依照自己的喜好調整圖形喔！

#### 2. 介面挑戰 —— 牛年新春賀卡

在介面的部分，過去大家除了熟悉 HTML/CSS 的觀念和語法的使用，也有能力從繪製線框稿開始，完成一份完整的頁面開發。

建立在這樣的基礎上，我們替大家設計了一份範例賀卡。期望你能透過修改起始程式碼，盡可能還原出範例賀卡的樣子。

#### 成果範例

<div style="width:50%">
<h5 style="font-size:1.2rem">新春賀卡</h5>
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15135/_____2021-02-05___1.46.41.png" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15135/_____2021-02-05___1.46.41.png" >
</a>
</div>

要從起始程式碼將頁面修改成這樣，需要完成以下的調整：

第一階段：版面設定

- 1. 將中間的圖形縮小
- 2. 將橘色與藍色文字框之間設定 20px 的間距

第二階段：樣式調整

- 1. 將卡片加上橘色外框
- 2. 將「恭賀新年」與「牛轉乾坤」每個字之間設定 8px 的間距

<div style="width:100%">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15153/_____2021-02-05___7.23.26.png
" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15153/_____2021-02-05___7.23.26.png
" >
</a>
</div>

此外，想進行更高階挑戰的同學，我們另外出了一份進階範本讓你持續練習、精進自己的介面開發能力！

<div style="width:50%">
<h5 style="font-size:1.2rem">新春賀卡——進階版</h5>
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15136/_____2021-02-05___1.49.49.png" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15136/_____2021-02-05___1.49.49.png" >
</a>
</div>

進階挑戰：尖角設定

- 1. 移除橘色文字框上的邊線
- 2. 將橘色文字框的左右兩側設定成尖角形狀

<div style="width:100%">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15154/_____2021-02-05___7.23.30.png
" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15154/_____2021-02-05___7.23.30.png
" >
</a>
</div>

<h5 style="font-size:1.2rem">小提示</h5>

想做出左右兩側尖角的效果，請參考[這篇文章](https://www.coder.work/article/325803)

#### 分享你的成果

我們了解大家對 JS 與介面的喜好各有不同，因此你可以優先針對自己比較有興趣的主題進行演練。

當你完成上述的任一挑戰，並跟身邊的人分享你的成就之後，請回來這個頁面，在下方留言分享：

* 在製作過程中遇到了什麼技術上的挑戰？你是如何克服的？
* 親朋好友們看到成品時，有什麼反應？

製作的過程中如有任何疑問，也歡迎與同學在下方的提問區或是 LINE 群組進行討論。

期待看到你的分享，也希望這些獨特的賀卡能讓你的新年假期更加有趣！😊

---
<!-- 活動公告 -->

Outline:

為什麼有這個挑戰？
為什麼要做？
去挑戰

# 學期 1 新春學習挑戰：製作你的牛年賀卡！

<div style="width:100%; max-width:100%">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15143/___.001.png" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15143/___.001.png">
</a>
</div>

#### 課程結束後的要務：保持程式手感

在剛經過學期 1 連續三週的學習後，同學們將迎來一段比較長的休息時間。然而，在剛剛上手程式學習的現在，「持續練習、保持手感」是一件非常重要的事。

因此，為了讓同學們有更多練功的機會，我們特別準備了兩份小挑戰給大家。

#### 學習挑戰：製作獨特的新年賀卡！

<div style="width:100%; max-width:100%">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15150/_____2021-02-05___7.11.15.png" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15150/_____2021-02-05___7.11.15.png">
</a>
</div>

不開班的 2 月份，我們準備了 [學習挑戰 —— 「牛」轉乾坤新年賀卡](https://lighthouse.alphacamp.co/courses/39/units/8464)！

考量到大家對 JavaScript 以及介面的偏好各有不同，我們各準備了一份學習挑戰，讓你在反覆演練的過程中，還能做出讓親朋好友眼睛為之一亮的作品。

希望同學們能把握這次的額外練習機會，完成挑戰，並回到 Lighthouse 上分享你的成果喔！

教練在這裡也預祝大家新年快樂！ 🧧🧧🧧

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15106/banner_-_ac_genie.002.png"></div>