---
# System prepended metadata

title: CSS 切版挑戰賽 (public use)
tags: [week2, 學期 2-3]

---

###### tags: `學期 2-3` `week2`
[toc]
# CSS 切版挑戰賽 (public use)

## Before Webinar

### 【重要通知】CSS 切版挑戰賽 日期變更

學期 2-3 前端【Week 3 CSS 切版挑戰賽】原訂於 08/03 (三) **調整為 08/02 (二) 舉辦**
還請同學們記得空下時間參與唷！如當天無法即時參與，也會有會後影片供同學複習 

**更改後時間**：<span style="color:#CE2D0F; font-weight: bold;">08/02 (二)</span> 19:30 - 21:00<br>
<a class="btn btn-normal" target="_blank" href="https://calendar.google.com/event?action=TEMPLATE&tmeid=b2IzbnMxcjIyYWZoa2lqN29idmhhMHNwbGMgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a>

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

---

### 報名 Week 3 CSS 切版挑戰賽！

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

<!-- 本班次並未舉辦線上 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;">
        • 活動時間：05/10 (三) 19:30 - 21:00<br>
      • 與會連結：<a href="
 https://zoom.us/j/83477351797" target="_blank">https://zoom.us/j/83477351797</a><br>
      • 會議密碼：608837<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/calendar/event?action=TEMPLATE&tmeid=Mm5ndWpxa3Y4ampxcjM1aWpjcDl1NGJkYmIgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a>
</div>

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

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


在前端工程師的領域中，除了實際專案開發、怎麼跟後端串接，「網頁切版」也是一個重要的課題，因此 AC 特別設計了切版挑戰，希望讓同學有機會在「短時間內，實際挑戰思考 HTML 結構、實作特殊版型」來提昇你的切版力。

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

<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/1O0L2UU0HjALT3HTB4RS_hM6xnSqYrn6wnXd-Gt_aIWE/edit?usp=sharing)
- 第 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) 實際動手切切看

為確保你的最大學習效果，請你以第 2 級準備為目標，不過最少要完第 1 級準備。

若在工作坊開始前你無法完成建議內容，仍然可以參與工作坊，因為我們相信藉此可以協助你在後續學習有幫助。


<a  class=" btn btn-normal" role="button" data-toggle="collapse" aria-expanded="false" href="#moreToPrepare" aria-controls="moreToPrepare"> 【還有一些你可能會想先準備】</a>

<div class="collapse" id="moreToPrepare" style="background-color: #efefef; border-radius: 5px; padding: 5px 15px;">
<p style="margin-block-start: 0.5em;">
在解這道題的過程中，會遇到一些有趣的狀況，可能你之前不曾想過，可以先自行查詢解法。<br>
若行前來不及準備，同學也可以當場看助教示範，後續再安排時間攻略。這邊先幫你把小抄做起來：

<ol>
    <li>遇到超長的多行文字，超出畫面時可以怎麼處理呢？ 
        <ul>
            <li>關鍵字：CSS 文字溢出</li>
            <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp" target="_blank">MDN -webkit-line-clamp、<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow" target="_blank">overflow</a>
            </li>  
        </ul>
    </li>

<li>如何善用 CSS 選擇器更精準地選到想改變的元素？ 
        <ul>
            <li>
             <code>[selectors A][selectors B]</code> 和 <code>[selectors A] > [selectors B]</code> 有什麼差別呢？ 
            </li>
            <li>參考<a href="https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/%E5%BF%98%E8%A8%98%E4%BA%86%E8%A6%8F%E5%89%87%E7%9A%84%E8%AB%8B%E8%B7%9F%E6%88%91%E4%BE%86-css-selector-%E9%81%B8%E6%93%87%E5%99%A8-%E5%9F%BA%E7%A4%8E%E7%AF%87-4b583639c118" target="_blank">文章</a>
            </li>
        </ul>
</li>
<li>
置中的方法你搜集了幾種？還有哪些組合也可以做到呢？
        <ul>
            <li>
            hint：嘗試用  <code>position: absolute;</code> 搭配 <code>transform: translateX();</code> 看看
            </li>
        </ul>
</li>
    
<li>用 <code>calc()</code> (<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()" target="_blank">MDN</a>) 計算元素尺寸，自動調整寬度超方便！
</li>

<li>
你知道 <code>white-sapce</code> (<a href="https://developer.mozilla.org/zh-TW/docs/Web/CSS/white-space" target="_blank">MDN</a>) 嗎？ 搭配 <code>inline-block</code> 後竟然不只能處理文字，還能搞定並排的圖片</li>
</li>
</ol>


這些小技巧都能夠幫助你的作品質感更上一層樓，或者在撰寫時更省時省力唷！<br>

</p>
</div>





#### 行前準備 - 設定視訊工具 Zoom 
在未來所有的學習活動中，AC 團隊、助教會在線上透過 Zoom 這個工具來與同學們互動、練習。
因此請在工作坊前，參考下方投影片，確保你已經「完成註冊與安裝」並「了解 Zoom 的基本使用」，讓你在活動中能夠順暢的跟上助教的腳步。

<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-1vRQ2ir_UbkgAaPHwund4EQgzuFNrvNW13PhqdlsR_8ndJvIojPRQPTY_8a7X9KBih3OkiKIU0z_7CQL/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>

<div style="padding:10px;"></div>

期待在工作坊看見你的身影！

#### 更多工作坊
同學若想查詢更多工作坊活動，可以到 [學習活動日程](https://lighthouse.alphacamp.co/courses/101/units/20963) 單元確認喔！


<div class="further-reading" style="background: #ececec;">
  <div class="further-reading-inner-wrapper">
<h5>無法參與工作坊怎麼辦？</h5>
<p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能每次參與。因此工作坊結束後隔天，我們會將工作坊的錄影與當天所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p>
<p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p>
  </div>
</div>



---

### 05/10 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>

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

快來參加 CSS 切版挑戰賽，來提昇你的切版力吧！

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

<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>

---

## 行前準備再次提醒
### 【行前準備提醒】學期 2-3：CSS 切版挑戰賽

CSS 切版挑戰賽就在明天啦！

同學們將透過實戰，挑戰完成一個完整的版面，模擬實際切版的時間與狀況，再透過助教的講解，更熟悉 CSS 版面的規劃與屬性應用～

在這之前要提醒同學，別忘記先完成 [行前共筆](https://docs.google.com/document/d/1Rh29phzMSMvTCqkGRPHAckohqN70e3-J7edHPu6Ju0E/edit?usp=sharing)，了解、規劃好 HTML 的結構，幫助自己參加工作坊時更好吸收哦！

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
  • 活動時間：05/10 (三) 19:30 - 21:00<br>
  • 與會連結跟行前準備：請參考 <a href="https://lighthouse.alphacamp.co/courses/101/units/26879" target="_blank"> CSS 切版挑戰賽活動頁面</a>
</div>

<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>

---
## 行前準備再次提醒(for 後端)

### 【工作坊特別開放】學期 2-3：CSS 切版挑戰賽

2-3 前端 CSS 切版挑戰賽就在明天啦！

這次特別開放 8 月班的同學一起參加，挑戰在一定時間內完成切版，增加切版熟練度，一起來看看 [CSS 切版挑戰賽活動頁面](https://lighthouse.alphacamp.co/courses/101/units/26649)吧💪🏻

同學們將透過實戰，挑戰完成一個完整的版面，模擬實際切版的時間與狀況，再透過助教的講解，更熟悉 CSS 版面的規劃與屬性應用～

在這之前要提醒同學，別忘記先完成 [行前共筆](https://docs.google.com/document/d/1Rh29phzMSMvTCqkGRPHAckohqN70e3-J7edHPu6Ju0E/edit?usp=sharing)，了解、規劃好 HTML 的結構，幫助自己參加工作坊時更好吸收哦！

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
  • 活動時間：05/10 (二) 19:30 - 21:00<br>
  • 與會連結跟行前準備：請參考 <a href="https://lighthouse.alphacamp.co/courses/101/units/26649" target="_blank"> CSS 切版挑戰賽活動頁面</a>
</div>

<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>

---

## Webinar Update
### 【今晚 7:30 工作坊提醒】學期 2-3：CSS 切版挑戰賽

在練習「網頁切版」的同時，你是否希望增加自己在短時間內的應變及思考能力呢？

今天晚上 7:30 CSS 切版挑戰賽，將會透過實戰演練，引導你從思考到實作來增強你的切版力！

別忘記做行前準備，幫助自己更好吸收哦！我們晚上見！

#### 活動資訊
<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
  • 活動時間：05/10 (三) 19:30 - 21:00<br>
  • 與會連結跟行前準備：請參考 <a href="https://lighthouse.alphacamp.co/courses/101/units/28548" target="_blank"> CSS 切版挑戰賽活動頁面</a>
</div>

<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>

---


# After Webinar

### Week 3 CSS 切版挑戰賽 -- 會後精華

<span style="color:#E52F28; font-size: 0.9rem;">會後精華為提供無法上線同學會後學習，請同學還是務必以即時參與工作坊為主，結束後再看此單元作為複習唷！</span>

本次舉辦的 CSS 切版挑戰賽，助教設計了「房屋仲介個人頁面」版型，整場活動總共有四道挑戰題，同學需要在短時間內，完成指定區塊，包含 RWD 設計挑戰，十分緊張刺激！

![](https://assets-lighthouse.alphacamp.co/uploads/image/file/18352/Hnet.com-image.gif)

助教從點評同學事前準備的 HTML 架構開始講解，並在過程中帶入與實作手法的展示與說明，幫助同學理解最抽象的背圖圖片定位問題。

活動的最後，助教也總結他學習切版的心法，並提醒同學實務上會需要留意的問題，帶給同學不同角度的切入觀點，同學直呼含金量滿滿。

<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://player.vimeo.com/video/813032001?h=3f41cd4336&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"   frameborder="0" allowfullscreen></iframe>
</div>


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


#### CSS 技術重點摘要

![](https://assets-lighthouse.alphacamp.co/uploads/image/file/18350/___2021-12-08___5.59.46.png)

- 運用 `position` 定位背景圖片
- 使用 `white-space: nowrap` + `inline-block` 做橫向排版
- 運用 `left:50%` + `transform: translateX(-50%);` 達成置中效果
- 定義多行文字溢出效果
    ```
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 限定行數 */
      overflow: hidden; /*多的字隱藏起來 */
    ```
- 用 `calc()` 計算元素尺寸，不同單元也可以自動計算寬度


#### reference

- 設計稿：https://www.figma.com/file/enR8o8OdlqJKYfXuLdRZ5d/AC_CSS_challenge_202201?node-id=1%3A3
- Starter Code: https://codepen.io/wang-jiang-yang/pen/YzVOrwa?editors=1100
- 完成版：https://codepen.io/wang-jiang-yang/pen/KKXdWwY


---

### 05/10 Week 3 CSS 切版挑戰賽 - Highlights

本次舉辦的 CSS 切版挑戰賽，助教設計了「房屋仲介個人頁面」版型，整場活動總共有四道挑戰題，同學需要在短時間內，完成指定區塊，包含 RWD 設計挑戰，十分緊張刺激！

![](https://assets-lighthouse.alphacamp.co/uploads/image/file/18352/Hnet.com-image.gif)
助教從點評同學事前準備的 HTML 架構開始講解，並在過程中帶入與實作手法的展示與說明，幫助同學理解最抽象的背圖圖片定位問題。

<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px;  font-size: 0.875rem; margin-bottom: 5px;">
    <div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
      助教講解的很詳細!
    </div>
    <div style="width: 18%; display:flex; align-items: center; padding: 2% 0;">
    <img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/10253/medium_________190527_0005.jpg">
    <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Keiko</p>
    </div>
</div>
<div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px;  font-size: 0.875rem; margin-bottom: 5px;">
    <div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;">
      因為前天剛經歷完2-2，助教的教導用transform的置中方法感覺很實用！
    </div>
    <div style="width: 18%; display:flex; align-items: center; padding: 2% 0;">
    <img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.alphacamp.co/uploads/user/photo/11353/medium_image7.jpeg">
    <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">奎文</p>
    </div>
</div>





現在就去看看精彩的會後錄影吧 ➡️ [切版挑戰賽會後精華](https://lighthouse.alphacamp.co/courses/101/units/28547)

<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>
