第４週直播筆記 book
===

週一～週五每日助教時間
---
-[９：００～１７：００] slack問到飽

RWD在處理間距的範例
1. margin 推2％左右原本25％把它變成23%
1. space-between,不過項目寬度例如25%，也需要改成23%
1. padding＋border-box的設定，原先的寬度可以維持，例如25%可以保持25%

### Layout 流程圖

## layout.ejs

一分鐘一個動作改好六十頁表頭表尾

## npm 超級軍火庫 可以增加火力

可安裝boostrap\jQuery
可安裝各種神奇東西

## Gulp整合
**++是javascrip做出來的++**

## gulp deploy 功能

讓你網頁即時更新

### Ｑ：在目前台灣的市場
到底一人前端多？ (X)
+++還是三人以上團隊多？(O)+++

junior 工程師 初級工程師
如果第六週第八週的網頁切版做完！我就是職業等級了！！！會被獵人頭哈哈哈啊！！

### node js 是個應用程式 &版本控制

>npm \ gulp \ node 都是很好的工具。非常強大有很多功能
>command+space
>terminal.app 終端機

>windows:安裝時
>npm i gulp@4 -g
>裝在整個電腦上面裝一次就夠了

>##macOS:安裝時
>sudo npm i gulp@4 -g

### 邪惡魔法技巧：

>如果執行出現'warn'其實可以不用理繼續執行，出現“erro"才必須想辦法過關

### 圖：dist--> gh-page 給客戶看靜態網頁用的

# 重頭戲 ejs

# current:index=current第五堂課會在教到
可以出兩個以上layout

layout2.ejs

index.html __>整合 layout.ejs-->變成dist上面的網頁

改ejs就會改到連接兩個網頁

# <%- contents -%>這個叫layout 挖空可以客製化
<%- title -%>放title那邊不用管他

# 圖片路徑不能更改
assets
- images
- js
- style
都不要改名字也不新增其他平行資料夾

# gulp會自己編譯scss 不需要再開prepos

aside 左邊可以當固定頁面 右邊的main 可以給他用成<%- contents -%> 他就會挖空可以各種頁面

### Ｑ：如果要新增 _xxxx.scss 也是放在app/style 資料夾 然後all.scss在import是嗎？
Ａ：是的

# 一個頁面只能吃一個layout

### 第四週交作業一定要用gulp GitHub



# scss 最多四層巢狀不要太多層，會拖慢速度。


# 1.寫好header的RWD全部一起寫


# 2.再寫footter的rwd

# hover 縮寫語法

老師的鬼故事： 工作到下班前十分鐘，老闆突然說改顏色改成藍色或紅色
有２６０處 行數下班前十分鐘突然要改顏色
只能靠scss的變數功能

$primary:#fff0000;
$info:#ff000;
可以自訂名字
前面放錢的符號就可以

$font-xl:24px;
$font-m:16px;

# 如此圖：變數有先後順序，他會往前面找，所以不要放在後面，都會講哪個檔案，第幾行出了問題。

# 編譯出錯，不會編譯更新all.css,需要去終端機去看錯誤訊息去修正

＠media(max-width:375px){
.content{
font-size:$font-xl;
}
}

最後提示： ５－８週都在學長姐一些你看不懂的地方擴充：
cssrest

# 順序很重要all.scss
all.scss
@import“＿variable.scss"
@import"_index.scss"
@import"_rest.scss"

順序很重要 先variable 在index 最後rest
如果名字沒有寫完整他也會去找關鍵字

他會編譯到

all.css

變數統一放在這個檔案裡面：
@import“＿variable.scss"

如果位置放錯會這樣：

1.varibable
2.reset
3.layout
4.index
5.qa
6.product (page)


style資料夾裡面檔案名稱前面有＿ 都是拿來合併到all.css用的

# Ｑ：問題是我不知道，什麼是faq之於 scss關聯性？？ 求解

# 斷點變更的變數必用必備必考：


# 下週 直接提供github repository給廖老師，他會幫我們看code

１．先基礎scss結構寫好
２．才去看學長姐的結構。
３．因為他們的拆分太細了
４．而且有些compost是56週才會教

# 本周修煉流程：
Ａ：作業：Layout 眼鏡header footer結構

Ｂ：模仿學長姐，新增寫法

Ｃ：最後再丟給老師給老師檢查

第三週主線任務可以用copan交。

也可以三四週都接，不交第三週直接在第四週回報內容寫

『助教，我３４週一起做 Ｇithub 給你。再請協助檢視。
（兩份可以一起交）