大家好，我是Ken Cen。在這個課程裡，我們會學習10種語言和工具，包括 In this course, we will learn 10 languages and tools including We will start from scratch and build 12 website, including eBay, YouTube, AirPods, Tesla and other web pages. We will go through a very interesting and challenging journey, let's learn to build our own website from zero to professional together.
What's inside
Learning objectives
- 能使用html來編寫網頁上各種各樣的對象或者元素
- 能夠使用指定不同的元素或者對象用css或css3去美化他們，讓網站看起來更光彩奪目！
- 能使用javascript,jquery去製作具有各種功能的網頁程序或互動效果
- 能使用bootstrap的框架去製作美觀，複雜的網頁程序，並適應不同的設備，包括各種平板和手機等
- 能使用wordpress無需編寫任何一段代碼去構建自己的網上商店或論壇
- 能使用php和mysql去編寫功能強大的服務器端程序，響應用戶的請求，實現服務器端與客戶端的互動！
- 能使用html來編寫網頁上各種各樣的對象或者元素
- 能夠使用指定不同的元素或者對象用css或css3去美化他們，讓網站看起來更光彩奪目！
- 能使用javascript,jquery去製作具有各種功能的網頁程序或互動效果
- 能使用bootstrap的框架去製作美觀，複雜的網頁程序，並適應不同的設備，包括各種平板和手機等
- 能使用wordpress無需編寫任何一段代碼去構建自己的網上商店或論壇
- 能使用php和mysql去編寫功能強大的服務器端程序，響應用戶的請求，實現服務器端與客戶端的互動！
Syllabus
課程介紹
課程介紹
1美元伺服器
網絡與伺服器
Read more
Syllabus
課程介紹
網絡與伺服器
本課程需要用到的工具
課程使用工具替代方案
創建第一個網頁HelloWorld
如何上傳網頁到伺服器
如何解決Cyberduck沒有Atom選項
如何解決FileZilla無法默認使用VSCode打開
HTML簡介
網頁結構
標題與段落標簽
文字標籤
超鏈接
絕對路徑與相對路徑
添加圖片
列表
表格Table(1)
表格Table(2)
表單Form(1)
表單Form(2)
表單Form(3)
表單Form(4)
字符實體HTML Entity
製作第一個網站_主頁框架
製作第一個網站_網頁腳製作
製作第一個網站_無意義元素
製作第一個網站_製作簡介頁面
製作第一個網站_製作表格頁面
製作第一個網站_製作課程目錄
HTML總結
Cascading Style Sheets 階層式樣式表
行內CSS Inline CSS
內部CSS Internal CSS
外部CSS External CSS
Class 選擇器 Class Selector
ID 選擇器 ID Selector
Funny Question 2: Selector CSS優先級
Funny Question 3: Inline Internal External CSS優先級
Combine Selectors合併選擇器
Pseudo Class虛擬類別
Pseudo Class虛擬元素
Attribute selector屬性選擇器
Box model 盒子模型
CSS 單位 ：Pixel Percent Vw Vh
CSS 單位 ： Rem Em Percent
Flexbox彈性盒子模型 橫向佈局
Flexbox彈性盒子模型_縱向佈局及其他屬性
Grid網格佈局模型_columns&rows
Grid網格佈局模型_areas&span
小挑戰一：Flex和Grid的應用
小挑戰一解決_第1題
小挑戰一解決_第2題
小挑戰一解決_第3-4題
Position位置屬性
Font字體設定
Calc()數值運算
如何編寫代碼比別人快2倍
如何在VSCode中使用Emmet
實作2_克隆Youtube網站首頁
實作2: 克隆Youtube_網頁框架
實作2: 克隆Youtube_Flex與Grid應用
實作2: 克隆Youtube_搜索欄目合併輸入框與按鈕
實作2: 克隆Youtube_Sidebar HTML結構製作
實作2: 克隆Youtube_製作按鈕效果
實作2: 克隆Youtube_單一視頻模板製作
實作2: 克隆Youtube_Flex模型嵌套
實作2: 克隆Youtube_content屬性
實作2: 克隆Youtube_auto-fill columns
實作2: 克隆Youtube_video section title製作(項目完結)
Auto-fill與Auto-fit的關係和區別
Media Query 媒體查詢
Transition 轉場效果
Animation CSS動畫效果
CSS Variables 變數
內在首選寬度(max-content) 與 內在最小寬度(min-content)
疊放順序問題
Overflow溢出
實作3：實作介紹
實作3: 側邊欄動畫效果_標題欄的製作
實作3：側邊欄動畫效果_側邊欄框架動畫
實作3: 側邊欄動畫效果_側邊欄內部元素外觀設定
實作3：側邊欄動畫效果_修正及添加激活樣式
實作3：側邊欄動畫效果_MediaQuery製作
Gradient 漸變效果
實作4：地球軌道動畫效果_項目介紹
實作4：地球軌道動畫效果_添加宇宙星空太陽
實作4：地球軌道動畫效果_添加地球軌跡_月亮軌跡_地球與月亮
實作4：地球軌道動畫效果_添加動畫效果
實作4：地球軌道動畫效果_項目優化
小挑戰二_克隆eBay首頁介紹
小挑戰二_克隆eBay_左右header固定外觀設定
小挑戰二_克隆eBay_header media query設定
小挑戰二_克隆eBay_Search Bar三級容器設定
小挑戰二_克隆eBay_輸入框重構
小挑戰二_克隆eBay_Select Tag重新構造
Traffic lights
Save this course
Save
Reviews summary
網站建構百科全書：實戰入門到完成
Ken Sir 講解清晰有趣。
透過仿作學會實際建站。
課程涵蓋多種建站技術。
Activities
複習 HTML 基礎知識
Show steps
複習 HTML 的基本概念，例如標籤、屬性和網頁結構，以確保您對本課程的基礎知識有紮實的理解。
Browse courses on
HTML
Show steps
-
閱讀 HTML 教程或文檔。
-
練習編寫簡單的 HTML 頁面。
-
查看現有的 HTML 程式碼範例。
練習 CSS 選擇器
Show steps
練習使用不同的 CSS 選擇器來定位和樣式化 HTML 元素，這將有助於您更好地理解和應用 CSS 樣式。
Browse courses on
CSS
Show steps
-
建立包含各種 HTML 元素的 HTML 檔案。
-
使用不同的 CSS 選擇器來設定這些元素的樣式。
-
檢查結果並調整 CSS 程式碼。
閱讀《HTML & CSS 設計與構建網站》
Show steps
閱讀本書以加深對 HTML 和 CSS 的理解，並學習如何使用它們來設計和構建美觀且功能強大的網站。
View
HTML and CSS
on Amazon
Show steps
-
通讀本書的相關章節。
-
練習書中的範例。
-
嘗試將書中的概念應用於您自己的專案。
Four other activities
Expand to see all activities and additional details
Show all seven activities
克隆一個簡單的網站
Show steps
選擇一個簡單的網站（例如，一個基本的部落格或公司網站），並嘗試使用 HTML 和 CSS 克隆它。這將幫助您練習您在本課程中學到的技能。
Show steps
-
選擇一個要克隆的網站。
-
分析網站的結構和樣式。
-
使用 HTML 和 CSS 建立網站的副本。
-
比較您的副本與原始網站，並進行必要的調整。
建立一個個人網站
Show steps
使用您在本課程中學到的技能建立一個個人網站。這將是一個展示您的技能和經驗的好方法。
Show steps
-
規劃您的網站的結構和內容。
-
使用 HTML 建立網站的結構。
-
使用 CSS 設定網站的樣式。
-
將您的網站上傳到伺服器。
閱讀《JavaScript 權威指南》
Show steps
閱讀本書以加深對 JavaScript 的理解，並學習如何使用它來建立互動式網頁應用程式。
View
Javascript
on Amazon
Show steps
-
通讀本書的相關章節。
-
練習書中的範例。
-
嘗試將書中的概念應用於您自己的專案。
參與開源專案
Show steps
參與開源專案是提高您的網頁開發技能的好方法。您可以通過報告錯誤、編寫文檔或貢獻程式碼來參與。
Show steps
-
尋找一個您感興趣的開源專案。
-
閱讀專案的文檔。
-
開始貢獻程式碼或文檔。
複習 HTML 基礎知識
Show steps
複習 HTML 的基本概念，例如標籤、屬性和網頁結構，以確保您對本課程的基礎知識有紮實的理解。
Browse courses on
HTML
Show steps
- 閱讀 HTML 教程或文檔。
- 練習編寫簡單的 HTML 頁面。
- 查看現有的 HTML 程式碼範例。
練習 CSS 選擇器
Show steps
練習使用不同的 CSS 選擇器來定位和樣式化 HTML 元素，這將有助於您更好地理解和應用 CSS 樣式。
Browse courses on
CSS
Show steps
- 建立包含各種 HTML 元素的 HTML 檔案。
- 使用不同的 CSS 選擇器來設定這些元素的樣式。
- 檢查結果並調整 CSS 程式碼。
閱讀《HTML & CSS 設計與構建網站》
Show steps
閱讀本書以加深對 HTML 和 CSS 的理解，並學習如何使用它們來設計和構建美觀且功能強大的網站。
View
HTML and CSS
on Amazon
Show steps
- 通讀本書的相關章節。
- 練習書中的範例。
- 嘗試將書中的概念應用於您自己的專案。
克隆一個簡單的網站
Show steps
選擇一個簡單的網站（例如，一個基本的部落格或公司網站），並嘗試使用 HTML 和 CSS 克隆它。這將幫助您練習您在本課程中學到的技能。
Show steps
- 選擇一個要克隆的網站。
- 分析網站的結構和樣式。
- 使用 HTML 和 CSS 建立網站的副本。
- 比較您的副本與原始網站，並進行必要的調整。
建立一個個人網站
Show steps
使用您在本課程中學到的技能建立一個個人網站。這將是一個展示您的技能和經驗的好方法。
Show steps
- 規劃您的網站的結構和內容。
- 使用 HTML 建立網站的結構。
- 使用 CSS 設定網站的樣式。
- 將您的網站上傳到伺服器。
閱讀《JavaScript 權威指南》
Show steps
閱讀本書以加深對 JavaScript 的理解，並學習如何使用它來建立互動式網頁應用程式。
View
Javascript
on Amazon
Show steps
- 通讀本書的相關章節。
- 練習書中的範例。
- 嘗試將書中的概念應用於您自己的專案。
參與開源專案
Show steps
參與開源專案是提高您的網頁開發技能的好方法。您可以通過報告錯誤、編寫文檔或貢獻程式碼來參與。
Show steps
- 尋找一個您感興趣的開源專案。
- 閱讀專案的文檔。
- 開始貢獻程式碼或文檔。
Career center
前端工程師
網站開發人員
網頁程式設計師
全端工程師
電子商務開發人員
內容管理系統開發人員
网页设计师
UI设计师
UX设计师
前端架構師
网站管理员
数据库管理员
網頁分析師
技術專案經理
資訊安全分析師
Reading list
Save
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
