前端基礎工作坊

###### tags: `學期一` `webinar` [toc] # 前端基礎工作坊 ## Before Webinar  - [更新 Email 回覆資訊](https://admin.typeform.com/form/Yl21orfA/create) - 回報新串接表單 ### 報名 Week 3 前端基礎工作坊！ #### 立即填寫報名表，預留工作坊席次！ <small>如果無法開啟表單，請更換瀏覽器、反覆刷新頁面、或[用新分頁開啟表單](https://alpha-camp.typeform.com/to/Yl21orfA)</small> <div style="padding:3px;"></div> <div class="typeform-widget" data-url="https://alpha-camp.typeform.com/to/Yl21orfA" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=C9qFVRn1&utm_source=typeform.com-01D8JT0K7RMWX6R3AQBRR72Q39-professional&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a> </div> #### Week 3 前端基礎工作坊資訊 <div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;max-width:500px;"> 日期與時間：11/16 (三) 19:30 - 21:30 <br>與會連結：<a href="https://zoom.us/j/87317941797" target="_blank">https://zoom.us/j/87317941797</a> <br> 會議密碼：549219<br> <span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結，以利工作坊進行</span><br> <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/event?action=TEMPLATE&tmeid=bnNpaGhjbGczZGI4ZnVycmZmNTdlYnVoczggczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&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> #### 工作坊 Agenda * 觀念澄清快問快答 * 助教操作練習 * 個人實作挑戰 * 重點回顧＆ QA 時間 #### 工作坊行前準備為了確保你學習成效，我們建議你在參與工作坊前先完成： * **最基本準備** * 完成章節閱讀 [U: 學習重點：打造視覺介面](https://lighthouse.alphacamp.co/courses/39/units/5541) - [U: Box Model：框線、留白、邊距](https://lighthouse.alphacamp.co/courses/39/units/5551) * 完成 [Chrome安裝](https://www.google.com/intl/zh-TW/chrome/) 與 [Codepen 註冊](https://lighthouse.alphacamp.co/courses/39/units/5544) * 第二階段準備：完成作業 [A: Box Model 觀念複習](https://lighthouse.alphacamp.co/courses/39/assignments/1284) * 第三階段準備：完成章節閱讀 [U: 使用 DevTools 即時修改樣式](https://lighthouse.alphacamp.co/courses/39/units/5548)和作業 [A: 試用開發者工具](https://lighthouse.alphacamp.co/courses/39/assignments/927) 為確保你的最大學習效果，請你以第 3 級準備為目標，不過最少要完成第 1 級準備。   <div style="padding:3px;"></div> #### 來不及準備怎麼辦？倘若你在工作坊開始前無法完成建議內容，<u>你還是可以參與工作坊</u>，我們也相當鼓勵你上線參與，因為這將可以協助你在前端開發的成長。同時，在工作坊中千萬不要吝嗇於提問，甚至在動手練習的環節中，可以大方地與助教、同學分享練習成品！ #### 行前準備 - 設定視訊工具 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> <br> 最後，期待在工作坊看見你的身影！ #### 更多工作坊同學若想查詢更多工作坊活動，可以到 [學習活動日程](https://lighthouse.alphacamp.co/courses/39/units/6993) 單元確認喔！ <div class="further-reading" style="background: #ececec;"> <div class="further-reading-inner-wrapper"> <h5>無法參與工作坊怎麼辦？</h5> <p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能每次參與。因此工作坊結束後隔天，我們會將工作坊的錄影與當天所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p> <p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p> </div> </div> --- ### 11/16 前端基礎工作坊 - 行前提醒 <div style="width: 100%;"><img src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/9013/banner.001.jpeg"></div> 下週我們將深入 HTML/ CSS，開始刻出一些視覺介面，一點一滴把版面打造出來。與此同時，我們也在下週三安排了 **前端基礎工作坊**，助教講師將會帶領你走入前端開發的世界，跟你分享實務經驗以及學習技巧，讓你在茫茫技術大海的前端開發中，不再害怕！現在就點擊右側連結，瞭解工作坊的內容吧！➡️ [Week 3 前端基礎工作坊資訊](https://lighthouse.alphacamp.co/courses/39/units/28527) <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 工作坊提醒】前端基礎工作坊 <div style="width: 100%;text-align:center"><img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/14399/_____2020-10-14___12.17.12.png"></div> 學期 1 邁入最後一週！同學們開始實作本週的切版專案了嗎？剛學完 HTML 和 CSS 的基礎語法後，馬上要開始進行一個完整的切版專案，是否讓你略感吃力呢？ #### 助教帶你快速成長！放心！今天晚上 7:30 前端基礎工作坊，助教講師會帶著大家一起實作介面開發，傳授打造介面的心法，讓同學們在跟著助教同步操作後，可以快速累積經驗值，更順利地完成履歷專案！  `另外，我們特別在工作坊中安排了「助教 Q&A 」，如果你在學習中有任何技術上、職涯上的疑問，都歡迎你帶著問題來和助教聊聊！` 最後，別忘記做行前準備，幫助自己更好吸收哦！我們晚上見！ #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;"> • 活動時間：11/16 (三) 19:30 - 21:30<br> • 活動報名跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/39/units/28527" target="_blank"> 前端基礎工作坊活動頁面</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> --- ### 工作坊開始前的更新資訊 <div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;max-width:500px;"> 請來參加工作坊的同學在開始之前完成以下的準備：<br> 1. 點進工作坊連結（記得確認麥克風是關閉的喔！）<a href=" https://zoom.us/j/87317941797" target="_blank">https://zoom.us/j/87317941797</a>(密碼：549219)<br> 2. 填寫<a href="https://ac-bootcamp.typeform.com/to/IrKQTM" target="_blank">簽到表</a> (如果無法打開簽到表，請嘗試更換瀏覽器) <br> 3. 打開 Chrome 瀏覽器<br> 4. 註冊 / 打開 <a href="https://codepen.io/" target="_blank">codepen</a><br> 5. 準備一支手機在身邊，今天一樣會有 Kahoot 快問快答喔！<br> </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> #### 設定工作坊視訊工具 Zoom 在本次的的工作坊中，助教會在線上透過 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 class="further-reading" style="background: #ececec;"> <div class="further-reading-inner-wrapper"> <h5>無法參與工作坊怎麼辦？</h5> <p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能每次參與。因此工作坊結束後隔天，我們會將工作坊的錄影與當天所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p> <p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p> </div> </div> --- ## After Webinar ### Week 3 前端基礎工作坊 -- 2022/10 月班會後精華 <span style="color:#E52F28; font-size: 0.9rem;">會後精華為提供無法上線同學會後學習，請同學還是務必以即時參與工作坊為主，結束後再看此單元作為複習唷！</span> 本次舉辦的前端基礎工作坊，目的是為了協助大家上手 HTML & CSS 基礎，並透過實作去了解如何撰寫。  活動中，助教也分享了業界的常用技巧以及個人的學習建議： * Dev tool 是開發者的好夥伴！可以透過他去拆解網頁、偵錯以及嘗試效果 * 接手專案時，在動手之前先加入註解，能讓自己掌握頁面結構，也提升和他人協作品質 * 即便是在職工程師還是會在 google 上做學習，要學會下對關鍵字，找到預期的效果 ` No google, no coding!` * 「我們不可能記住所有語法」遇到自己不會的語法或效果，就 Google 吧！ * 查找資料時：先看網路範例、再貼到 Dev tool 中觀察、測試，開發會更有效率！此外，助教也給同學們在職涯探索上一些建議： * 保持好奇心：學習過程一定會遇到挫折，但重要的是要有「好奇心」 * 有耐心：學習上遇到不理解的語法時，要耐心去研究弄不懂的原理、持續去學習 * 持續探索職涯：認知到學習、成長是為了自己，為自己設定 check point，認識自己的熱忱所在       最後也提醒同學，本週的內容和作業份量也不少，需要投入一定的時間完成。因此建議同學的學習順序如下： <h4 style="font-size: 1.2rem"><b>基本上務必</b></h4> <div> 1. 準時完成本週作業，爭取助教回饋機會。<br>本週作業：<a href="https://lighthouse.alphacamp.co/courses/39/assignments/1212" target="_blank">A16: 為客戶打造履歷網頁</a>、<a href="https://lighthouse.alphacamp.co/courses/39/assignments/929" target="_blank">A17: 打造你的英雄頁面</a>、<a href="https://lighthouse.alphacamp.co/courses/39/assignments/928" target="_blank">A18: 你的遊戲程式網頁版！</a><br> 2. 看完工作坊的教學，並且跟著練習。 </div> <h4 style="font-size: 1.2rem"><b>完成上述的練習後，想要繼續精進的同學可以</b></h4> <div> 1. 完成工作坊會後挑戰（想看更多 CSS 效果，可以到 <a href="https://codepen.io/your-work" target="_blank">CodePen</a> 上搜尋「web design card」或「card UI design」，觀摩更多高手的作品）<br> 2. 挑戰 <a href="https://lighthouse.alphacamp.co/courses/39/assignments/932" target="_blank">期末考</a><br> 3. 規劃下個階段的學習，申請<a href="https://tw.alphacamp.co/foundation-module#3-levels" target="_blank">學期 2-1 試讀</a>  </div>     ### 影片 <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/771902407?h=8b58a11c1c&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen></iframe></div> <div style="height: 16px;"></div> #### 有參與工作坊的同學，你可以⋯⋯ * 回顧影片內容，複習並練習以加深你的學習。你也可以在下方的討論區分享你在工作坊時的練習成果，和同學們討論與觀摩。 * 發揮創意、完成**工作坊會後挑戰**，將 [完成後的 Hero page](https://codepen.io/alpha-camp/pen/BaoPQro) 升級，新增 CSS 屬性並修改成自己、朋友或喜愛的卡通人物、角色，分享在下方留言區 * 去留言區觀摩同學的作品，用 dev tool 找找看有沒有新發現 #### 沒有參與到工作坊的同學，你可以⋯⋯ 在你對於 HTML & CSS 有基本概念後，你可以觀看工作坊影片，並且在觀看影片時： * 試著回答影片中的快速問答環節的問題。(你可以在影片呈現答案前，暫停影片讓自己有充分的思考時間) * 在「助教操作練習 We do」的環節跟著助教的指示一起練習 * 試著挑戰「個人實作練習 You 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-1vT8QPFoDFDawnn_HDYG1etWjYvIaB50Pin2_nydJWBmW2eQ0WKgKxXCfsTdFx66yL1oqFTTokUzzyXp/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) * [Hero Page 會後挑戰範例](https://codepen.io/yunju_ac/pen/jOOKVow) --- ### 11/16 前端基礎工作坊 - Highlights 本次舉辦的前端基礎工作坊，目的是為了協助你強化 HTML & CSS 基礎使用，並透過實作去了解如何打造、修改介面。除此之外，助教也分享了業界的常用技巧與自己在職涯上累積的心得，帶同學一起體會工程師的介面開發流程，同學們反饋都說過去沒注意到的觀念被釐清，同時也在職涯 QA 的環節中，透過助教的分享，對於職涯有更近一步的思考。  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22437/GMT20221116-110554_Recording_gallery_1920x1080_-_frame_at_122m50s.jpg"></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;"> 謝謝助教實際用Google關鍵字教我們如何找到想要的答案，常常在自學中遇到很多問題，很需要知道如何靠著搜尋找到自己想要的答案~~ 謝謝助教的貼心! </div> <div style="width: 25%; 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/10449/medium_dog-4988990_1920.jpg"> <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Carol</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;"> 雖然來不及完成事前準備的進度，才看完 javascript 的部分而已，不過今天的內容意外的算簡單，助教也都會帶著做，所以基本上都可以跟得上，今天最喜歡最後一個有變化的小挑戰，讓我們自己試試看的部分。 </div> <div style="width: 25%; display:flex; align-items: center; padding: 2% 0;"> <img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://lighthouse-cdn.alphacamp.co/default/medium_user_photo.jpg"> <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Susan Lin</p> </div> </div> 現在就去看實用的會後錄影吧 ➡️ [前端基礎工作坊 - 2022/10 月班會後精華](https://lighthouse.alphacamp.co/courses/39/units/28529) <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> ------  --- ### Week 3 前端基礎工作坊 - 12 月班本班次並未舉辦線上前端基礎工作坊，因內容並不影響進度學習，同學有興趣可以先看會後精華，或是空下下次工作坊時間再上線學習即可喔！現在就去看實用的會後錄影吧 ➡️ [前端基礎工作坊 - 2022/10 月班會後精華](https://lighthouse.alphacamp.co/courses/39/units/28529)