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。

卡士達泡芙

泡芙應該是我曾經做失敗最多次的甜點。以前剛開始學做泡芙的時候，沒有抓到訣竅，失敗了兩、三次，泡芙都無法順利膨脹。可是即使失敗，爸爸跟弟弟也會幫我吃光光，所以我更加努力研究想做出成功的泡芙給他們吃。好在失敗三次後就成功了，不然他們要一直幫我吃失敗的作品 XD。

今天的食譜，泡芙外皮是參考 Carol 老師的 基本泡芙外皮，卡士達醬是參考她的 烘焙新手變達人的第一本書 中的第 48 頁的「卡士達醬」。

因為想要把步驟講的盡量詳細，所以照片比較多。

基本上泡芙的材料很簡單，只要抓到訣竅就可以做得很成功。我建議先做卡士達醬，這樣泡芙烤好後就可以馬上加入卡士達醬享用了～

在 Sublime Text 3 將 Sass 編譯成 CSS

在 動畫互動網頁程式入門（HTML/CSS/JS）上，吳哲宇老師使用 Sass 當作 CSS 的預處理器，可以設定變數、利於 Nesting、引入 Mixins 等等優點，比起純 CSS 還要方便好用。剛好 Frontend Intermediate Course 中的第三週作業就是要用預處理器寫 CSS，於是想要在 Sublime 上面設定 Sass，並將 Sass 編譯成 CSS。

在 Sublime 上面把 Sass 編譯成 CSS 比我想像還要麻煩，本來以為只要在 Sublime 上面安裝 Sass 套件就可以了，結果根本不是這樣子（我太天真的啊...）

Google 搜尋之後發現還需要安裝 SASS Build 套件才可以將 Sass 編譯成 CSS。當我以為這樣就完成安裝設定後才發現，不是只在 Sublime 上面安裝那兩個套件，還要在電腦安裝 Ruby 跟 Sass 才可以，我果然是太天真了...

於是就努力的研究一下到底要怎麼安裝設定才可以，以下是我自己的設定過程，如果需要比較詳細的教學，我在 YouTube 上面發現 Peter Sommerhoff 教學影片還不錯 Sass Beginner Tutorial，可惜是在我差不多都設定完成之後才看到。

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，所以想說整個大修改好了，之後的作業二就會用修改過的版本。

巧克力戚風蛋糕

四年多前剛開始自學烘焙的時候，心裡想著我要是能把戚風蛋糕做成功就滿足了。後來當然沒有因為學會戚風蛋糕就因此滿足，有段時間天天烤不同的東西吃，甚至還自己養酵母做麵包，對烘焙很入迷。

最近比較少動手烤東西了，突然很想念巧克力戚風蛋糕，於是就動手烤一個來吃，然後拍照記錄一下。處理照片跟寫文章的時間比做蛋糕還多很多，真心佩服網路上那些美食部落客。這是我第一次寫烘焙教學文，平常都只會發一張完成照在 Instagram 跟 facebook。我沒受過專業的烘焙訓練，如果有錯還請多多指教。

這次的食譜是參考 Carol 自在生活：烘焙新手必備的第一本書 中第 230 頁的「超軟巧克力戚風蛋糕」，原食譜上有燙麵糊，我以前嘗試過但是不太成功，所以這次沒有使用燙麵法。我是 Carol 老師的書迷，手上大部分的烘焙書也是她的烘焙書。她的部落格上也有很多食譜可以挖寶，如果喜歡她也可以買她的書支持她～