終於等到 六角學院-網頁切版直播班-秋季Week-1 網頁切版直播班 開課了，在還沒開課之前，已經有到坊間進修一段時間，有到台大上課，也有買了Hahow的課程， 當然也有買了好幾堂六角學院的課程(今年才發現是2017年買的，都沒認真看完)，

直到今年初疫情爆發，只好待在家裡投資自己，把一些重點課程看完。

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

本週訓練菜單

1. 透過 keybr.com 練習英打
2. 刻意練習 emmet 與常見英文命名鍵位
3. 命名習慣，盡量採語意設計
4. 熟悉編輯器熱鍵 熱鍵中文表
5. 使用 emmet 開發

環境建立

1. vscode 載入HTML、CSS
2. CSS reset css初始化
3. Live Server 網頁即時渲染

容器觀念

• 網頁：容器與元素
• div：排版 切版
• div / span：無語意排版用

區塊元素 / 行內元素

• display：block、inline
• margin、padding
• 區塊：盡可能撐滿 另起一行 設定寬高 h1 p li span
• 行內：並排 a span

盒模型box-model / line-height 行距

• 盒模型：margin外推 / padding 內擠留白
• 行距設定：line-height 高度
• img圖片預設會有2px留白的解法 img { display:block; }
• 文字預設大小：16px / 1em

滿板式設計

• width 通常會下在 1000~1280px
• 滿板式設計 範例程式碼

常見錯誤地雷區

1. 不要寫死高度
2. 不要寫死高度
3. 不要寫死高度
4. 推擠方向請盡量一致
5. 透過父層padding

本週小節

• div 的 class 名稱語意化
• 共用的 class 放自訂的 class 名稱後面，例如：<div class="profile container">
• 不要寫死容器寬高
• 圖片要設定 display: block;

第一週主線任務

• 第一週-個人履歷
• source code