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

[講義連結](https://rpg.hexschool.com/training/21/show?embedhm=1MxRfwpoRle5MrgU9eIpWA)

## 校長語錄
> 你不需要一開始就很厲害，但必須開始才有辦法很厲害

## 本週重點
* HTML 標籤元素屬性
* 常見實務觀念分享

## 環境建立
1. 載入與新增 HTML、CSS
2. 運用 Emmet([字典](https://docs.emmet.io/cheat-sheet/)與[影片](https://www.youtube.com/watch?v=6VUFO6sLS5M))、[學姐操作示範](https://youtu.be/tFvFMncRYYM?t=62)
3. [練功菜單](https://hackmd.io/iE6mxohOS-ujKU398Ewk1w)
4. 插件安裝
1. Preview on Web Server 或 [Live Server](https://hackmd.io/QpfYS3cwTl2NMU7bUqFNxw?view)

## 1 px 也不差的容器觀念
* 網頁可以切分為容器與元素
* 範例網站：[Yahoo 首頁](ht2tps://tw.yahoo.com/)、[Yahoo 新聞](https://tw.yahoo.com/)

## 1 px 也不差的區塊與行內元素概念

* display: block、inline 概念複習
* margin、padding 用法
* **小問題**：哪些 HTML 標籤是區塊元素？
* ==h1==、==ul==、a、==li==、==p==、span、==div==

> 同學問題： css reset 跟 css normalize 的差別
> css reset => nothing left
> css normalize => 有一些預設樣式

## 1 px 也不差的 box-model 與行距設定

* **盒模型**：margin 與 padding 推擠
* **行距設定**：line-height 的高度影響
> 高度由行距產生，非文字(行距預設為1倍)
* **圖片距離分享**

## 1px 也不差的常見誤區

* 常看到寫死高度與寬度
* 上下 margin、padding 推擠用 %

## 心得分享

* 推擠方向請盡量一致，以方便維護，例如 margin-bottom
* 透過父層 padding 留白，統一設定

## 滿版式網頁與 CSS 選擇器設計

* [蝦皮](https://shopee.tw/)
* [IT 鐵人邦](https://ithelp.ithome.com.tw/)
* [T 客邦](https://www.techbang.com/)
* [IT HOME](https://www.ithome.com.tw/)
* [範例程式碼](https://codepen.io/liao/pen/yLYyYaZ)

## 本週重點
* 提交您的第一週主線任務
* 各組約時間進行小組任務

## 常見問題
- 要給每個區塊自訂的 class 名稱
- class 名稱順序，共用的 class 性質放自訂的 class 名稱後面，例如：`<div class="profile container">`
- 不可以寫死容器寬高
- 圖片要設定 `display: block;`

## 學習建議
1. 新手請觀看影片課程[前五個章節](https://courses.hexschool.com/courses/enrolled/1389454)後，再來嘗試作第一週主線任務
1. 2020 VS Code 網頁編輯器、HTML 基礎教學
2. 2020 CSS 常用語法
3. 2020 使用 CSS 變更 HTML 標籤特性
4. Flex 網頁排版技巧
5. Flex 精神時光屋

2. 可跳過課前[最終作業一](https://courses.hexschool.com/courses/2020112/lectures/31938398)、二，如果想花時間多練習也可以。

## 第一週主線任務

總計兩個作業：
1. <a href="https://rpg.hexschool.com/training/21/task?type=detail&id=202" target="_top">第一週 - 個人履歷</a>
2. [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF)

備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view)

備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/webLayoutTraining1st)，本次作業圖片都放在 **week1 資料夾**，網址如下，其他以此類推：
* https://hexschool.github.io/webLayoutTraining1st/week1/photo.png
* https://hexschool.github.io/webLayoutTraining1st/week1/line.svg

>補充：[如果不知道怎麼找到圖片路徑請點我](https://i.imgur.com/O7nQcFm.gif)

###### tags: `網頁切版直播班 - 2021 夏季班`