---
# System prepended metadata

title: Week 3 前端基礎工作坊
tags: [學期 1]

---

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


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


請來參加工作坊的同學在開始之前完成以下的準備：<br>

1. 點進工作坊連結（記得確認麥克風是關閉的喔！）<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> <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>
<!--
##### 工作坊行前準備

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

* **最基本準備**
    * **完成章節閱讀 [U33: 學習重點：打造視覺介面](https://lighthouse.alphacamp.co/courses/39/units/5541) -[U41: 使用 DevTools 即時修改樣式](https://lighthouse.alphacamp.co/courses/39/units/5548)**
    * 並**完成 [Chrome安裝](https://www.google.com/intl/zh-TW/chrome/) 與 [Codepen 註冊](https://lighthouse.alphacamp.co/courses/39/units/5544)**
* 第二階段準備：完成作業 [A10: 試用開發者工具](https://lighthouse.alphacamp.co/courses/39/assignments/927)
* 第三階段準備：完成章節閱讀 [U42: 案例：純文字網頁](https://lighthouse.alphacamp.co/courses/39/units/5553)和 [U43: 運用 margin/padding 創造留白](https://lighthouse.alphacamp.co/courses/39/units/7527)

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

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

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