###### tags: `Bootcamp` `webinar` `Dev_C1`
[toc]

# 【工作坊】前端基礎工作坊

恭喜你完成 M3 網站設計與介面實作，剛學完 HTML 和 CSS 的基礎語法後，接下來要開始進行一個完整的切版專案。在繼續往下學習前，推薦你可以參加 **前端基礎工作坊** 累積練習經驗 !

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold;max-width:500px;">
日期與時間：6/14 (三) 19:30 - 21:00 <br>與會連結：<a href="https://zoom.us/j/82667733699" target="_blank">https://zoom.us/j/82667733699</a>
<br>
會議密碼：173236<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/calendar/event?action=TEMPLATE&tmeid=N2xoN2oyM3VmOXFjMHNkMWpwdmduNmVicTMgY19taTJ0ZTQ5a29iY3BuZDk3OXJobjhubzBvNEBn&tmsrc=c_mi2te49kobcpnd979rhn8no0o4%40group.calendar.google.com">將行程添加到 Google 日曆</a>
</div>
<br>

在這個工作坊中，助教將會帶領你走入前端開發的世界，從使用 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 時間

#### 工作坊行前準備

為了確保你學習成效，我們建議你在參與工作坊前先完成：

* **最基本準備**
* 完成章節閱讀：Dev C1 網頁開發入門【M3 網站設計與介面實作】中的前半部分`任務說明`、`開發環境與工具`、`HTML/CSS 快速上手`
* 完成 [Chrome安裝](https://www.google.com/intl/zh-TW/chrome/) 與 [Codepen 註冊](https://lighthouse.alphacamp.co/courses/39/units/5544)
* 第二階段準備：完成【單元複習：Box Model】
* 第三階段準備：完成章節閱讀【使用 DevTools 即時修改樣式】和 Quiz 練習題【試用 DevTools】

為確保你的最大學習效果，請你以第 3 級準備為目標，不過最少要完成第 1 級準備。

<div style="padding:3px;"></div>

#### 來不及準備怎麼辦？

倘若你在工作坊開始前無法完成建議內容，<u>你還是可以參與工作坊</u>，我們也相當鼓勵你上線參與，因為這將可以協助你在前端開發的成長。

同時，在工作坊中千萬不要吝嗇於提問，甚至在動手練習的環節中，可以大方地與助教、同學分享練習成品！