線上課程 / 網站開發

HTML/CSS 入門

針對網頁開發初學者的前端基礎課程

對於程式開發完全沒概念,想要用最白話的方式搞懂網頁開發原理! 跨入程式開發的第一步就從 HTML / CSS 開始。 若你沒有任何程式背景與基礎,那麼 HTML、CSS 便是你的網頁開發起始點。 課程講師透過生活化的舉例方式和輕鬆的教學口吻,由淺入深帶你認識 HTML 結構與標籤、搭配大量實際案例讓你學會 CSS 選取器及 Grid 排版應用。 程式新手,也能具備做出一個網頁作品的能力! 你會學到如何從無到有,架構出一個網站的基本網頁排版。 在課程最後更帶你運用所學知識,實作出屬於自己的個人 Blog!讓我們一起開始開發網頁吧!

4.7 小時
3 章節
38 單元
講師:
使用者大頭貼
諶冠霖 aka Lin
最後更新:2025 年 12 月

你將學到什麼

第一階段:HTML 基礎觀念建立
想學程式語言卻不知要從何下手嗎?
在第一階段中講師 Lin 將會解釋 HTML 的結構與元素,建立網頁語意與各個網頁標籤的重要基礎觀念並搭配實作讓你融會貫通。

第二階段:CSS 入門與應用
了解完 HTML 結構後,接著透過 CSS 讓網頁有更多不同的變化!
包含文字顏色、樣式甚至是網頁版面的配置等等,讓你的網頁依照自己心中的理想樣式呈現在眼前。

第三階段:實作個人網站
完整建立好 HTML、CSS 的基礎結構、標籤特性後,講師將帶你製作屬於自己的個人網站!讓你運用程式碼的語法和元素,透過版面配置、圖片呈現與各種視覺效果並搭配響應式設計,打造出獨一無二的個人網站。

課程大綱

3 章節 · 38 單元 · 4.7 小時
HTML 簡介
4 分鐘
你的第一個網頁
5 分鐘
HTML 標籤結構
4 分鐘
標籤與元素
5 分鐘
標題與連結
4 分鐘
按鈕、容器、段落
5 分鐘
圖片
3 分鐘
清單
1 分鐘
表單與輸入
9 分鐘
語意化標籤
2 分鐘
建立 CSS 檔案
3 分鐘
什麼是 CSS
2 分鐘
CSS選取器 id, class, attribute
2 分鐘
Box Model
5 分鐘
CSS 文字效果
4 分鐘
偽類別與偽元素
5 分鐘
CSS 權重
3 分鐘
更精準的 CSS 選取器
9 分鐘
Inline 與 Block
4 分鐘
Flexbox
7 分鐘
Grid 格線系統 part1 預覽
8 分鐘
Grid 格線系統 part2
7 分鐘
Grid 格線系統 part3
7 分鐘
成品簡介 預覽
1 分鐘
建立專案
7 分鐘
導覽列
14 分鐘
使用 CSS 變數
4 分鐘
主頁橫幅 part1
11 分鐘
主頁橫幅part2
14 分鐘
關於我 part1
13 分鐘
關於我 part2
17 分鐘
作品集
15 分鐘
聯絡我
8 分鐘
捲到最上方
5 分鐘
響應式設計 part1
13 分鐘
36-個人網站-響應式設計-漢堡選單
15 分鐘
響應式設計 part2
16 分鐘
小結
1 分鐘

講師介紹

使用者大頭貼

諶冠霖 aka Lin

五倍學院 前端工程師

推薦課程

你可能也會喜歡的學習內容

瀏覽全部