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 老師的書迷，手上大部分的烘焙書也是她的烘焙書。她的部落格上也有很多食譜可以挖寶，如果喜歡她也可以買她的書支持她～

在 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 的置中方便性，也可以方便調整上下距離。

Frontend Intermediate Course - 緣由

之前有提到在 Hahow 上面買了線上課程 初心者的計概與coding火球術，後來收到胡立老師寄給學生的 email，詢問我們上課的情形以及回饋。原本想要等我全部的課程影片看完才回 email，不過當時已經偷懶了好一陣子沒繼續上課，又想說胡立老師這麼認真，應該要好好寫 email 鼓勵一下他。

然後來回 email 了 3、4 次，後來胡立老師問我有沒有在學其他的程式語言，還有對他即將要開的免費程式線上課程有沒有興趣，只是這次的課程屬於前端網頁設計的加強課程，所以必須要有一些基礎，要懂 HTML、CSS、JavaScript。而我其實對那些都不懂，只有 3 年多前在 Codecademy 自學一點點 HTML/CSS，但幾乎都忘光光了。

三隻小貓三歲生日快樂

三年多前 Mary 流浪到我家後院，瘦得皮包骨吃著原本應該給小鳥吃的麵包，爸爸看她可憐買了貓飼料給她吃，然後就住在我家後院。當時 Mary 還不親人，所以即使發現她是母貓後也無法把她帶去結紮，終於在漸漸信任我們之後，我們才發現她已經懷孕了。

然後在三年前的四月四日，Mary 生下了兩灰一黑小貓貓，有著跟她一樣的白色襪子、白肚子、以及可愛的白下巴。

苦思要幫她們取什麼名字一個月後，才終於決定幫她們取名為 Sushi、Bento、Mochi，分別是壽司、便當、麻糬。雖然住在美國，但平常在家都跟貓貓講台語，而這三個單詞剛好是台語中的日語詞彙，所以有英文拼音，用台語叫起來很順口，要帶她們去獸醫看病也可以寫成英文，而且也很美味（？

從她們一出生就看著她們長大，看她們學習走路、學習跑跳、學用貓砂、學爬樹，經歷她們第一次去看獸醫，第一次生病、結紮，第一次幫她們餵藥、剪指甲。努力學習貓貓的營養學，了解如何看飼料跟罐頭的成分以及算出碳水化合物，成為鏟屎官及陪睡員，要處理便便跟嘔吐物，有時還要處理她們從外面帶回來的「禮物」。

雖然她們頑皮、任性、傲嬌，但是撒嬌起來又可愛的不得了。無時無刻都想吃東西，像小豬豬一樣，但看她們吃飯的樣子覺得很滿足。她們生病時為她們擔心，看到她們安詳的睡臉及聽到她們的呼嚕聲就會覺得被療癒了，她們是幸福的貓貓，而我也是幸福的貓奴。

去年 11 月 30 日 Mary 去當小天使了，心中有許多不捨。感謝 Mary 來到我們家，帶給我們三隻可愛的小貓貓，有她們的陪伴，讓每天的生活都充滿歡笑。