Frontend Intermediate Course - 作業三直播筆記

這次作業老師給我的評語是：「Good! 很不錯」，還有《值得參考》的標籤！
(*´▽`*) 太開心了～

胡立老師的直播：
3. 寫 CSS 必備神器：CSS 預處理器

看完直播後沒甚麼大問題，有幾個地方寫一下筆記：

1. 在 Command Line 上直接編譯 Sass。
正常好像應該要用 Compass 在 Command Line 上編譯 Sass 檔案，但我是用 Sublime 上的 SASS Build 編譯的。應該短時間不會換別的文字編輯器，單純自己對 Command Line 有莫名的恐懼感（？，所以一直沒有研究如何操作 Command Line，之後應該要研究一下。

2. 寫出有效率的 CSS。
前幾天有一個同學問到關於 CSS 巢狀結構的一些問題，然後有另一個同學提到巢狀結構不要太多，否則會影響瀏覽器的效率，這篇文章很不錯：如何撰寫有效率的CSS選擇器 (CSS Selector)。還有另一篇文章是老師在直播的時候提到的 淺談 CSS 方法論與 Atomic CSS，這篇是講解寫 CSS 選擇器命名的一些規範，也是學 CSS 更深入之後要研究的東西。

3. PostCSS。
剛開始要了解 PostCSS 覺得很頭大，後來用了 Autuprefixer 之後覺得真是太好用了！還沒有仔細研究 PostCSS 裡面的每一個 plugin，不過之後應該要研究如何好好應用。


自己直播筆記大致上就這樣。之後的作業就把重點放在 JavaScript 上了，覺得壓力大，因為我的 JavaScript 還沒學熟，要努力惡補～

Frontend Intermediate Course - 作業三

作業 3 的 GitHub 連結：寫 CSS 必備神器：CSS 預處理器

第三個作業原本以為應該不會花很多時間，不過研究如何在 Sublime 上面把 Sass 編譯成 CSS 花了不少時間，還另外寫了一篇：在 Sublime Text 3 將 Sass 編譯成 CSS。

Sass 的基本大致了解，不過還是想要仔細學過一次，剛好 Codecademy 上面有 Sass 的課程：Learn Sass，所以昨天把那門課上完，上完後才知道原來除了可以使用變數、mixin 之外，Sass 還有運算跟函式的功能，以及如何管理 Sass 檔案等等，是不錯的課程，對於 Sass 也有更全面的了解。

Frontend Intermediate Course - 作業二直播筆記

今天剛看完直播，老師也蠻早就修改我的作業了。

這次作業二老師修改後給我的建議有：

1. 檔案名稱可以統一叫 indes.html，比較有一致性。
2. 滑鼠移到圖片上面會變色塊，是你在測試什麼嗎 XD
3. 可以試著幫 box-shadow 加上 transition 看看，效果更好。

第一點只需要修改檔名即可，當時想說要區別不同作業所以才叫不同的檔名，不過檔案其實放在不同資料夾內，所以的確不需要另外命名。

第二點是因為在自我練習裡，其中的第一題是要滑鼠 hover 過去時背景顏色改變，但在我看完老師的直播後才發現我理解錯誤他的問題，其實只要 background 換一個顏色就可以了，我想得太複雜了 XD。

第三點也很容易修改，當時忙著處理改變背景忘記加 box-shadow，所以也忘記加上 transition，後來老師改之前有修改加上 box-shadow 但完全忘了 transition。

Frontebd Intermediate Course - 作業二

作業 2 的 GitHub 連結：讓畫面變得更動態：神奇的 CSS transition

第二個作業是第一個作業的延續，基本上在方塊的 CSS 下面增加 :hover，然後增加亮度 filter: brightness(1.2) 就達到作業的基本要求了，前後不到 5 分鐘就快速完成 XD 亮度沒有調很高，因為實況主的頭像是淺色的，亮度太高看起來很刺眼。

如果是在 CSS 裡用加圖片，要做到自我練習第一題的要求，hover 的時候改變顏色，也沒有很困難。:hover 下面加入方塊視窗的屬性，然後改變背景顏色，這裡我原本的背景是插入圖片的，所以有先移除背景圖片 background-image: none 再改背景顏色。

Frontend Intermediate Course - 作業一直播筆記

今天剛看完胡立老師的直播，剛好他也改完我的作業，所以趕快來寫一下這次的筆記。

老師這次給我的建議有：

1. row1、row2、row3 有共同的 CSS，所以應該在 div 的 class 裡多加 row，這樣擴充性比較高，才不用增加 row 就要改一次 CSS。HTML 改成如下：

<div class="row row1">
....
</div>

2. 頻道名稱跟實況主名字那邊做垂直置中對齊。

第一點的確是我疏忽沒加到，要修改也蠻容易的，所以我就馬上改了我上次 CodePen 上面的檔案。

不過第二點我想要在頻道名稱跟實況主名字外面加 div 然後再去定位，不過這樣 CSS 那邊要修改的地方很多，加上看別人寫的作業，才發現我的 HTML 跟別人長得不一樣 XD，所以想說整個大修改好了，之後的作業二就會用修改過的版本。

在 Google Blogger 顯示程式碼

因為開始記錄寫作業的過程，作業裡面含有許多程式碼，想要特別區分出來，但是 Google Blogger 的後台並沒有支援，所以研究了一下要怎麼做。

不研究還好，研究後才發現事情沒那麼好解決，花了好多時間在上面（不過後來發現是因為自己疏忽而白白浪費時間）。

先說明一下為什麼當初會選擇 Google Blogger 寫部落格。

• 比起其他的 Blog Service Provider (BSP)，Google 的未來比較穩定，至少在短期內不會倒。如果部落格寫一段時間了，BSP 宣布經營不善，到時候要搬整個部落格真的好麻煩。
• Google Blogger 是免費的，而且短期內也不會有需要付費的趨勢。
• 頁面乾淨，不會強迫被放置自己非自願放置的廣告。
• 可套用 Blogger 的版型，在後台微調字型大小跟顏色很容易，也可以自己改寫CSS。

不過缺點就是後台沒有方便顯示程式碼的功能。

Frontend Intermediate Course - 作業一

作業 1 的 GitHub 連結：基本 HTML/CSS 練習：以 Twitch 為例

這個作業還沒有用到 JavaScript，我也剛好上完 動畫互動網頁程式入門（HTML/CSS/JS）的 HTML 跟 CSS 的部分，趁記憶還很新所以 4 月 9 號開始寫，大概3-4個小時完成吧，因為剛開始還犯了一個很笨的錯誤所以拖了一點時間。

九個方塊其實把一個刻出來之後複製九次就可以了，不過如何把九個方塊放到我想放的位置上讓我考慮了很久。

一開始想直接對九個方塊分別定位，但是這絕對不是最好的選擇，在不同螢幕大小上一定會跑掉，雖然作業沒有要求 RWD，我也還沒學完 RWD，不過有預感這絕對是最糟糕又最花時間的方式，所以被淘汰。

後來想到吳哲宇老師有教過 flexbox，可以利用 justify-content: center 跟 align-self: center 來左右跟上下置中，比起設定 margin-left: auto、margin-right: auto 來調整寬度還要準確方便（詳細 felxbox 的用法可參考：A Complete Guide to Flexbox），但又考慮到 flexbox 上下間距的調整比較不方便，或許因為我也還不熟悉的關係 flexbox 所以不太會應用。後來想到的方法是把九個方塊分成三列，然後三列各用一個 block 包住三個方塊，所以可以利用 flexbox 的置中方便性，也可以方便調整上下距離。