Week 3 前端基礎工作坊

###### tags: `學期 1` # Week 3 前端基礎工作坊 ## 報名 Week 3 前端基礎工作坊！ ## Week 3 前端基礎工作坊資訊 <div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;max-width:500px;"> 日期與時間：7/28 (二)19:30 - 21:00 <br> 登記參加連結：<a href="https://alphacamp.webex.com/alphacamp-tc/j.php?MTID=m8171103a1be5f70f886286799e81b075" target="_blank">https://alphacamp.webex.com/alphacamp-tc/j.php?MTID=m8171103a1be5f70f886286799e81b075</a> <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/event?action=TEMPLATE&tmeid=XzhkOWxjZ3JmZHByNmFzamtjaGdqZ2UxZ2M5aWo2ZGoyY2dvM2NjajM2OHJqMmQxZzZoZ2plY2hwY2RnamdwaG02NHIwIHM3aWJpNzh1MWdjbmE0cTlobW83OHBsaDI4QGc&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a> </div>  在這個工作坊中，助教將會帶領你走入前端開發的世界，從使用 Dev tool 拆解網頁，到操作 HTML / CSS 讓你的 `Hero Page` Level up！更重要的是，助教也會分享實務經驗以及學習技巧，讓你在茫茫技術大海的前端開發中，不再害怕。 <div style="width:80%;"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/9532/ezgif.com-video-to-gif__7_.gif"></div> <div style="padding:3px;"></div>  <div style="padding:3px;"></div> ##### 來不及準備怎麼辦？倘若你在工作坊開始前無法完成建議內容，<u>你還是可以參與工作坊</u>，我們也相當鼓勵你上線參與，因為這將可以協助你在前端開發的成長。同時，在工作坊中千萬不要吝嗇於提問，甚至在動手練習的環節中，可以大方地與助教、同學分享練習成品！ <div style="padding:3px;"></div> --> #### 設定工作坊視訊工具 WebEx 在未來所有的工作坊中，助教會在線上透過 WebEx 這個工具來與同學們互動、練習。因此請在工作坊前，確保你已經「了解 WebEx 的基本使用」，讓你在工作坊能夠順暢的跟上助教的腳步。 <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-1vRnH-92A_5e4eio5rdKxakG5I1bXCCGkBxkZJT6KtpMrGbx_6MSeDuGdR-C7BdZEkPrI4AQzgNX99RZ/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe> </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> --- ## Week 3 前端基礎工作坊 -- 2020/07 月班會後精華 7 月 28 日舉辦的前端基礎工作坊，目的是為了協助你上手 HTML & CSS 基礎，並透過實作去了解如何撰寫。除此之外，助教講師 Nissen 也分享了業界的常用技巧與使用情境，帶同學更了解設計使用者體驗/介面上的思考： * dev tool 是開發者的好夥伴！可以透過他去拆解網頁以及偵錯 * 很多答案都在 google 上，重點是要知道怎麼找答案，即便是在職工程師還是會在 google 上做學習。 No google, no coding! * 不要害怕遇到錯誤，在反覆查找、測試的過程中能夠有更深入的學習另外學習教練 Ken 也提醒同學，本週的內容實作量也不少，包含了 3 份作業跟期末考，需要投入一定的時間完成。因此建議同學的學習順序如下：基本務必完成： <div><ol><li>看完工作坊的教學，並且跟著練習</li><li>準時完成本週作業，爭取助教回饋機會。<br>本週作業：<a href="https://lighthouse.alphacamp.co/courses/39/assignments/1212" target="_blank">A13: 為客戶打造履歷網頁</a>、<a href="https://lighthouse.alphacamp.co/courses/39/assignments/928" target="_blank">A14: 你的遊戲程式網頁版！</a>、<a href="https://lighthouse.alphacamp.co/courses/39/assignments/929" target="_blank">A15: 打造你的英雄頁面</a></li> <li>完成 <a href="https://lighthouse.alphacamp.co/courses/39/assignments/932" target="_blank">期末考</a>，回顧、驗收三週學習成果</li></ol><div> 完成上述的練習後，想要繼續精進的同學可以： 1. 完成工作坊課後挑戰 (投影片 p.19) 2. 撰寫 [學習部落格](https://lighthouse.alphacamp.co/courses/39/assignments/936)，紀錄這三週的學習歷程 ### 影片 <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/442573038" frameborder="0" allowfullscreen></iframe></div> <div style="height: 16px;"></div> #### 有參與工作坊的同學，你可以⋯⋯ * 你可以回顧影片內容，複習並練習以加深你的學習。你也可以在下方的討論區分享你在工作坊時的練習成果，和同學們討論與觀摩。 * 把握刻意練習的機會，完成工作坊挑戰（投影片 p.19），分享在下方留言區 * 去留言區觀摩同學的作品，用 dev tool 找找看有沒有新發現 #### 沒有參與到工作坊的同學，你可以⋯⋯ 在你對於 HTML & CSS 有基本概念後，你可以觀看工作坊影片，並且在觀看影片時： * 試著回答影片中的快速問答環節的問題。(你可以在影片呈現答案前，暫停影片讓自己有充分的思考時間) * 在「助教操作練習 We do」的環節跟著助教的指示一起練習 * 完成挑戰題後，將你的作品分享在下方留言區。或著在練習的過程中，有相關疑問也可以在下方討論區中提問 ### 工作坊參考資料 #### 投影片 <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-1vSxOWuMVjLEt8z8I1sJ545On3EEhQroPt_4kK6okizjUHpjsxAPOR7nBGKPEtI938nQlpkw1I6ErjwY/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe> </div> **Codepen 練習的 sample code (使用時記得 fork)** * [初始程式碼](https://codepen.io/alpha-camp/pen/PoPaXjy) * [完成版程式碼](https://codepen.io/alpha-camp/pen/BaoPQro)