###### tags: `學期 3 front-end` `webinar` [toc] # CSS 切版挑戰 ## 報名 CSS 切版挑戰！ #### CSS 切版挑戰 <div style="width:75%; background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;"> 日期與時間：9/2 (三) 19:30 - 21:00 <br> 登記參加連結：<a href="https://zoom.us/j/81056122632">https://zoom.us/j/81056122632</a> </div> <div style="height: 16px;"></div> <!-- 整個 block --> <div style="display: flex;align-items: center; padding: 0 10px;margin-bottom: 16px"> <!-- Jiang --> <div style="width:10%;text-align:center;line-height:10px;"><img style="width:70px;display:block; border-radius:50%; margin:auto; box-shadow:none;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/12989/Screen_Shot_2020-06-15_at_5.01.50_PM.png"> </div> <div style="width: 2%;"></div> <div style="width: 30%;"><b>講師｜Jiang</b><br>廣告公司<br>前端工程師 </div> <!-- Ellen --> <div style="width:10%; text-align:center; line-height:10px;"><img style="width:100%; display:block; border-radius:50%; margin:auto; box-shadow:none;" src="https://lh3.googleusercontent.com/7nHDjj8my0pk_UdCnq7lDzZx5TvptSYLxrNnHTk_8QoSpZ5gGYOxSuIz_rhu-4vvNcIisJ-4YEqc9lgFc0x58UwrhpU__SS5dlQxHsoVuFZ-uwXxEv2G4gwjU4LJ7RRtlVdIN1pCK34"> </div> <div style="width: 2%;"></div> <div style="width: 40%;"><b>主持人｜Ellen</b><br>AC Learning Product<br>內容開發團隊<br></div> </div> <!-- 下排講者 --> <div style="display: flex;align-items: center; padding: 0 10px; margin-bottom: 10px"> <!-- Yenting --> <div style="width:10%; text-align:center; line-height:10px;"><img style="width:100%; display:block; border-radius:50%; margin:auto; box-shadow:none;" src="https://lh6.googleusercontent.com/ltNCx_dGPrU8gn1GHe6DPXGxa75yKUqR5a7HTnlXnP978_ZirXFv-qQa_QrSRsY6K4nJkuZoNmlGdGqLCKz30Azvbz19pacnwhACKXepMvbLMX6OdTZEVSFJdlBQJSvWtKS8GxUxSOE"> </div> <div style="width: 2%;"></div> <div style="width: 30%;"><b>主持人｜Yenting</b><br>AC Student Success<br>學習體驗團隊 <br></div> <!-- Red --> <div style="width:10%; text-align:center; line-height:10px;"><img style="width:100%; display:block; border-radius:50%; margin:auto; box-shadow:none;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/14044/_____2020-08-27___1.24.11.png"> </div> <div style="width: 2%;"></div> <div style="width: 40%;"><b>主持人｜Red</b><br>AC Student Success<br>學習體驗團隊 <br></div> </div> <div></div> <div style="line-height:16px;"></div> 在前端工程師的領域中，除了實際專案開發、怎麼跟後端串接，「網頁切版」也是一個重要的課題，因此 AC 特別設計的切版挑戰，在本次切版挑戰工作坊裡，我們要挑戰這個版型： <div style="width:100%; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: 0.9rem; background-color: #fff; padding: 0px 5px; border-radius: 5px;"> <!-- 圖片 --> <div style="width: 38%; text-align: center; margin-right: 4px"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14038/Screenshot_2020-08-26___5.46.35.png" target="_blank"><img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/14038/Screenshot_2020-08-26___5.46.35.png"></a><br> <span style="font-size: 0.9rem; color:#a2a2a2;">點我看 <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14038/Screenshot_2020-08-26___5.46.35.png" target="_blank">大圖</a>、<a href="https://designer.gravit.io/?token=Ve-l_M_JTR_-T_kPS49llEaofinLqfcF" target="_blank">設計稿</a></span> </div> <!-- 文字 --> <div style="width:60%; min-width: 320px;"> <p>由上而下的三大區塊指定使用： <ul> <li>display: inline-block</li> <li>display: inline</li> <li>display: flex</li> </ul> 來進行切版，我們將仔細討論 display 屬性的細微差異。</p> <p>另外，個人頭像左上角的狀態燈、Airticles 區塊的向右按鈕、與最下方的 footer 陰影區，則指定使用 CSS Position 的 absolute + relative 組合技來做特殊定位。<br><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/dyMvPBm?editors=0100)) * Codepen 已做好 HTML 結構與 CSS Reset * 除了加入 CSS class 以外，不應該更動原始 HTML 結構 * 複習指定使用的 display 屬性如 inline, inline-block, flex，教案內容多分佈在學期 1 與 2-1。 做好以上熱身，現場在時間限制下全力以赴，開啟專注模式，迎來最佳學習效果。 #### 設定工作坊視訊工具 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> <br> 最後，期待在工作坊看見你的身影！ <div class="further-reading" style="background: #ececec;"> <div class="further-reading-inner-wrapper"> <h5>無法參與工作坊怎麼辦？</h5> <p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能每次參與。因此工作坊結束後隔天，我們會將工作坊的錄影與當天所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p> <p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p> </div> </div> --- ## CSS 切版挑戰 -- 2020 / 8 月班會後精華 <center><img style="width:70%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/14038/Screenshot_2020-08-26___5.46.35.png"></center> 9 月 2 日舉辦的 CSS 切版挑戰工作坊，助教講師 Jiang 與內容團隊 Ellen 帶領同學們，先拆解畫面的 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/454246976" frameborder="0" allowfullscreen></iframe></div> <div style="height: 16px;"></div> -- #### 同學會後心得 ##### 本次活動滿意度：4.7 ⭐️⭐️⭐️⭐️⭐️ 🗣 謝謝JAING助教的解說,特別是對於關注點的提點,可以多利用背景顏色或是邊框來幫助自己更清楚的知道目前要切版的元素是那些~ 🗣 學習到新的語法，而且更加瞭解思考與寫code的流程、從哪開始著手。 -- #### 工作坊投影片 <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-1vRXsjdBEAcNM_owcYgENw_zL95ZbveNBbiwRgmFHhDP2AUi-l9G1nYc8Ig1d5w7tIWGe47Vqj9ZXKJq/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe> </div> ##### Sample Code * [CSS 切版挑戰 - 初始程式碼](https://codepen.io/wang-jiang-yang/pen/dyMvPBm?editors=0100) * [CSS 切版挑戰 - 完成版程式碼](https://codepen.io/JHONGO/pen/dyMzPLX)