---
# System prepended metadata

title: 切版直播班 - 開學典禮
tags: [網頁切版直播班 - 2024 夏季班]

---

# 切版直播班 - 開學典禮

![image](https://hackmd.io/_uploads/HyVWeBFU0.png)

今天介紹的是網頁切版直播班

> 切版**專題**班開學典禮為：7/3 20:00

---
1. 錄影
2. 點名
3. 將[書籤](https://rpg.hexschool.com/#/training/12062289980086964008/board)加入到最愛
4. 主要內容
    1. 講師自我介紹
    2. 覆述本課宗旨
    3. **學習進度安排**
8. 加碼服務介紹，[申請小組分組](https://forms.gle/rh8H16PVytEHg44J8)，7/5(三) 分組完畢！

## 關於卡斯伯老師

- 六角學院共同創辦人
- 大學美術系、研究所為視覺傳達設計所
- 求學期間為設計師，出社會轉為工程師，因為工程師錢比較多 ⭕
- 前鴻海軟體工程師（~~棄百萬年薪創辦六角學院~~）
- 七屆 IT 鐵人邦獲選紀錄（一個很肝的學習紀錄）
- 出版一本書（JavaScript 求職必備）

另外...，把 CSS 練到神級的那個人
- 我寫過超過 100 篇 CSS 技術文
- 翻譯過 Bootstrap 文件
- 建構過兩次 CSS 函式庫
- 切版速度大致是...https://pse.is/DBJGW


## 宗旨

秉持六角學院熱於分享的精神，秉持熱心、耐心、同理心為根基，不僅帶領學員掌握前端技術，並提供以學員職涯發展為中心的教學環境。

## 願景

**成為全世界最優質的切版直播班教育單位**

## 義務與責任

1. 六角團隊有責任帶領每位學員，體驗 CSS、JS 技能
2. 六角團隊有義務帶領整體班級，凝聚班級向心力，藉由同濟效應提升學習意願
3. 六角團隊必須考量每位學員的背景，由淺入深地規劃課程內容
4. 六角團隊需為學員設計階段性目標，讓學員能一步步完成任務，進以掌握本門課程技能

## 六角社群特質

- 分享
- 溝通
- 好奇

## 本課程進行方式及進度安排

### 平台介紹

1. **程式勇者村**
    - 提交任務
    - 上課講義
2. **Teachable**
    - 影音課程
    - 直播錄影
    - 小節作業
3. **Discord**
    - 即時提問
    - 程式交流

### 課程包含服務：

**課程預習**

1. [影音課程](https://courses.hexschool.com/courses/enrolled/2522456)
    1. 助教發問服務

**主線內容**

1. [直播課程](https://rpg.hexschool.com/#/training/12062289980086964008/board/content/12062289980086964020_12062289980086964022)
    1. 最後一堂課 8/23
2. [每週主線任務](https://rpg.hexschool.com/#/training/12062289980086964008/board/content/12062289980086964009_12062289980086964028)
    1. 助教批改服務
    2. LV 機制
    3. 最終作業繳交期限：9/8
    4. 最後一週額外說明：
        1. 可選自己繳交或分組（可採用專題的組別或自行另外組隊）
3. 助教帶你做作業 🆕
    1. 時間：直播課程結束後的每週六早上十點，每次約 2 小時
    2. 包含週數：第一週～第八週作業
4. 線上助教服務
    1. [範例](https://discord.com/channels/801807326054055996/1166205673307127919/1215599897118515291)
    2. 出場時間：7/29 ~ 9/6

**額外挑戰**

1. [每日任務](https://hackmd.io/NOSfirdTS3-LOThJdaSkfQ?view)
2. [每週團隊任務](https://hackmd.io/HzKf8bfxToSQsqMEUMYS2w)

### 該如何分配學習時間？

> LV1：每週十小時
> 
1. 課程預習
2. 主線課程輸出

> LV2：每週 15 小時以上
> 
1. 增加額外練習及挑戰
2. 提高主線輸出的 LV

### 作業卡關怎麼辦？

> 卡斯伯原則：不要讓進度卡住，有狀況可以參考各種解方
> 

解決方案：當一個地方卡住超過十分鐘，就可…

1. 作業討論頻道發問
2. 觀看助教撰寫方式
3. 觀看別人寫完的成果

好的參考方式：

1. 自己照著打一次，並試著理解語法
2. 加上每一個段落的註解
3. 參考自己寫的成果，再重新寫一次

*注意：參考不意味著抄襲*

### 該如何開始準備？

1. **提升熟練度**：參考 [洧杰老師菜單](https://hackmd.io/p_HZVDaqQwW5hpdymZBT5Q)
    1. 課前最終任務一、二練習
    2. Kata：錄影自己的開發流程、記住常用的語法熱鍵
2. **各週難度介紹**：每日與主線任務設計，四、六、八週作業皆為一個檻
    - 提交等級概念
        - LV1：任選兩頁含 RWD
        - LV2：至少做兩頁含 RWD，其中一頁必須為首頁
        - LV3：全部頁面都做，不需做jQ與 BS5 JS 效果
        - LV4：全部效果都做

### 主線課程大綱

**第一週：1 px 也不差的版型控制術**

在排版時，常常為了幾 px 的位移或跑版而傷透腦筋嗎？其實只要掌握幾個關鍵知識，你也能切出精準到位的版型！

2024/7/5（五）20:00~22:30，2.5 小時

**第二週：Flexbox 網頁排版術**

李小龍說過：「我不害怕曾經練過一萬種踢法的人，但我害怕一種踢法練過一萬次的人」，網頁排版擁有 float、inline-block、flexbox、grid 流派，但是你真的有認真將一個流派專精到讓人會怕嗎？本週題目我們將會詳細講解 Flexbox，並藉由後面幾週的反覆練習，讓您成為 Flexbox 的切版專家！

2024/7/12（五）20:00~22:30，2.5 小時

**第三週：伸縮自如的 RWD 手機網頁排版術**

行動裝置這麼多，你的網頁在 全部螢幕解析度都支援嗎？還是你只會下 一個 手機版 media query，而 中間的 size 都忽略了？其實 RWD 沒你想像中的複雜，讓我們來教會你！

2024/7/19（五）20:00~22:30，2.5 小時

**第四週：多頁式網頁設計**

去面試時準備的作品，永遠只有一頁個人介紹網站嗎？頁面一多就不知道該怎麼管理你的 CSS 了？這堂課我們將會分享心法與工具，讓你頁面再多也不怕！

2024/7/26（五）20:00~22:30，2.5 小時

**第五週：後台表單設計**

一個完美的前台，一定會有個維護方便的管理後台方便上稿，也同時會是你與後端工程師協作時，必須要會的版型設計！

2024/8/2（五）20:00~22:30，2.5 小時

**第六週：導入網頁規範設計流程**

當你頁面數量不是 3~5 頁，而是 30~50 頁以上，該如何制訂規範，讓產出的網頁都能模組化輸出，進以提升效率，也是網頁設計師需考量的一環！

2024/8/9（五）20:00~22:30，2.5 小時

**第七週：視差滾動**

現在網頁已經擺脫中規中矩排版，我們能藉由簡易的 JS 套件，讓自己的網頁具有動感，設計出具備視差滾動技巧的優美網站！

2024/8/16（五）20:00~22:30，2.5 小時

**第八週：CSS 模組化管理**

一個成熟的前端介面，不論是版型管理、語法支援度、元件應用都得顧及到位，本週將會詳細介紹各角度的技術詮釋，以做為完美的收尾。

2024/8/23（五）20:00~22:30，2.5 小時

### 各週需要的知識點

說明文件：https://hackmd.io/nbeCZwX_TUCx9gSdDaVX-A


# 8 份版型贈送

大型寵物服務網 - 29 頁
https://xd.adobe.com/view/2c355bc0-1368-4995-b20d-9882992c75b0-7966/screen/69b72d39-0e8e-4849-96a2-617108c70de1/

大型訂房網 - 26 頁
https://xd.adobe.com/view/0cf6ec93-07a3-492f-58f2-9767ba1cfdfb-7ac7/

瑜珈課程服務 - 31 頁
https://xd.adobe.com/view/ddcefee3-3028-48a2-8840-4d3ba00e8807-889d/screen/c0ededf0-68d6-462d-ba14-acf05aaff801/

NFT 藝術家交易平台 - 20 頁
https://xd.adobe.com/view/bcf8f7eb-689c-4850-b531-a78259c0cdd8-e9ab/grid/

藝術展覽 -  17 頁
https://xd.adobe.com/view/057f9d4e-6781-43fe-9aea-9f73f67dd2fd-502c/

香水電商 - 17 頁
https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/

陶瓷展品 - 18 頁
https://xd.adobe.com/view/b251d34b-5ec0-4978-7793-0fd19c2eaad1-c460/

程式家教 - 17 頁面
https://xd.adobe.com/view/ec5c5da0-6d93-4e78-bd3b-c8e9584fde44-b90f/screen/8abe4f5e-6bcf-4391-b323-d4fb37b1509a/

各版型圖片連結：

- 大型寵物服務網 → [week8-petpet](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-petpet)
- 大型訂房網 → [week8-booking](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-booking)
- 瑜珈課程服務 → [week8-yoga](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-yoga)
- NFT 藝術家交易平台 → [week8-202207](https://github.com/hexschool/2022-web-layout-training/tree/main/week8-202207)
- 藝術展覽 → [exhibition-week6](https://github.com/hexschool/webLayoutTraining1st/tree/master/exhibition-week6)
- 香水電商 → [perfume-week6](https://github.com/hexschool/webLayoutTraining1st/tree/master/perfume-week6)
- 陶瓷展品 → [week6](https://github.com/hexschool/webLayoutTraining1st/tree/master/week6)
- 程式家教 → [week6-202207](https://github.com/hexschool/2022-web-layout-training/tree/main/week6-202207)