L1 Web介紹、基本HTML語法

回家作業

利用今天上課所學的內容完成一頁網頁，主題自訂(如：自我介紹、最喜歡的電影、偶像…)。

  • h1~h6任兩種(大標題、小標題)
  • 2個超連結(可以放圖片、影片或網址)
  • ul 或 ol 列點
  • 段落文字<p>
  • 使用到粗體字及斜體字

L2 CSS

回家作業

將 Week 1 的回家作業加入CSS並且自己美編！

試著加入看看margin、padding、width、height、border

記得請將 CSS 、 HTML分開寫

記得請使用 class 選擇器

L3 Container、Position

練習看看

做一個圓形紅底白字的X在圖片的右上角顯示、並且在網頁的右下角增加一個回最上層的按鈕

L4 Display、CSS進階選擇器、FLEX

小遊戲2: https://flexboxfroggy.com/#zh-tw

練習題: https://codepen.io/opuwfggj-the-sans/pen/GRzjNRL

練習題解答: https://codepen.io/opuwfggj-the-sans/pen/YzBGpxM

L5 translate、animation

練習檔案: https://codepen.io/opuwfggj-the-sans/pen/MWLbONL

練習答案 https://codepen.io/opuwfggj-the-sans/pen/YzBpEoG

L6 實作練習

試著用前五堂課所教的內容作出一個網頁吧!

請使用 VScode，不要用 CodePen

在HTML中引入external CSS

只須完成nav-bar、services、和portfolio三個部分即可

超連結只須完成hover樣式，不用放連結網址

icon：cart-shopping、laptop、lock

練習題: https://codepen.io/opuwfggj-the-sans/pen/GRzjNRL

練習題解答: https://codepen.io/opuwfggj-the-sans/pen/YzBGpxM

L7 Form、RWD

Form表單

用來讓使用者輸入資料，這些資料可以用來和使用者互動，例如表單內容填完後可以傳回遠端伺服器 (web server)，像常見的連絡表單。

選課系統: https://selcrs.nsysu.edu.tw/

顯示圖片: https://hackmd.io/_uploads/HyyORU9N6.png

L8 SASS、Bootstrap

實作練習

試著用Bootstrap做出網址內的卡片

網址: https://bootstrap5.hexschool.com/docs/5.0/examples/album/

L6 實作練習

試著用前五堂課所教的內容作出一個網頁吧!

請使用 VScode，不要用 CodePen

在HTML中引入external CSS

只須完成nav-bar、services、和portfolio三個部分即可

超連結只須完成hover樣式，不用放連結網址

icon：cart-shopping、laptop、lock

練習題: https://codepen.io/opuwfggj-the-sans/pen/GRzjNRL

練習題解答: https://codepen.io/opuwfggj-the-sans/pen/YzBGpxM