###### tags: `學期 2-3` `Weekly Goal`

# F2-3 【前端】 Weekly goal

## 學期 2-3 前端：Week 1 學習目標

<div id="alert-warning">
<p>Hi {{user_nickname}}，</p>
<p>很開心看到在學期 2-3 看到你，完成掌握全端網頁開發的旅程</p>
<p><span style="color: #e52f28;">若你尚未完成 <a href="https://lighthouse.alphacamp.co/courses/101/units/20965" target="_blank">環境安裝檢核表</a> 請務必於今天完成必備工具安裝</span>，才不會跟不上後續的進度哦！
</p>
</div>

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22493/F3F_Weekly_Schedule_12.001.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22493/F3F_Weekly_Schedule_12.001.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

#### 歡迎來到學期二的最後一階段 -- 前端開發實務

這個階段開始，我們將開始從「寫程式」進入到「做產品」，學習旅程將與過往有大大的不同，因此在開始四周旅程前，請務必先詳讀：

- [U：學期 2-3 前端主題介紹](https://lighthouse.alphacamp.co/courses/101/units/20959)
- [U：學期 2-3 完課心法](https://lighthouse.alphacamp.co/courses/101/units/28408)

了解未來四週的學習主題，並且擬定學習計畫與預留學習時間。

#### 本週學習重點

<div style="width: 100%; text-align:center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/17276/Screenshot_2021-10-18___6.06.24.png" target="_blank">
<img style="width: 100%; "src="https://assets-lighthouse.alphacamp.co/uploads/image/file/17276/Screenshot_2021-10-18___6.06.24.png"></a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

<br>

本週範圍是：

- S1 網路概論與 Node.js
- S2 Express 網路應用程式

在網頁開發的領域中，前端工程師除了掌握畫面與資料的互動，了解網路程式運作也是非常重要的一環，除了展現專業度之外，也能幫助你在未來與開發團隊協作時溝通更加順暢。

因此在 [S1 網路概論與 Node.js 伺服器](https://lighthouse.alphacamp.co/courses/101/units/21017) 與 [S2 Express 網路應用程式](https://lighthouse.alphacamp.co/courses/101/units/21032) 中，你的目標是<u>能夠了解網路如何運作，並使用 Node.js 建立網路伺服器，搭配 Express 打造一個可以在電腦上運作的網站</u>，透過終端機與電腦、伺服器溝通，建立更全面的網路概念。

具體成果將在 [A1: 打造餐廳清單](https://lighthouse.alphacamp.co/courses/101/assignments/3043) 這份作業中體現。

你將會透過這份作業複習、熟練本週新學習的工具，熟悉如何在 Node.js 環境裡使用 Express.js 全端專案進行開發。

#### 本週活動 -- Week 1 工具地圖 + 生存指南工作坊
<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; width: fit-content;">
日期與時間：4/25 (二) 19:30 - 20:30 <br>
❗️行前準備：➡️ <a href="https://lighthouse.alphacamp.co/courses/101/units/28525" target="_blank">【報名】工具地圖 & 生存指南工作坊！</a>
</div>

#### 邀請你加入班級 LINE 群組 ！

<div style="width: 100%; text-align:center;">
<img style="width: 50%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22699/4.png"><br>
<span style="font-size:0.95rem; color:#9B9B9B;">請用手機掃描上方 QR code 加入 Line 群組。<br>若無法掃描，可嘗試「用手機」點擊此連結：<a href="https://line.me/ti/g/VUKTrvyCQg" target="_blank">https://line.me/ti/g/VUKTrvyCQg</a></span>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---
## 學期 2-3 前端：Week 2 學習目標

<!-- 延長助教批改 -->
<!-- <div id="alert-warning">
<p>Hi {{user_nickname}}，</p>
<p>上週的學習還好嗎？教練觀察到大家都有認真啟動學習，但還有部分同學尚未完成 Week 1 指標作業<a href="https://lighthouse.alphacamp.co/courses/101/assignments/3043" target="_blank"> A1: 打造餐廳清單</a> </p>
<p>因此教練特別幫大家爭取<span style="color: #e52f28;">「延長 A1 作業批改期限至本週三」12/14 23:59 前！</span></p>
<p>只要在週三前繳交 A1 作業，還是能夠獲得助教批改！不需額外申請遲交作業批改喔！希望大家把握機會、繼續將作業完成！
</p>
</div> -->

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22514/F3F_Weekly_Schedule_12.002.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22514/F3F_Weekly_Schedule_12.002.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

#### 本週學習重點

<div style="width: 100%; text-align:center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/20470/2022-02-28_at_8.54_AM.png" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/20470/2022-02-28_at_8.54_AM.png">
</a>
</div>

本週範圍是：

- [S3 RWD 實戰](https://lighthouse.alphacamp.co/courses/101/units/20967)
- [S4 切版特訓：毛小孩星球](https://lighthouse.alphacamp.co/courses/101/units/20981)

<div id="alert-warning">
請務必注意本週學習章節橫跨 S3 & S4，不要忘記完成 S4 的學習！
</div>

承接學期 2-1 學習過的 Flex & Grid 佈局系統，我們這次將更進一步搭配 position 的概念進行組合技，打造出更符合現代網頁、多螢幕佈局呈現的需求。

本週的學習重點為：透過教案，掌握使用 CSS 撰寫出適應不同螢幕大小的「響應式網頁」 的能力，並 <u>了解不同的工具特性，選擇適當工具來進行切版。</u>

具體將在 [A6: 我的履歷：RWD 實作應用](https://lighthouse.alphacamp.co/courses/101/assignments/3033) 這份作業中體現。

完成指標作業後，也別忘記進入 [S4 切版特訓：毛小孩星球](https://lighthouse.alphacamp.co/courses/101/units/20981)，在這個章節你會跟 Mike 助教一起幫助「毛小孩星球」這個幫助流浪狗的團體，打造他們的官網，希望帶給你工程師切版實務體驗，同時溫故知新，複習和學習更多 CSS 排版技術和屬性。

<!-- #### 工具地圖 + 生存指南工作坊

本班次未開設線上即時工作坊，若你在第一週學習新工具時「感到不知所措、好像很多新東西都學不完、無法掌握學習路徑和提高效率」，教練建議你可以先看 [工具地圖 & 生存指南工作坊會後精華](https://lighthouse.alphacamp.co/courses/101/units/28534)，吸收助教和教練所提醒的學習技巧，幫助你順利度過未來的學習挑戰！
-->

<!-- <div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; width: fit-content;">
工作坊時間：本週二 19:30<br>
行前準備 ➡️ <a href="https://lighthouse.alphacamp.co/courses/101/units/28525" target="_blank">【報名】工具地圖 & 生存指南工作坊！
</a>
</div> -->

#### ❗️尚未完成 Week 1 進度怎麼辦❗️

<div id="alert-warning">
<p>如果你尚未完成 <a href="https://lighthouse.alphacamp.co/courses/101/assignments/3043" target="_blank">A1: 打造餐廳清單</a> 作業，建議你只要確認完成必備工具安裝後，本週可以直接跟上 Week 2 進度，從 S3 RWD 實戰開始學習！</p>
<p>由於 S2 的電影清單專案並非未來章節學習的必要條件，跳過並不影響後續學習。同學可以視個人時間安排學習時間，建議先以跟上課程主進度為主! 待確定完成 week 2 進度後，再補上作業即可！</p>

<!-- <p><span style="color: #e52f28;">本班級有延長 A1 作業批改期限，若你想把握助教批改機會，可以挑戰於本週三前完成！但若來不及也沒關係，請以跟上進度為主，之後完成 A1 還是可以申請遲交作業批改的！</span></p> -->

</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---

## 學期 2-3 前端：Week 3 學習目標

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22522/F3F_Weekly_Schedule_12.003.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22522/F3F_Weekly_Schedule_12.003.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

#### 本週學習重點

<div style="width: 100%; text-align:center;">
<img style="width: 90%; "src="https://assets-lighthouse.alphacamp.co/uploads/image/file/17427/w3.png">
</div><br>

<div id="alert-warning">
<li>
本週實作分量不少，在教案與作業共有 3 個小專案需完成，請同學務必注意時間分配，優先完成主修內容，避免影響進度。</li>
</div>

本週範圍是「S4 切版特訓：毛小孩星球」的後半段，我們將完成相片集的呈現，並且進行細節優化，來提升切版的完成度。

本週的學習重點為：在實作完整一頁式頁面時，能<u>依據不同區塊，選擇適當工具進行切版，並達成一定切版完成度 (區塊定位、RWD 效果、RWD 不會破版）。</u>

具體將在 [A14: 電商網頁切版](https://lighthouse.alphacamp.co/courses/101/assignments/3039) 這份作業中體現。

#### ❗️尚未完成 Week 1 & 2 進度怎麼辦❗️

<div id="alert-warning">
<p>如果你尚未完成前兩週的課程單元，還是可以先按照自己的速度循序學習，並保留更多學習時間、善用 Lighthouse 提問，幫助自己提升學習效率，千萬不要自己卡關太久喔！</p>
<p>若有作業遲交（標示為 Late），記得申請遲交作業批改，獲得助教回饋喔！<a href="https://lighthouse.alphacamp.co/courses/38/units/28572" target="_blank">（如何申請：參考有效學習暖身操）</a></p>
</div>

<!-- 需要確認是否舉辦 -->
#### 本週活動 -- Week 3 CSS 切版挑戰賽

經過上週的切版暖身，你準備好利用 CSS 挑戰賽來試試自己「短時間內，實際挑戰思考 HTML 結構、實作特殊版型」的能力了嗎？

<div style="background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; width: fit-content;">
日期與時間：5/10 (三) 19:30 - 21:00 <br>
❗️行前準備：➡️ <a href="https://lighthouse.alphacamp.co/courses/101/units/28548" target="_blank">報名 Week 3 CSS 切版挑戰賽</a>
</div>
<!-- 需要確認是否舉辦 -->

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---

## 學期 2-3 前端：Week 4 學習目標

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/22523/F3F_Weekly_Schedule_12.004.jpeg" target="_blank">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22523/F3F_Weekly_Schedule_12.004.jpeg">
</a><br>
<span style="font-size:0.9rem; color:#9B9B9B;">點擊圖片可看大圖</span>
</div>

#### 本週學習重點

<div style="width: 100%; text-align:center;">
<img style="width: 90%; "src="https://assets-lighthouse.alphacamp.co/uploads/image/file/17718/2-3____w4.png">
</div>

本週的範圍是 [S5 切版特訓：網紅切版平台](https://lighthouse.alphacamp.co/courses/101/units/26289)，你將跟著教案一步一步完成網紅廣告平台的 HTML 架構、CSS 樣式，並且透過 JavaScript 來讓表單呈現換頁的動態效果。

你將會接觸許多新東西，像是 nvm、webpack、CSS 預處理器及表單樣式的修改。

第一次接觸新工具，{{user_nickname}} 務必要注意時間分配，以更好的上手、完成實作。

本週的學習重點及目標：

- 持續累積切版經驗 / 時數
- 熟練新工具：CSS 預處理器 - Sass，讓切版更有效率
- 瞭解新思維：表單體驗優化
- 使用者體驗：除了長長一頁的表單，學習如何透過 form 搭配 stepper 的設計，引導使用者完成完整的操作步驟
- 資料與畫面的互動：在點擊下一步或上一步之後，資料與畫面會對應顯示

<div id="alert-warning">
<p>小叮嚀：時間比較緊湊的同學，在行前準備及 <a href="https://lighthouse.alphacamp.co/courses/101/units/26227" target="_blank">U: Webpack 建立本地開發環境</a>的章節，可以先照著教案實作，確保自己可以繼續往下前進即可，無需在這週就弄懂所有關於 nvm 及 webpack 的細節，有餘力再來深入研究。
</div>

#### ❗️尚未完成前三週進度怎麼辦❗️

<div id="alert-warning">
<p>如果你尚未完成 <a href="https://lighthouse.alphacamp.co/courses/101/assignments/3039" target="_blank">A14: 電商網頁切版</a> 作業，還是可以先按照自己的速度循序學習，若卡關太久記得設置停損點，善用 Lighthouse 向助教提問喔！（學習<a href="https://lighthouse.alphacamp.co/courses/38/units/6838" target="_blank">「有效提問」）</a>
</p>
<p>若有作業遲交（標示為 Late），記得申請遲交作業批改，獲得助教回饋！<a href="https://lighthouse.alphacamp.co/courses/38/units/28572" target="_blank">（如何申請：參考有效學習暖身操）</a></p>
</div>

#### 下週活動 -- Week 4 Web App 開發觀念健檢工作坊

這次工作坊助教講師將會協助同學們回顧在「學期 2-3：前後端開發實務」課程之後，個人對於「網頁開法」的掌握程度。

因此**無論你在哪個章節，通通可以、且高度建議務必參與這次的工作坊**，跟著助教的腳步，回顧這段時間以來自己累積的功力！

<div style="background: #ececec80; padding: 15px; border-radius: 10px ; font-weight: bold; width: fit-content;">
工作坊時間：下週一 19:30<br>
行前準備 ➡️ <a href="https://lighthouse.alphacamp.co/courses/101/units/28535" target="_blank">【報名】Web App 開發觀念健檢工作坊！</a>
</div>

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---

## 【重要】學期 2-3 前端，課程結束後你的下一步

Hi {{user_nickname}}，

學期 2-3 前端的四周課程進度已經結束，過去一個月的學習如何呢？

#### 填寫 學期 2-3，整體學習體驗回饋

不論你的學習進度到哪裡，都邀請{{user_nickname}}在近日內完成填寫[學期 2-3，整體學習體驗回饋](https://lighthouse.alphacamp.co/courses/101/units/28393) 和 AC 分享你的想法吧！

#### 把握課後助教支援，完成學期 2-3 技術驗收!

因應[ALPHA Camp 全端開發開課日程調整](https://achq.notion.site/ALPHA-Camp-92e5a65ec709431690b119f83c2f54e5)，所有課程即日起都將延長助教支援至 2023.12.31 止。你可以持續留言提問、繳交作業，都還是能獲得助教回饋！

#### 確認下一步課程安排

很開心過去四周 {{user_nickname}} 加入學期 2-3 跟著進度班級制學習，不過我們也理解學習是相當個人的，若你想要再次**重讀**、或是**轉班**延後下一階段開課的話，可以到 [ALPHA Camp 學習機制](https://lighthouse.alphacamp.co/courses/38/units/28560) 進行確認呦！

若已經準備好往學期 3 邁進的話，也記得完成 **[學期 3 銜接引導](https://lighthouse.alphacamp.co/courses/101/units/26748)** 的章節學習，並選擇學期 3 的主修路徑！

最後，如果你在學習進度安排上有相關問題，也歡迎來信 [e-mail] 與教練團隊聯絡。

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21381/banner.001.png"></div>

---
# style

<style>

div#alert-warning{
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
font-size: 0.9rem;
}

</style>