# 網頁切版等級表
此等級表是提供給，參加六角學院培訓班的同學參考：
1. 網頁切版直播班(60天)
2. 2021 程式體驗營(30天)

## LV1：flexbox 多欄式網頁排版
### 每週建議學習時間
1. 網頁切版直播班： 3 小時
2. 2021 程式體驗營： 5 小時

### 知識量與熟練度

1. 瞭解 HTML 標籤使用時機
2. 知道 inline 行內、block 區塊元素原理，並充分瞭解 box-model 盒模型概念
3. 會使用 reset.css、Normalize.css 清除瀏覽器樣式
4. 觀看 UI 版型時，會直覺知道 display: flex 要下在哪處，不會用猜的
5. 清楚明白 flex 的主軸線與交錯軸設定
6. [個人介紹頁](https://xd.adobe.com/view/0f1c0abb-4063-4ed0-96b1-452f520f878b-5a4f/)能在 1 小時內排完
7. [甜點產品列表頁](https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/screen/9ba8ec87-c41b-474f-b92b-d2bb2fc7f922/specs/?fbclid=IwAR15fy4gQca7ZDUNrLwshygmfRsPpVtKRXW-ogWntmWT5WHXRzZ10ZG3Heg)的 PC 版，能在 5 小時內排完，最下方的訂閱你我的甜蜜郵件與表尾不需要設計

## LV2：RWD 手機響應式設計
### 每週建議學習時間
1. 網頁切版直播班： 4 小時
2. 2021 程式體驗營： 8 小時

### 知識量與熟練度

1. 運用 CSS3 Media Queries 設計 RWD 版型，瞭解 CSS 權重覆蓋觀念
2. 瞭解手機版圖片處理、使用者體驗、觸碰式 UI 相關細節，**每個螢幕解析度都不能顯示 x 軸**
3. [RWD 練習頁 no8.website](https://hexschool.tw/yRSS0) 能在 1 小時內排完
4. [香水電商](https://www.hexschool.com/2021/05/20/2021-05-20-covid-public-welfare/)的首頁 RWD ，能在 2 天內排完

## LV3：SCSS 多頁式網頁管理
### 每週建議學習時間
1. 網頁切版直播班： 6 小時
2. 2021 程式體驗營： 12 小時
### 知識量與熟練度
1. 瞭解何謂 **Layout**，頁面一多時，瞭解如何管理版型
2. 會使用 **SCSS** 來做以下規劃
a.藉由變數做統一設定管理 (色系、單位)
b.透過 @import 整合各 SCSS 頁面
c.善用 @mixin + @content 管理響應式 media

## LV4：SCSS+Bootstrap5 整合外部框架
### 每週建議學習時間
1. 網頁切版直播班： 12 小時
2. 2021 程式體驗營： 25 小時
### 知識量與熟練度
1. 瞭解 Bootstrap variable 變數設定，**客製化全站樣式**
2. 懂得將 BS5 與自己寫的 SCSS 合併，擴充網站元件
3. 具備 Grid system(格線系統概念)，瞭解何謂 mobile first (手機優先)
4. 熟悉 BS5 JS 互動元件操作，並設計成自己要的動畫效果
5. 此[募資網站](https://hexschool.tw/hk1Ga)能在 2.5 天內完成

## LV5：CSS/SCSS 設計模式，提升切版思維
### 每週建議學習時間
網頁切版直播班： 20 小時
2021 程式體驗營： 40 小時
### 知識量與熟練度
1. OOCSS/SMACSS/BEM 設計模式，能運用其精神在自己的開發流程
2. 瞭解 Bootstrap5 /Tailwind 的開發邏輯
3. 理解何謂 [SCSS 7+1 SCSS](https://gist.github.com/rveitch/84cea9650092119527bc)，並變成自己的開發形狀
4. 懂得元件(components)、通用類別(utility)、容器(container) 的 CSS 設計方法

> 需有一定工作經驗(1~2年)，才能必備此等級條件