第3課 課程目標
學會使用div和span元素
能夠做出漂亮的排版
第3課 課程內容
用jsfiddle來練習：
這次要寫HTML跟CSS兩個區塊
請閱讀這份教材：
HTML Block and Inline Elements
或是看中文版
接著開始學習版面配置：
把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。
讀完、練習完這份教學裡面的程式碼，就算是學會基本的網頁排版了。
第3課 作業
在第1、2課的作業，我們將風傳媒的文章內容做了出來，但是略過了上方的導覽列、旁邊的熱門文章等等區塊。
這次作業要延續那些作業，這次不只是文章內容，請將整個頁面都做出來。
注意：本週作業內容繁重許多，請至少將上方的導覽列、旁邊的熱門文章推薦區塊做出來，其餘的可以省略。
完成這些，你就完成這次的課程目標了！
注意：
有同學反應，jsfiddle的介面太窄，不方便排版
如果您也覺得jsfiddle不好用，可改用 Glitch 來練習。
完成後請將您的 Glitch 專案發布，即可將網址分享出去。
小技巧：
您可以使用瀏覽器的開發者功能，觀察網站本身是怎麼寫的
例如：Google Chrome 請對著元素按右鍵 -> 檢查
多利用這個技巧觀察網站原始碼，對於學習本身很有幫助
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
交作業~
https://jsfiddle.net/j437437/hs9o3jvt/633/
練習用 flex 做雙欄排版
也練習寫了超陽春版響應式斷點 XD
交作業~
花了幾天的時間還是有點混亂，但是應該算完成了。不知道為什麼我的新新聞圖片會載不出來...
再麻煩檢查了!
https://jsfiddle.net/dj3habn6/4/
來繳第三次作業了，這次真的弄好久，處處碰壁
https://jsfiddle.net/johnny890118/k3os49dL/513/
第三次的作業：
https://glitch.com/edit/#!/efficacious-enormous-play
再請站長看看了～謝謝
側邊欄的部分排版部分，我會再想一下怎麼調整。
切版這部分真的很需要多練練...
交作業，不知道是不是這樣，用了好多的div
再麻煩站長了，謝謝!
https://glitch.com/edit/#!/pchun-practise-from-the-storm-media?path=pchun.html%3A30%3A10
https://jsfiddle.net/973224/ht5Ly1jm/110/
最近比較忙碌有一段時間沒碰了
但還是勉強擠出......
麻煩過目!!
作業: https://jsfiddle.net/jared0921/jpxaq92y/241/
使用了flex來設計版面，麻煩大大檢查了！感謝！
https://jsfiddle.net/tsaii/ocpaLrf8/193/
自己做了之後真的覺得好難＠＠
第2章跳到第3章難度差好多....
卡了一整天晚上整理好思緒才寫出來
https://jsfiddle.net/tony05060165/z03pt61n/245/
來繳第三次作業，旁邊熱門文章弄了好久
https://jsfiddle.net/000dd/2ufcb8g6/218/
https://jsfiddle.net/liang10000/tj5c3y2x/323/
切版算順利成功，但是在列表那邊卡好久
站長在檢查一下!感謝
第三次作業,麻煩站長查看了,謝謝!
https://jsfiddle.net/ktf9n045/
code https://glitch.com/edit/#!/homework-frontenddeveloper
live site https://homework-frontenddeveloper.glitch.me/folder/homework.html
交作業啦~~
真的會被排版搞死，卡在版面超級久。
2024.02.06 繳作業！ https://jsfiddle.net/s6wpno2L/
<br />
小視窗看起來會跑版，但全視窗就沒事🫠要處理RWD真的滿累的，這裡先偷懶（#
<br />
這次作業的心得是：覺得先寫好HTML再來寫CSS會比較好處理，但如果在HTML架構之前，還有設計稿的話，那就更好了。
因為這次作業是前幾節的作業延續發展，在第一堂的時候想要用單純的標籤不加入樣式，儘可能排出（順序和文字對齊）和原文網站相似的樣子，結果寫CSS就有點頭疼了😅但實務操作應該也是會有客戶臨時要增加資料的狀況吧？希望自己能儘早適應隨時切換編寫的狀況
總覺得寫法好像不夠成熟 先繳交這一個章節之後再看看能不能寫得更理想 謝謝!
https://jsfiddle.net/etai200/dgu70c4L/160/
交作業:https://jsfiddle.net/max002215/k9b6vquw/714/ navbar的margin改不了 這次是照著原始碼刻得 還是有些地方不懂怎麼用 這次的作業比較花時間
20240627交作業,只做出了大概的雛形還有好多細節需要研究,真正去做才發現很多地方不熟需要加強練習
https://lumbar-harmonious-father.glitch.me/
https://jsfiddle.net/43ukjrgv/
感覺從1-2課到第3課
是一個好大的幅度
感覺弄明白了又沒有 好難切版