# CSS 切版挑戰賽 (後端 & 學期三)

### [特別邀請] 11/2 學期 2-3 前端：CSS 切版挑戰賽

<div style="width:100%;">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16338/Screenshot_2021-08-06___4.28.03.png">
</div><br>

在前端工程師的領域中，「網頁切版」是一個重要的課題，因此 AC 特別設計了切版挑戰，希望讓同學有機會在「短時間內」實際挑戰思考 HTML 結構，一步一步實作出特殊版型。

這次特別邀請後端的同學一起挑戰，如果你也想提升你的切版力，快來看看 CSS 切版挑戰賽的行前準備吧！

現在就去看看這次工作坊的內容吧 ➡️ [報名 Week 3 CSS 切版挑戰賽](https://lighthouse.alphacamp.co/courses/101/units/26430)

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

### [加碼開放] 11/2 學期 2-3 前端：CSS 切版挑戰賽

<div style="width:100%;">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16338/Screenshot_2021-08-06___4.28.03.png">
</div><br>

在前端工程師的領域中，「網頁切版」一直是一個重要的課題，相信經歷過學期 3 切版磨練的你一定也相當有感。

切版是一個需要持續練習，保持手感的專業，因此 11/2 的切版挑戰賽，教練團隊特別開放給學期三的同學一起回顧活動，如果你在 2-3 學習時錯過了CSS 切版挑戰賽，或是想再複習一次切版，都歡迎來報名哦！

#### Week 3 CSS 切版挑戰賽資訊

<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px; font-weight: bold; width:fit-content;">
<p style="margin-block-start: 0em;">
• 活動時間：11/2 (二) 19:30 - 21:00<br>
• 與會連結：<a href="https://zoom.us/j/81089887422">https://zoom.us/j/81089887422</a><br>
• 會議密碼：661948<br>
<span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結</span>
</p>
<a class="btn btn-normal" target="_blank" href="https://calendar.google.com/event?action=TEMPLATE&tmeid=MnAwdG80bDluNGNyYm5qZzZwcms3czM1M28gczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a>
</div>

<div style="line-height:16px;"></div>

#### 什麼是切版挑戰賽

在本次切版挑戰工作坊裡，我們要挑戰這個版型：

<div style="width:100%; text-align: center;">
<img style="width:80%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16324/ezgif.com-gif-maker.gif"><br>
<span style="font-size:0.95rem; color:#a2a2a2;">這是一位房屋仲介的個人資訊頁，設計稿以 768 px 為斷點，提供水平、垂直兩種排列模式。</span>

</div>

#### 工作坊 Agenda
* 行前準備回饋 - HTML 結構設計
* 實戰演練 - 一步一步開始切吧！
* Q & A

#### 行前準備

- 第 1 級準備：實際跟著教案實作過 position, inline, block, inline-block, flex 的使用
- 第 2 級準備：參考 [Figma 設計圖](https://www.figma.com/file/e2P3u3m1pB6YABgcW8Xxzw/AC_CSS_challenge_202108)，事先設計 HTML 結構，並提交至 [共筆區](https://docs.google.com/document/d/1mJPMS53RNzRUbxCpnUgwtQBFS0c3lPyEtljAkkvvCtI/edit#)
- 第 3 級準備：參考 [Figma 設計圖](https://www.figma.com/file/e2P3u3m1pB6YABgcW8Xxzw/AC_CSS_challenge_202108)、[內容素材](https://docs.google.com/document/d/1uCUYEqubhKhpHeRV3O4rKR0zVZOYZN7c_7-qghExaFg/edit#heading=h.wba57six3bsn) 實際動手切切看

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>