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