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

# F2-1 11 月班 weekly goal

## 學期 2-1：Week 2 學習目標，優先完成 S1 JavaScript 核心觀念！

Hi {{user_nickname}}，

<div id="alert-warning">
注意到你目前的學習進度較為落後，尚未完成 week 1 指標作業 <a href="https://lighthouse.alphacamp.co/courses/98/assignments/2963" target="_blank">A5: 週年慶摸彩活動：完整執行！</a>

</div>

#### 進度制的學習並不容易

學期 2-1 總共分為四週，每一週都有不同的目標與進度需循序達成，教練團隊注意到目前 {{user_nickname}} 的學習進度較為落後。

學期二整體課程以 JavaScript 為重心，擁有扎實的 JavaScript 基礎是進入下週 S3 DOM 元素章節的必要門檻，而進度制中所設計的「作業、回饋、提問、工作坊⋯⋯」等，都是希望提升你的學習循環、扎實基礎。

因此教練想特別提醒：

1. 如何在有限時間下交付任務，是成為合格軟體工作者的第一步！因此務必 **更積極調整學習計畫與方式，準時達成每週目標！**
2. **提升學習循環** 才是影響學習效果的關鍵！切記「閉門造車」或是「認為要完全學會，才能往下」，而讓自己持續停在輸入狀態，沒有輸出。

#### 進度落後怎麼辦

##### A5 作業延長批改至 12/01 週三，把握機會掌握 JS 核心

我們了解許多同學在首次面對學期 2-1 的內容和難度提升時，需要花費更多時間吸收觀念和釐清問題，因此可能來不及繳交所有作業。

為了協助同學們能好的掌握 JavaScript 核心觀念，經教練團隊討論， [A5: 週年慶摸彩活動：完整執行！](https://lighthouse.alphacamp.co/courses/98/assignments/2963) 的批改時間將 <span style="color: #e52f28;">延長至本週三 (12/01) 23:59。</span> 鼓勵大家把握時間，繼續完成第一週目標！

若 {{user_nickname}} 來不及在週三前完成 A5 作業，仍然可以繼續嘗試練習、並在**繳交作業後**申請 [作業遲交批改](https://lighthouse.alphacamp.co/courses/38/units/7520#:~:text=%E5%90%8C%E5%AD%B8%E5%AE%8C%E6%88%90%E5%AD%B8%E7%BF%92%E3%80%82-,%E4%BD%9C%E6%A5%AD%E9%81%B2%E4%BA%A4%E6%89%B9%E6%94%B9,-%E6%B3%A8%E6%84%8F%EF%BC%9A%E5%AD%B8%E6%9C%9F%E4%B8%80)，幫助自己獲得助教回饋喔！

#### 若學習卡關，更需要更主動、積極地解決問題！

學習的過程並不容易，尤其幫助自己「能夠持續推進」更是重要的課題。

教練觀察有許多同學都有啟動學習，只是尚未完成第一週教案的學習和繳交作業，但同時也發現同學們的向助教發問比例不到過往班級的一半。

因此在有限的時間與進度目標下，教練團隊期待同學們更主動地嘗試解決卡關的狀況、並提升學習效率。

{{user_nickname}} 可以嘗試以下方法，來幫助自己更好理解內化教案內容、並能夠順利準時繳交作業！

1. **觀看完教案後，嘗試用自己的話解釋、輸出**：無論是整理筆記、或是開始嘗試寫作業，都能夠幫助自己檢視是否有效理解！
2. **為自學設置停損點，若卡關太久務必提問**：提問前可以再複習如何 [有效提問](https://lighthouse.alphacamp.co/courses/38/units/6838)
3. **觀摩他人如何解決問題**：若在寫作業遇到卡關，先看看 [學長姐如何解決問題](https://lighthouse.alphacamp.co/courses/98/units/20511) 的吧!

##### 期待你接下來持續學習、順利完成 week 1 進度內容！

若完成 A5 作業後可以再往下查看 [學期 2-1：Week 2 學習目標](https://lighthouse.alphacamp.co/announcements/2130)，盡力跟上進度喔！

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

---

## 學期 2-1：Week 2 學習目標 -- A5 Try harder

<div id="alert-warning">
Hi {{user_nickname}}，
<p>
注意到你的 <a href="https://lighthouse.alphacamp.co/courses/98/assignments/2963" target="_blank">A5: 週年慶摸彩活動：完整執行！</a> 尚未獲得 Meets Expectations 的評分，而學期二整體課程以 JavaScript 為重心，擁有扎實的 JavaScript 基礎也是進入下週 S3 DOM 元素章節的必要門檻，所以請：
</p>
<ul>
<li><code style="font-size: 0.9rem;">先完成 JS 章節</code>：務必確認 A5 批改結果、修改至 Meets Expectations 以上評分，再繼續往下學習</li>
<li><code style="font-size: 0.9rem;">放心提問</code>：課程單元中的 Q&A 沒有進度限制，可以放心向助教提問；如果面對助教有點害羞，你也可以透過 <a href="https://lighthouse.alphacamp.co/courses/98/units/20406" target="_blank">Slack 共學社群</a>，向同學、學長姐們請教</li>
<li><code style="font-size: 0.9rem;">觀摩學習心法</code>：推薦你觀看 <a href="https://lighthouse.alphacamp.co/courses/98/units/20511" target="_blank">學長姐分享：常在作業卡關怎麼辦</a> 幫助自己提升解決問題的能力</li>
</ul>
</div>

#### Week 2 進度學習重點

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/18187/F-1_Weekly_schedule_11.002.jpeg" target="_blank">
<img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/18187/F-1_Weekly_schedule_11.002.jpeg">
</a>
<span style="font-size:0.85rem; font-weight: 300; color:#9B9B9B;">
點擊圖片可檢視大圖</span>
</div>

本週的進度是 S2 網頁切版技巧與工具。在這個章節你將開始攻略一些業界常用的切版技能，認識實用的介面工具 Bootstrap 與現在網頁設計的重要原則 RWD。

你的目標是：

- 建立能夠 <u>在處理不同區塊畫面時，選擇適當工具（box model、flexbox、position 等）來進行切版，並完成和設計稿一致的網頁畫面。</u>
- 建立能夠 <u>自主查閱 Bootstrap Components、Utilities 文件，快速建立網頁，與調整排版細節</u> 的能力。
- 了解讓網頁元件適應不同尺寸螢幕的 RWD 設計原理。並且能夠<u>使用 DevTools 觀察 RWD 案例</u>。

具體將體現在 [A: 校長盃 UI 設計首獎作品](https://lighthouse.alphacamp.co/courses/98/assignments/3628)、[A: 組裝我的社群主頁](https://lighthouse.alphacamp.co/courses/98/assignments/3629) 這兩份指標作業中。完成這 2 份作業後，也別忘記繼續往後學習 RWD 觀念喔！

#### 完成 S2 網頁切版技巧與工具 後，你可以⋯⋯

##### 申請提前進度
如果你已經完成 S2 網頁切版技巧與工具，想要繼續往後面的章節學習，歡迎透過 [提前進度機制](https://lighthouse.alphacamp.co/courses/38/units/7521)，往 S3 章節學習，把握時間持續推進！

<div id="coach-container">
<div id="coach-icon-box">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10438/______512.001.png" style="width:100%;"></div>
<div id="#coach-content-box">
<h5 style="color: #002380 ;margin-block-start:0em; margin-block-end: 0em; margin-top: 0;"> 學習教練提醒</h5>
<p class="coach-p-start">1. 本週學習方法將不同於第一週的 JavaScript，除了需要動手測試熟悉各種 CSS 屬性的效果以外，開始切版前務必要先拆解畫面架構，分析各個頁面層級。因此在開始前，請務必先詳讀 <a href="https://lighthouse.alphacamp.co/courses/98/units/25397" target="_blank">U：CSS 學習方法</a>
</p>
<p class="coach-p-start">2. 在練習使用 Bootstrap 時，同學們會需要先熟悉 Bootstrap 官網的分類架構，才能提高查閱速度，第一次上手通常會投資一定的時間。
</p>
<p class="coach-p-start">3. Bootstrap 教案在 10 月班更新為最新的第 5 版，若為重讀的同學，務必再次確認 Bootstrap 導入的版本為第 5 版，若 CodePen 導入的版本和你使用的官網文件不同的話，畫面可能就不會改變喔！
</p>
</div>
</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>

---

## 學期 2-1：Week 2 學習目標 -- 直接進 S2

<div style="width:100%; text-align: center;">
<a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/18187/F-1_Weekly_schedule_11.002.jpeg" target="_blank">
<img style="width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/18187/F-1_Weekly_schedule_11.002.jpeg">
</a>
<span style="font-size:0.85rem; font-weight: 300; color:#9B9B9B;">
點擊圖片可檢視大圖</span>
</div>

#### 本週學習重點

本週的進度是 S2 網頁切版技巧與工具。在這個章節你將開始攻略一些業界常用的切版技能，認識實用的介面工具 Bootstrap 與現在網頁設計的重要原則 RWD。

你的目標是：

- 建立能夠 <u>在處理不同區塊畫面時，選擇適當工具（box model、flexbox、position 等）來進行切版，並完成和設計稿一致的網頁畫面</u>。
- 建立能夠 <u>自主查閱 Bootstrap Components、Utilities 文件，快速建立網頁，與調整排版細節</u> 的能力。
- 了解讓網頁元件適應不同尺寸螢幕的 RWD 設計原理。並且能夠<u>使用 DevTools 觀察 RWD 案例</u>。

具體將體現在 [A: 校長盃 UI 設計首獎作品](https://lighthouse.alphacamp.co/courses/98/assignments/3628)、[A: 組裝我的社群主頁](https://lighthouse.alphacamp.co/courses/98/assignments/3629) 這兩份指標作業中。完成這 2 份作業後，也別忘記繼續往後學習 RWD 觀念喔！

#### 完成 S2 網頁切版技巧與工具 後，你可以⋯⋯

##### 申請提前進度
如果你已經完成 S2 網頁切版技巧與工具，想要繼續往後面的章節學習，可以透過 [提前進度申請](https://lighthouse.alphacamp.co/courses/38/units/7521)，往 S3 章節學習，把握時間持續推進！

<div id="coach-container">
<div id="coach-icon-box">
<img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10438/______512.001.png" style="width:100%;"></div>
<div id="#coach-content-box">
<h5 style="color: #002380 ;margin-block-start:0em; margin-block-end: 0em; margin-top: 0;"> 學習教練提醒</h5>
<p class="coach-p-start">1. 本週學習方法將不同於第一週的 JavaScript，除了需要動手測試熟悉各種 CSS 屬性的效果以外，開始切版前務必要先拆解畫面架構，分析各個頁面層級。因此在開始前，請務必先詳讀 <a href="https://lighthouse.alphacamp.co/courses/98/units/25397" target="_blank">U：CSS 學習方法</a>
</p>
<p class="coach-p-start">2. 在練習使用 Bootstrap 時，同學們會需要先熟悉 Bootstrap 官網的分類架構，才能提高查閱速度，第一次上手通常會投資一定的時間。
</p>
<p class="coach-p-start">3. Bootstrap 教案在 10 月班更新為最新的第 5 版，若為重讀的同學，務必再次確認 Bootstrap 導入的版本為第 5 版，若 CodePen 導入的版本和你使用的官網文件不同的話，畫面可能就不會改變喔！
</p>
<!--
<p class="coach-p-end">4.如果你在完成主要進度後，希望能夠有更進階的學習，請試著挑戰 S1 <a href="https://lighthouse.alphacamp.co/courses/98/assignments/2964" target="_blank">【選修】簡易 RPG 戰鬥：攻擊與補血</a>，運用抽象畫思維來設計物件之間的互動。</p>
-->
</div>
</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>

---

## A5 作業批改延長至今晚（12/01 三 23:59)，把握機會完成 S1 進度吧！

Hi {{user_nickname}}，

<div id="alert-warning">
提醒你 week 1 指標作業 <a href="https://lighthouse.alphacamp.co/courses/98/assignments/2963" target="_blank">A5: 週年慶摸彩活動：完整執行！</a> 只要在今晚 23:59 前繳交，還是能獲得助教批改喔！

</div>

##### A5 作業延長批改至 12/01 週三，把握機會掌握 JS 核心

注意到 {{user_nickname}} 已開始練習實作，還差一點就能完成 week 1 的目標，鼓勵你在今晚空出 1-3 小時的時間，做最後衝刺，盡快完成 S1 進度，以銜接本週的 [S2 網頁切版技巧與工具](https://lighthouse.alphacamp.co/announcements/2130)

若 {{user_nickname}} 來不及在今晚完成 A5 作業，仍然可以繼續嘗試練習、並在**繳交作業後**申請 [作業遲交批改](https://lighthouse.alphacamp.co/courses/38/units/7520#:~:text=%E5%90%8C%E5%AD%B8%E5%AE%8C%E6%88%90%E5%AD%B8%E7%BF%92%E3%80%82-,%E4%BD%9C%E6%A5%AD%E9%81%B2%E4%BA%A4%E6%89%B9%E6%94%B9,-%E6%B3%A8%E6%84%8F%EF%BC%9A%E5%AD%B8%E6%9C%9F%E4%B8%80)，幫助自己獲得助教回饋喔！

---

## 學期 2-1：課程結束後，如何持續學習？

Hi {{user_nickname}}，

學期 2-1 11 月班的班級進度已在 12/19（日） 結束了，在進度結束後，你可以如何持續學習呢？

### 課後助教支援 7 天

很開心看到同學們在過去四週努力學習！不過還有部分同學只差一點就能完成學期 2-1 的[學習目標](https://lighthouse.alphacamp.co/courses/98/units/20535)，提醒大家學期二的每階段課程結束後，還有 7 天的[課後助教支援](https://lighthouse.alphacamp.co/courses/38/units/7520#:~:text=%E5%8B%99%E5%BF%85%E5%AF%A9%E6%85%8E%E4%BD%BF%E7%94%A8%E3%80%82-,%E8%AA%B2%E5%BE%8C%E5%8A%A9%E6%95%99%E6%94%AF%E6%8F%B4,-%E6%B3%A8%E6%84%8F%EF%BC%9A%E5%AD%B8%E6%9C%9F%E4%B8%80)，若 {{user_nickname}} ：

- **過去有作業遲交，且未申請遲交作業批改：**
{{user_nickname}} 可以到 [My scorecard: Assignments ](https://lighthouse.alphacamp.co/me/courses/98/assignments)檢查作業繳交狀況，如有作業標示`Late`，請記得再回到作業頁面，用 `re-submit` 功能提交，助教才會收到通知進行批改哦！

- **還有作業尚未繳交：**
若 {{user_nickname}} 還有作業尚未完成，務必把握這一週的時間，積極完成進度。在課後助教支援期間（2021/12/20 - 2021/12/26）繳交的作業，系統都會直接指派助教批改，無需再次申請遲交作業批改喔！

### 參與助教打書會，多一個學習觸點！

**打書會 #2 -- [精準掌握 JS 語法與核心](https://www.tenlong.com.tw/products/9789864349197)**

很開心在各種管道收到同學們對線上工作坊的喜愛和回饋！！能夠與助教即時互動、實際看助教示範寫 code，真的是線上自學課程中無比珍貴的資源，在打書會中助教除了會分享寫書的心路歷程、如何學習以外，也會有實作的環節讓同學們一起感受，如何拆解問題、尋找與選擇可能的解法，並在每一次的嘗試中，不斷精進自己的技術力！

**雖然本場打書會並非課程中固定的工作坊，教練還是強烈建議所有 2-1 的同學都應該來參加 😎 對於同學們往下學習 JS 必定有很大的幫助！**

<div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;">
• 時間：2021/12/22 (三) 19:30-21:00 <br>
• 活動連結：<a href="https://alpha-camp.typeform.com/to/sOrYCvtj" target="_blank"> 填報名表領取</a> <br>
• 對這個主題還不熟悉嗎？推薦你閱讀<a href="https://ithelp.ithome.com.tw/users/20110962/ironman/3303" target="_blank"> Yuri 助教的鐵人賽系列文</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>

---

# Style code

<!-- style code -->
<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;
}

div#coach-container {
color: #002380;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #002380;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}

div#coach-icon-box {
max-width: 15%;
margin-right:2%;
}

div#coach-content-box {
max-width: 82%;
}

div#coach-content-box p.coach-p-start {
margin-block-start: 0.5em;
margin-block-end: 1.67em;
}

div#coach-content-box p.coach-p {
margin-block-start: 0em;
margin-block-end: 1.67em;
}

div#coach-content-box p.coach-p-end {
margin-block-start: 0em;
margin-block-end: 0em;
}

span#red-color{ color: #e52f28;}

@media screen and (max-width: 400px){
div#coach-container {
flex-direction: column;
}

div#coach-icon-box {
max-width: 25%;
}

div#coach-content-box {
max-width: 100%;
}
}
</style>