---
tags: 2021 程式體驗營
---

# 2021 程式體驗營 第二堂直播筆記

## 開課前尬聊時光

先上[校長的 Flex 切版教學影片](https://www.youtube.com/watch?v=iVS7qrMEbe8&t=5s)

真正在工作的時候別人沒時間等你切版 所以要一直練習切版、加強切版的速度

通常去公司上班，也是會提供設計稿給你做
然後老闆會問很現實問題：啊這個設計稿你一天可以做完嗎？ 或是 啊我想禮拜五之前收到 你可以全部做完嗎？ 之類的
老闆不會管你是不是新鮮人，只想知道你能不能當超級賽亞人XD

已有工作半年以上的經驗 建議至少 2.5~3 天要切完電腦版跟手機版(JS 效果可不做)
應該要持續練習 把切版熟練度提升 然後刻意去練習自己不熟悉的地方

想提升切版速度到達業界水準會建議假設你今天切五小時 能不能後面進步成切一小時
你的熟練度能練到那邊嗎？如果不行 就持續練習！
校長也說：最好是能壓到兩小時內切完 就有到達業界水準（但不是亂切哦！）

六角的影音教學是手把手講很細那種
但直播就是回答問題的 問題問的精準就會回覆問題 直播屬於比較重互動的模式

這次直播班 2021 體驗營這邊是會答覆問題跟分享老師自己的切版心得
老師會説一些自己的開發心得、開發小撇步等等 分享給大家
比如專業開發者注意的細節、開發上提升效率的方法等等
這些資源都會放到 youtube 上
建議同學獲得知識後再看直播錄影檔，去仔細看老師做了什麼才提升效率做那麼快？

直播時速度很快但不用擔心 看直播錄影檔時可以回頭看想看的部分、也可以暫停看細節等等～

## 切版分享

### 嘗試找出不熟練處

首先上一下老師的[第一次切版筆記](https://www.notion.so/Flex-74fe54de51b34c1e92b0fd7f9699c92b)
這邊老師自己整理出老師在切版時的一些不熟練處 然後就勤加練習這些地方
比如 emmet 語法忘記 就一直練習到讓大腦有印象 寫時可以馬上反應過來這邊之前做錯了應該如何做才對等等

也順便建議同學 寫一下首次練習可以改進的地方 然後針對那些去刻意練習
不要直接就馬上做第二、第三次
所謂的專業應該是朝向不熟悉的地方，把它變熟悉！

所以切版做完後 花個十到十五分鐘先暫停一下 找看看剛才切版時不熟悉地方去特意練習

另外也請先把基礎觀念弄懂再去拼手速 不要一直猛衝，都沒學到影片觀念就一直做
這樣做出來就是爛 code 沒意義

### 看設計稿的順序

老師自己會先看設計稿中的共通色系 比如網頁的主色、副主色之類的
然後字體等級也會先拉出來看 比如有：最大的標題大小、一般的文字大小、其他的特殊設定的文字大小等等
另外再注意一下間距那些是否有特殊規律 比如統一是幾的倍數等等

### 準備切版

先建立專案資料夾 然後把網頁的圖片拉進資料夾再開始切
結構上會有 images 資料夾放圖片 css 資料夾放 all.css 檔案 然後是一支 index.html 檔案用來撰寫代碼

另外說一下，在 VS Code 可以客製化做 片段程式碼 設計自己的 reset css 或 html 結構
不要小看這個流程 它可以加速寫 code 的效率 教學的部分可參考[這篇文章](https://pjchender.blogspot.com/2017/04/vs-code-snippet.html)

影片的教學我就不提供說明流程了基本上跟那篇文章都差不多～～
使用方式就是輸入關鍵字然後按 tab 直接產生代碼

簡單說一下：
scope 是指定使用的檔案 比如 javascript html 等 設定後就只能在該檔案中使用關鍵字 沒設定就是所有檔案都能使用
prefix 是設定關鍵字的 這邊會建議不要使用已經有的 比如 ! 已經有了就不要重複設置不然很難找你自訂的是哪個啊～～

### 開始切版

首先最上方 header 的部分會寫一個 div 然後裡面的 LOGO 是 h1 右邊選單是 ul>li 的結構
這邊 flex 要設在 header 那個 div 而非設在 h1 跟 ul

在設定 container 寬度時要先看一下設計稿中是否有滿版的區塊 有的話要單獨撰寫一個居中容器 寬度 940px margin:0 auto;
像甜點設計稿的 footer 就是滿版區塊 所以這邊會先創一個 container 居中容器來給其他非滿版的區塊使用

然後講一下 emmet 的部分
本來是這樣：
`container>header>h1+ul` 然後再分別到 h1 ul 裡面寫 emmet
但其實還可以這樣：
`container>header>((h1>a>img)+(ul>li*4>a[href="#"]))`
驚不驚喜？意不意外？趕快研究起來啊～～～

然後再講一下 svg 是向量檔 表示該圖片放超大也不會失真(模糊或鋸齒、缺角等等)
但是普通的 jpg png 放超大通常是會失真的
所以一般 LOGO 通常會用 svg

這邊我們切換設計稿找到全部都圖片的那一頁 看一下 LOGO 真實大小應該是多少 再按照真實大小給 LOGO 那個 img 標籤設置寬高(w220 h40)

接著觀察一下 header 裡面的元素有什麼共通要點
比如 LOGO 跟 ul 上下都有推 30px 的距離 所以直接給 header 設 padding: 30px; 就不用再給 h1 跟 ul 設定 因為這樣變成要設兩地方

現在看一下畫面呈現效果如何 會發現 ul li 變成從上到下排序了
此時就需要再給 ul 設置 flex 跟 row 這樣才能讓裡面的 li 由左到右排序

這邊因為整個設計稿的文字顏色都差不多一樣 就可以直接寫在 body 裡面
然後像所有 a 標籤都沒下底線 就可以直接寫 a {text-decoration: none;}

另外觀察後可以發現 設計稿中 header 裡面的元素是保持在同樣高度的 所以這邊再下一個 header{align-items: center;} 讓元素垂直居中
最後再依照設計稿給 ul>li>a 設置 pt10 pb8 pl30 pr30 的部分
header 就算完成囉

再來是 header 下面那張大圖 直接 emmet 寫 .banner.container>img 搞定

呈現畫面時可以發現購物車按鈕沒對齊到 banner 圖片的最右邊
在此針對購物車按鈕做一下補充：
老師的 cart 有點靠左 沒有貼齊最右邊
這部分建議可以跟設計師討論 老師這樣做是因為移位置到稍微左邊一點會讓購物車按鈕變的比較好點擊 可以增加使用者體驗
好的工程師就是要讓使用者有一個好操作的網頁～
做網站 其實不是工程師的事 也不是設計師的事 而是大家的事
所以會建議 假設這個設計稿有某些地方你覺得對用戶來說操作上不是那麼友善 都可以跟設計師反應 雙方在重新溝通協調 做出更好的網站～

OK 繼續， .banner 跟下方區塊有一個間隔 60px 這邊就給 .banner 設置 mb60 ～
然後往下 下方的區塊是 940px 左邊佔了 300px 右邊佔了 620px 兩者中間間隔 20px
這部分說一下，寫程式沒有所謂的正確答案
你這個區塊可以直接給左邊或右邊設置 margin-left、right 20px 來處理
也可以直接設一個 justify-content: space-between; 讓區塊直接排列在左右 產生出中間間隔的 20px
這部分看你喜歡怎麼做都可以～

再來開始說下方區塊的詳細實作

首先是左邊的選單 .aside
裡面會先是一個 h2 標籤為甜點類別，h2 下面會是 ul>li 的結構
這裏可以直接用行距 取代文字上下的 padding
li 因為有 border 所以會另外設 margin-bottom: -1px; 這樣可以讓 border 變成 1px(不然應該是會出現 2px 的效果因為每個 li 都有 border 上下貼在一起呈現出來會變成 2px)

然後右邊產品列表 productList 會設 flex-wrap: wrap; 讓超過 620px 寬度的區塊自動往下掉，這邊記得給 li 設寬度 設計稿上每個 li 區塊寬度是 300px

記得給 img 設 display:block; 取消圖片跟下方文字區塊 3px 的距離

往下補充說明一下 本日精選 那個標籤的部分：
假設 .tag 在網頁中的多處重複使用 就會建議 class 直接叫 .tag 因為所有設定都相同 就不會綁定在其他父層身上
但如果每個區塊的標籤使用時設定是不同的話 就建議綁在其他元素身上 比如 .cart .tag{...} 或 .product .tag{...}
這邊只有商品列表用到 按照老師設計的 會寫 .productList .tag{...}
另外這個標籤是用定位方式設定上去的 所以他的上層 li 要加 position: relative;
他本身則要加 position: absolute;
然後這個本日精選標籤的書寫方向是從上到下 每個文字之間有小距離 5px 所以需要加上以下代碼：

/* 書寫方向 */
writing-mode: vertical-lr; 
/* 文字間隔 */
letter-spacing: 5px;

再來右邊愛心那個 icon 也是 position: absolute;

備註：老師明天會補上 position 的教學影片 請不用太擔心看不懂

再來馬卡龍跟價格區塊用 div 包起來 給 div 設 flex 跟 border (border-top 不用設)
這邊一樣直接用行高推文字上下間距 line-height: 56px; 然後文字記得設居中
文字大小、行高跟文字居中這些直接寫在 div 的樣式中設定就好
再來單獨設定馬卡龍那個文字 它是用 h2 標籤做 寬度是 173px 給他 border-right
價格的部分寬度是 127px 價格要設文字粗細為 bold

加入購物車是用 a 標籤做的 這邊文字大小是 24px 行高 65px 記得設一下 display:block; 跟背景色

以上就完成囉！

## 其他補充

多增加腦補能力 可以提升開發效率 不要寫一行看一次畫面老師說會傷眼睛
最好是一次寫完一個區塊了再看一下就好～

另外分享一下葉子助教的文章[HTML img 下方有不明空隙？！](https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/)

然後第二週小組任務的第二題 第二三個連結是補充觀念用的
另外請同學自己去查一下 fontawesome 的用法教學(免費 icon 網站 開發時會很常用到)

老師買的書：
20~22歲
1. 超越巔峰 JavaScript
2. 專精 CSS

24~28歲
1. 如何友善溝通
2. 如何不加班
3. CSS 架夠

## 一些問與答

Q: 是否相信有這種鬼話：一個網站會出現 8~10 個以上的字型？
A: 業界很大，但是專業圈很小！樹大必有枯枝～會遇到奇怪的人打擊你信心，遇到只能放下、接受。

Q: 什麼時候要使用這個標籤header 標籤？
A: header 標籤其實不是只有一處有，可以有多處使用，他並不是單獨出現一個的標籤，也不代表他一定只能放表頭。詳細說明請自行估狗 老師只講這些～

Q: svg 檔案 放在網頁上 檔案會比其他 jpg png 大嗎？
A: 通常是 logo 會看到 svg ，其他都是 jpg png 那種圖片檔案

Q: H1 裡面沒有包文字的話， SEO 會搜不到主題嗎？
A: SEO 比較會搜 title 標籤，LOGO 圖片的 alt 會被搜尋到，也可以使用圖片取代文字方式，寫說這是甜點電商，這部分看個人高興，兩者皆可。

Q: 向量圖不給高寬會怎樣？
A: svg 可以超大一張 要看他預設的寬告示多少 建議是看設計稿大小做使用

Q: 請問 container 為什麼不設 1024px ，padding 左右推 42px 呢？
A: 因為開版就是 940px 不是 1024px，1024px 是給你看說這邊是滿版而已 實際內容寬度是 940px，其他就是滿版

Q: ul 可以改 nav 嗎？
A: 語意化規範來說 nav 要先下標題標籤(ex: h3 標籤)再下 ul>li

Q: nav是什麼？
A: 當網頁中有很多 ul>li 時用的， nav 是 HTML5 標籤，網頁中只能有一個，表示這是最重要的。

Q: 請問老師說外圍不設 1024px 的意思是，其實最外圍 div 設 max-width: 940px 才是比較正確的嗎？
A: 不是 只需要設中間內容是 940px 寬度 其他都滿版～～

Q: 如果購物車是在a區塊內文字靠右呢？
A: hover 看起來很怪 右邊沒顏色

Q: 所以做作業的時候是可以依自己的想法改作業稿的嗎？
A: 可以 但是要說明你為何改 出發點是啥 然後跟設計師討論

Q: 請問寫程式,是不是追求寫的code越精簡,網頁執行的效能越好?
A: 對 但是要說下 如果主管要你五天寫完 但你要做二十天才做好 你就先做五天版本 後面再做成二十天的那種版本 先求有再求好

Q: 為什麼不最外層放 container，而是要到處加 container？
A: 因為有些東西是滿版區塊 所以 container 範圍要避開滿版區塊 container 就會設定內容的寬度

Q: 老師用的筆刷是什麼？
A: 筆刷是 Mac 的 叫 screenbrush ， windows 沒有

Q: 本日精選用 before 做可以嗎
A: 建議用標籤做 不建議用 before 後端比較好串接 前後端整合上需要討論

Q: 那 before 跟 after 使用時機是什麼呢?
A: 點綴用的，跟主體不相關

Q: 為什麼 div 加上絕對位置後就不會滿版了？
A: 絕對定位就是它可以跟東西重疊在一起 所以可以這樣做