第3課課程目標

學會使用div和span元素

能夠做出漂亮的排版

第3課課程內容

用jsfiddle來練習：

這次要寫HTML跟CSS兩個區塊

請閱讀這份教材：

或是看中文版

接著開始學習版面配置：

把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。

讀完、練習完這份教學裡面的程式碼，就算是學會基本的網頁排版了。

在第1、2課的作業，我們將端傳媒的文章內容做了出來，但是略過了上方的導覽列、旁邊的編輯推薦、熱門頭條等等區塊。

這次作業要延續那些作業，這次不只是文章內容，請將整個頁面都做出來。

注意：本週作業內容繁重許多，請至少將上方的導覽列、旁邊的編輯推薦區塊做出來，其餘的可以省略。

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

注意：

有同學反應，jsfiddle的介面太窄，不方便排版

如果您也覺得jsfiddle不好用，可改用 Thimble 來練習。

完成後請將您的Thimble專案發布，即可將網址分享出去。

小技巧：

您可以使用瀏覽器的開發者功能，觀察網站本身是怎麼寫的

例如：Google Chrome 請對著元素按右鍵 -> 檢查

多利用這個技巧觀察網站原始碼，對於學習本身很有幫助