###### tags: `學期 2-1`
[toc]

# [限量名額] 學期三工作坊旁聽報名 - CSS 切版挑戰

<div style="width: 100%;">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15265/___.001.jpeg">
</div>

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

在更進階的 學期三：軟體工程師養成 課程中，學長姊們正在為了轉職的最後一哩路衝刺。

在前端工程師的領域中，除了實際專案開發、怎麼跟後端串接，「網頁切版」也是一個重要的課題，因此 AC 特別設計的切版挑戰，在本次切版挑戰工作坊裡，我們要挑戰這個版型：

<div id="block">
<!-- 圖片 -->
<div id="img-box">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15094/Screenshot_2021-01-25___5.10.40.png" target="_blank"><img id="blueprint" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15094/Screenshot_2021-01-25___5.10.40.png"></a><br>
<span style="font-size: 0.9rem; color:#a2a2a2;">點我看 <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15094/Screenshot_2021-01-25___5.10.40.png" target="_blank">大圖</a>、<a href="https://www.figma.com/file/CyjOMKv2tg6Nv731tiiTaF/2021_01_28_CSS_Challenge?node-id=0%3A1" target="_blank">設計稿</a></span>
</div>
<!-- 文字 -->
<div id="text">
<p>由上而下、由外到內的分為：
<ul>
<li>頁面外框 (指定使用 display：grid)</li>
<li>header 導覽列 (指定使用 display：flex / display: inline-block)</li>
<li>主背景中央圖片與 Day & Night (指定使用 position 定位)</li>
<li>可左右滑動的卡片區塊 (指定使用 display: inline-block)</li>
</ul>
我們將運用 display 屬性的細微差異、Grid、flex 排版系統來進行切版。</p>
<p>其中也會在某些區塊導入 flex + posistion 的組合技來做特殊定位。<span style="font-size: 0.8rem; color:#4b2222;">**這個組合技的訓練時機在學期 3 前端班，學期 3 以前的同學可以現場先聽概念，事後再研究</span></p>
</div>
</div>

這個版面所需要運用到的切版技巧相當精彩豐富，因此我們將開放限量席次給學期二的同學也一起參與，讓整個社群一起練習與精進。

#### 關於切版挑戰

##### 你需要在有限時間內(當然你也可以提前準備)：

- 分割指定畫面的結構，目標是能做出三大區塊的主要 flow，不包含細節。
- 運用 CSS layout 技術完成指定畫面

##### 歡迎同學共襄盛舉，你將會在這次的活動中體驗到：

- 深刻了解分割畫面策略對後續實作的影響
- 評估自己能在有限時間壓力下做到什麼程度，以診斷下一步刻意練習重點

##### 準備策略：如何獲得最大學習成效？

為了獲得最大學習成效，建議你事先準備：

- 事先消化 HTML 結構（[起手式 CodePen](https://codepen.io/wang-jiang-yang/pen/JjRqLBZ?editors=1000))
- Codepen 已做好 HTML 結構與 CSS Reset
- 除了加入 CSS class 以外，不應該更動原始 HTML 結構
- 複習指定使用的 display 屬性如 inline, inline-block, flex，教案內容多分佈在學期 1 與 2-1。

做好以上熱身，現場在時間限制下全力以赴，開啟專注模式，迎來最佳學習效果。

#### 旁聽注意事項

1. 本工作坊為「學期三」課程的工作坊，因此助教將會優先回答與點評學期三的學長姊的成果，如有剩餘時間，會視情況回答其他問題
2. 本次工作坊為 **切版挑戰**，因此需要大量實作，旁聽並非只是單純聽講，也需要動手參與
3. 本次工作坊為 **限量名額**，若報名人數超過席次，教練團隊將會在報名截止後統一審核，並於 3/22 (一) 18:00 完成審核後，另行通知
5. 本次工作坊為 **加碼開放**，因此不提供錄影、會後精華給非學期三同學。有意想要參加，請務必把握機會報名

#### 如何報名

- 報名條件：需完成 S2 電影清單章節的任一份作業，包含：
- [A7: 你的社群名單：頁面設計](https://lighthouse.alphacamp.co/courses/41/assignments/1008)
- [A8: 回顧 Search Bar 實作細節](https://lighthouse.alphacamp.co/courses/41/assignments/1010)
- [A9: 回顧刪除功能細節](https://lighthouse.alphacamp.co/courses/41/assignments/1011)
- 報名截止時間：2021/03/22 (一) 中午 12:00
- 報名連結：<a href="https://ac-bootcamp.typeform.com/to/aB3PT7" target="_blank">https://ac-bootcamp.typeform.com/to/aB3PT7</a>

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

<style>
div#block{
width: 100%;
display:flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
font-size: 0.9rem;
background-color: #fff;
padding: 3px 10px;
}

#img-box{
width: 45%;
text-align: center;
}

img#blueprint{
width: 100%;
}

#text{
width: 45%;
}

@media screen and (max-width: 767px){
#text{
width: 100%;
}
}

</style>