# 切版暖身教材使用說明書

`學期三`

在接下來學期 3 前端的課程中，你將以建立「前端軟體工程師」應有的技術能力、產業能力為目標，來進行八週的學習之旅～

### 學期 3 的旅程：和業界要求接軌

若你隨意打開求職平台上任一相關職缺，「熟悉 HTML/CSS」絕對是拿到入場卷的第一道門檻。

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14485/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/14485/ExportedContentImage_00.png"></a></div>

其實大部分的人在接觸網頁開發初期，就會學到 HTML/CSS 這兩項工具。如果你跟著 AC 的課程一路壆上來，可能也已經做過不少小作品。

不過，「能做出網頁設計」和「擁有業界認可的切版實力」中間其實有很大差別。在程式架構上，你要選擇適合的前端工具，並撰寫出易於維護的程式碼，並以利後續和團隊協作；品質上，切出和設計稿一模一樣的版是基本要求；時間上，你必須在短時間內交付出面試官、主管或客戶指定的成果。

在課程的第一週，我們會進行為期一週的「切版特訓」，我們會完成兩個專案 -【網紅廣告服務平台】和【ALPHA Shop 購物車】，這兩個版型都是根據工程師實際在工作場景上接到的案子改寫而來：

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15429/2021-04-14_at_12.02_PM.gif" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15429/2021-04-14_at_12.02_PM.gif"></a></div>

### 給想提升切版手速的人們的練功禮盒

這兩個專案看起來很酷，不過難度也很高！如果你之前不曾用純 CSS 完成從 0 到 1 的網頁切版，可能會覺得有點挑戰。

為了幫助你在正式進入特訓前先做個暖身，喚起沈睡已久的 CSS 語法記憶，我們特別提供了這包「前端切版挑戰暖身教材」，讓希望提早強化切版技能、複習 HTML/CSS 語法的你，可以及早累積經驗值。

這份教材包含了兩個章節，分別由現職前端工程師帶你手把手來完成切版專案，「毛小孩星球」是一個常見的電商網站版型，而「廣告系統」的本質是一個資料表 (data table)，常見於各大網站服務的後台。

#### 毛小孩星球：使用 CSS Grid 打造 RWD 佈局 & 偽元素應用技巧

<div style="width:50%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15630/ExportedContentImage_08.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15630/ExportedContentImage_08.png"></a></div>

以我們常見的電商網站為範本，這個「毛小孩星球」流浪狗領養網站，能讓你鍛鍊 <code>flexbox</code>、<code>grid</code>、與 <code>position</code> 這三種 CSS 排版技巧。我們也會從行動頁面先開發並建立 RWD，讓你體驗 mobile first 的開發思維。

而專案的最後，助教 Mike 更會示範如何在面試中，有效描述你的專案，讓面試官留下良好印象。

而這個章節會有三份作業：

1. 透過反覆練習，並在一定時間內完成功能
2. 自主專案：挑選一個類似的版型，從零刻出來
3. 撰寫一篇文章/錄製一個短片，向面試官介紹你的專案

#### 廣告系統：資料表與 dark mode 的效果

在這個單元裡，講師會花更多時間分享他分析設計稿時的思考脈絡。你也有機會了解到模組化的 CSS 寫法，講師會使用 BEM 命名的方式來撰寫專案。

<div style="width:70%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/12583/ExportedContentImage_10.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/12583/ExportedContentImage_10.png"></a></div>

### 先修基礎

我們假設你使用這套教材的你已經熟悉基礎 HTML 語法及下列 CSS 基礎語法，包括：

* <a href="https://www.w3schools.com/cssref/pr_class_display.asp" target="_blank">display 屬性</a>
* <a href="https://www.oxxostudio.tw/articles/201501/css-flexbox.html" target="_blank">flexbox 排版系統</a>
* <a href="https://www.w3schools.com/css/css_grid.asp" target="_blank">Grid 網格系統</a>
* <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position" target="_blank">position 定位方法</a>

並且有至少一次的經驗：

* 給你一張網頁設計稿，你能夠運用 HTML/CSS 製作出大致相似的網頁

#### 先修工具

* <a href="https://codepen.io/your-work" target="_blank">CodePen</a>，助教會使用 CodePen 來展示程式碼。

### 學習建議

我們預估你至少會需要 10 小時，完成所有補修內容閱讀，以及另外 12~15 小時來完成作業練習。

#### 如果現在距離開課還有一段時間

我們建議你每天預留 1-2 個小時，練習手感，也建立學習習慣。

#### 如果你即將開課，來不及完成補修教材內容

也不用太緊張，這邊的內容對後續學習沒有擋修的關係，只是切版熟練度提升的話，學習第一週的「切版特訓：網紅廣告平台」&「切版挑戰：ALPHA Shop 購物車」會輕鬆許多，第七到八週的小組協作專案也會大量運用到切版技能。

在課程進行時中，行有餘力，可以再來補修教材練練功，提升手感和經驗值。

### 小提醒

在這些補修教材中，我們都設置了練習題，讓你能夠透過答題來判斷自己的學習成果。不過，需要提醒你的是：

* 這裡的教材與題目屬於額外提供，它們<u>並不在進度制助教的支援範圍內，因此將不會有助教協助回答與批改</u>。
* 若你對於補修教材中的內容真的感覺非常模糊，歡迎尋求 <a href="mailto:[e-mail]" target="_blank">學習教練團隊</a> 的支援，與你討論學習規劃。

最後，再次歡迎你加入 「學期 3：軟體工程師養成 - 前端課程」，期待開課後與你在線上相見！