第2課 ── 工程與藝術兼具：追求工藝等級的程式碼風格

第2課 課程目標

認識業界實務上，進階的 html 與 css 程式碼撰寫風格。

第2課 課程內容

除了上一課提到的結構組織問題，你一定也會有的疑惑是，怎樣讓整體程式碼看起來更漂亮呢？

空格該隔幾格呢？要用「 - 」還是「 _ 」呢？該不該用大小寫呢？

這些是我們稱之為「coding style」、「coding standard」的東西！

這些絕對都是主觀的問題，但你應該盡量學習業界常用的慣例、用廣泛被認可的寫法！

今天與你介紹值得學習的兩款！

Google HTML/CSS Style Guide

https://google.github.io/styleguide/htmlcssguide.html

Code Guide by @mdo

http://codeguide.co/

請閱讀這兩份文件，熟悉這些常用的程式碼風格！

不同文件可能會提到不同的作法與習慣，把你認為有道理、值得學習的地方學起來即可！

注意：內容很多，請不用全讀，也不用全讀懂！只要把你有興趣的部份看過、消化進去即可！

第2課 作業

上一課做了兩份作業，一個首頁，一個文章頁面。都只有做粗略區塊而已。

這一次請使用本課學到的技巧，做完這兩個頁面，把真的頁面做出來！

幾則注意事項：

• 這兩個頁面內容很多，也有很多重複的東西，不用全部做完，做到你覺得已經滿熟練，開始有點重複、無聊即可
• 根據本課的程式碼風格文件，把你能應用的部份用上即可，不用完全遵循文件

做完之後，你應該會發現你的 html/css 程式碼，看起來漂亮很多！不像是完全新手寫出來的東西！

完成這些，你就完成這次的課程目標了！