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

開課提醒

錄影
點名報到，報到 Code：QyOxgnPVlmoA，20:00 才可報到
將書籤加入最愛
覆述本課宗旨
學習進度安排、第二屆學長姐心得
主線、小組任務獎品(達四關)，每日任務安排
徵召 7 位志工(新老手皆可)，每週可提供 1.5 hr 協助切版社群，請私訊洧杰老師(gonsakon)申請加入，週日前截止。
中場休息，訂出小組討論時間

校長語錄

你不需要一開始就很厲害，但必須開始才有辦法很厲害

本週重點

HTML 標籤元素屬性
常見實務觀念分享

宗旨

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

願景

成為全世界最優質的網頁切版教學教育單位

義務與責任

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

環境建立

載入與新增 HTML、CSS
運用 Emmet(字典與影片)、學姐操作示範
練功菜單
插件安裝
1. Preview on Web Server 或 Live Server

1 px 也不差的容器觀念

網頁可以切分為容器與元素
範例網站：Yahoo 首頁、Yahoo 新聞

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

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

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

盒模型：margin 與 padding 推擠
行距設定：line-height 的高度影響
圖片距離分享

1px 也不差的常見誤區

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

心得分享

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

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

本週重點

提交您的第一週主線任務
各組約時間進行小組任務

常見問題

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

學習建議

新手請觀看影片課程前五個章節後，再來嘗試作第一週主線任務
1. 2020 VS Code 網頁編輯器、HTML 基礎教學
2. 2020 CSS 常用語法
3. 2020 使用 CSS 變更 HTML 標籤特性
4. Flex 網頁排版技巧
5. Flex 精神時光屋
可跳過課前最終作業一、二，如果想花時間多練習也可以。

第一週主線任務

總計兩個作業：

備註一：可觀看作業設計稿 - 線上預覽操作教學

備註二：線上網址圖片，這裡六角已經上傳到圖片空間，本次作業圖片都放在 week1 資料夾，網址如下，其他以此類推：

補充：如果不知道怎麼找到圖片路徑請點我