---
# System prepended metadata

title: 前端基礎工作坊
tags: [學期一, webinar]

---

###### tags: `學期一` `webinar`
[toc]

# 前端基礎工作坊


## Before Webinar
<!-- - [當班資料夾](https://drive.google.com/drive/u/0/folders/181inO5914rVU8koOJ12XNOvNnh11KA87)
Event - TW Intro_Tourist #23 (2022.08)
- 建立新表單
TW New Intro_#23_前端基礎工作坊 (2022.08)
- [改串接表單](https://admin.typeform.com/form/Yl21orfA/connect#/section/integrations) -->
- [更新 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 級準備。

<!-- #### 務必把握本週積極學習！

請還沒完成以上內容的同學，把握本週的[延長作業批改](https://lighthouse.alphacamp.co/announcements/1117)，盡快學習！！
如果你都已經完成本週的進度內容，就快來申請[提前進度](https://lighthouse.alphacamp.co/courses/38/units/7521)，預先啟動介面專案實作吧！ -->

<!--由於工作坊的行前準備內容於 `下週一才開放` ，因此請希望能在與會前好好準備的同學在下週一、二， `預留至少 2-3 小時完成行前準備` (若無提及完成作業，代表完成閱讀即可）。-->

<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 前端基礎工作坊，助教講師會帶著大家一起實作介面開發，傳授打造介面的心法，讓同學們在跟著助教同步操作後，可以快速累積經驗值，更順利地完成履歷專案！

<!-- 別忘記<span style="color: blue">預留時間準備好 zoom 的設定</span>，確保有更好的工作坊品質喔！我們晚上見！ -->


`另外，我們特別在工作坊中安排了「助教 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="typeform-widget" data-url="https://form.typeform.com/to/IrKQTM" 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=IrKQTM&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>

#### 回饋單

<div class="typeform-widget" data-url="https://form.typeform.com/to/DzvMwb" 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=DzvMwb&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> -->

<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 基礎，並透過實作去了解如何撰寫。

<!-- Marc 版本 -->

活動中，助教也分享了業界的常用技巧以及個人的學習建議：

* Dev tool 是開發者的好夥伴！可以透過他去拆解網頁、偵錯以及嘗試效果
* 接手專案時，在動手之前先加入註解，能讓自己掌握頁面結構，也提升和他人協作品質
* 即便是在職工程師還是會在 google 上做學習，要學會下對關鍵字，找到預期的效果
` No google, no coding!`
* 「我們不可能記住所有語法」遇到自己不會的語法或效果，就 Google 吧！
* 查找資料時：先看網路範例、再貼到 Dev tool 中觀察、測試，開發會更有效率！


此外，助教也給同學們在職涯探索上一些建議：

* 保持好奇心：學習過程一定會遇到挫折，但重要的是要有「好奇心」
* 有耐心：學習上遇到不理解的語法時，要耐心去研究弄不懂的原理、持續去學習
* 持續探索職涯：認知到學習、成長是為了自己，為自己設定 check point，認識自己的熱忱所在

<!-- Marc 版本 -->

<!-- * 職涯上關於前、後端選擇，不用現在就做出決定，但從現在就可以開始思考、觀察自己的喜好 -->

<!-- * 不要害怕遇到錯誤，在反覆查找、測試的過程中才能夠有更深入的學習 -->

<!-- Frank 版本 -->

<!-- 活動中，Frank 助教也分享了業界的常用技巧以及個人的學習建議：

* Dev tool 是開發者的好夥伴！可以透過他去拆解網頁、偵錯以及嘗試效果
* 接手專案時，在動手之前先加入註解，能讓自己掌握頁面結構，也提升和他人協作品質
* 即便是在職工程師還是會在 google 上做學習，要學會下對關鍵字，找到預期的效果
` No google, no coding!`
* 「我們不可能記住所有語法」遇到自己不會的語法或效果，就 Google 吧！
* 查找資料時：先看網路範例、再貼到 Dev tool 中觀察、測試，開發會更有效率！

此外，Frank 助教也給同學們在職涯探索及職涯轉換上的學習建議：

* 嘗試開始累積作品集，試著用作品集累積、並練習展示自己的學習成果
* 善用[社群](https://discord.com/invite/hUFn6YGFAN)力量，找到志同道合和你一起走向數位職涯的學習夥伴
* 持續熱情、好奇心以及持續學習的心態
 -->
<!-- Frank 版本 -->

最後也提醒同學，本週的內容和作業份量也不少，需要投入一定的時間完成。因此建議同學的學習順序如下：

<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>
    
<!-- 3. 撰寫 <a href="https://lighthouse.alphacamp.co/courses/39/assignments/936" target="_blank">學習部落格</a>，紀錄這三週的學習歷程 -->

</div>

<!-- #### 報名職涯相談室

最後，如果聽完 Frank 助教幫大家補充的職涯資訊後，你還想更進一步了解數位軟體職涯概況，以及提前理解工程師如何在挑選產業、並持續創造職涯成長，務必報名參加 10/7（四）晚上的數位職涯相談室喔！

【數位職涯相談室 #6 數位人才 x 金融業：非本科 → 新創 → 金融業，資深工程師如何創造職涯成長＆選擇產業】

➡️ 報名連結：https://bit.ly/2Zf7HKY
日期：10/7（四）19:30 - 21:00 -->

<!-- #### 報名社群相談室

<p>「AC 社群相談室」讓你不用出門，只要準備一台電腦、一個舒適的空間，以及一顆交朋友的心，就能和同學來一場線上的深度交流 🤝 <br>
</p>

➡️ 報名連結：https://bit.ly/3mDV31n
日期：11/10（三）19:30 - 21:00 -->

<!-- #### AC 新產品上線預告 - 數位職涯 RPG
「數位職涯 RPG」是專門為認識數位職涯與職能而開發的課程，希望讓想要進入數位領域的同學們，可以透過課程對數位職涯有更全面的了解，進而更進一步理解當前所學習的技能能夠如何被應用在未來的工作場景、以及解決什麼樣的實務問題。
更多關於數位職涯 RPG 與規劃下一步學習計畫的資訊請參考 👉 [如何考量自己是否要往下學習](https://lighthouse.alphacamp.co/courses/39/units/26431)
 -->
<!-- ##### 完成學期一後，AC 會如何鼓勵你持續學習

學期到了尾端，許多同學在思考及規劃自己[學習的下一步](https://lighthouse.alphacamp.co/courses/39/units/28118)。

而一直以來，AC 想帶給同學們的都不只是紮實的程式技能，我們希望幫大家同步培養技術力、產業力以及學習力，幫助你創造令自己驕傲的數位職涯。因此，為了讓大家能持續在 AC 學習有更全面地成長，我們整合了各方資源，推出了「數位職涯推手計畫」！

更多關於如何考量自己下一步的學習內容請參考 👉 [AC 會如何鼓勵你持續學習](https://lighthouse.alphacamp.co/courses/39/units/28118)
更多關於「數位職涯推手計畫」的細節請參考 👉 [AC 數位職涯推手計畫](https://tw.alphacamp.co/2022-superstar)

 -->




### 影片

<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&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;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 的環節中，透過助教的分享，對於職涯有更近一步的思考。


<!-- 除此之外，助教講師 Frank 也分享了業界的常用技巧與自己在職涯上累積的心得，帶同學一起體會工程師的介面開發流程，同學們反饋都說過去沒注意到的觀念被釐清，也更理解前端工程師的工作內容。 -->

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




------
<!-- ### 前端基礎工作坊，就在明晚！

<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/28442) 

<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
  • 活動時間：10/12 (三) 19:30 - 21:30<br>
  • 活動報名跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/39/units/28442" 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> -->



---
### Week 3 前端基礎工作坊 - 12 月班

本班次並未舉辦線上前端基礎工作坊，因內容並不影響進度學習，同學有興趣可以先看會後精華，或是空下下次工作坊時間再上線學習即可喔！

現在就去看實用的會後錄影吧 ➡️ [前端基礎工作坊 - 2022/10 月班會後精華](https://lighthouse.alphacamp.co/courses/39/units/28529)