OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站

Ken Cen

大家好，我是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.

Enroll now

What's inside

Learning objectives

  • 能使用html來編寫網頁上各種各樣的對象或者元素
  • 能夠使用指定不同的元素或者對象用css或css3去美化他們，讓網站看起來更光彩奪目！
  • 能使用javascript,jquery去製作具有各種功能的網頁程序或互動效果
  • 能使用bootstrap的框架去製作美觀，複雜的網頁程序，並適應不同的設備，包括各種平板和手機等
  • 能使用wordpress無需編寫任何一段代碼去構建自己的網上商店或論壇
  • 能使用php和mysql去編寫功能強大的服務器端程序，響應用戶的請求，實現服務器端與客戶端的互動！

Syllabus

課程介紹

課程介紹

1美元伺服器

網絡與伺服器

Read more

本課程需要用到的工具

課程使用工具替代方案

使用HTML語言建立簡單的網站

創建第一個網頁HelloWorld

如何上傳網頁到伺服器

如何解決Cyberduck沒有Atom選項

如何解決FileZilla無法默認使用VSCode打開

HTML簡介

網頁結構

標題與段落標簽

文字標籤

超鏈接

絕對路徑與相對路徑

添加圖片

列表

表格Table(1)

表格Table(2)

表單Form(1)

表單Form(2)

表單Form(3)

表單Form(4)

字符實體HTML Entity

製作第一個網站_主頁框架

製作第一個網站_網頁腳製作

製作第一個網站_無意義元素

製作第一個網站_製作簡介頁面

製作第一個網站_製作表格頁面

製作第一個網站_製作課程目錄

HTML總結

使用CSS去潤飾我們網頁內容，讓網站看上去更美觀

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題

小挑戰一解決_第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重新構造

Save this course

Save (Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站 to your list so you can find it easily later:
Save

Activities

Coming soon We're preparing activities for (Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站. These are activities you can do either before, during, or after a course.

Career center

Learners who complete (Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站 will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.
Cover image
Designing with Web Standards
Save
Focuses on the practical aspects of HTML5 and CSS3, providing real-world examples and best practices.
(English) Designing With Web Standards
Paperback
$$
(English) Designing With Web Standards
Paperback
$
(English) Designing with Web Standards (2nd Edition)
Paperback
$$
(English) Designing with Web Standards (Voices That Matter)
Kindle Edition
$$
Cover image
Head First HTML and CSS
Save
This beginner-friendly book uses a visual and interactive approach to teach HTML and CSS fundamentals.
(English) Head First HTML and CSS: A Learner's Guide to...
Paperback
$$
(English) Head First Html With CSS & XHTML
Paperback
$$
(English) Head First HTML and CSS: A Learner's Guide to...
Kindle Edition
$$
Cover image
HTML5: Up and Running
Save
This practical guide provides a deep dive into HTML5, covering its features and how to use them effectively.
(English) HTML5: Up and Running: Dive into the Future of Web...
Paperback
$$
HTML5: Up and Running 1st (first) edition Text Only
Paperback
$$
(English) HTML5: Up and Running: Dive into the Future of Web...
Kindle Edition
$$
Cover image
CSS: The Definitive Guide
Save
This comprehensive guide covers all aspects of CSS, from basic concepts to advanced techniques.
CSS: The Definitive Guide
Paperback
Check
CSS: The Definitive Guide
Kindle Edition
Check
Cover image
JavaScript and jQuery
Save
While this book focuses on JavaScript and jQuery, it also provides a solid foundation in HTML and CSS.
(English) JavaScript and jQuery: Interactive Front-End Web...
Paperback
$$
(English) Web Design with HTML, CSS, JavaScript and jQuery Set
Paperback
$$
(English) Front-End Back-End Development with HTML, CSS,...
Paperback
$$$
(English) JavaScript & jQuery interactive Web front-end...
Paperback
$$
(Deutsch) JavaScript & jQuery (German Edition)
Paperback
$$$
[JavaScript and jQuery: Interactive Front-End Web...
Unknown Binding
$$$
Cover image
HTML and CSS
Save
This visual guide provides a quick and easy way to learn HTML5 and CSS3.
(English) HTML and CSS: Visual QuickStart Guide
Paperback
$$
(Italiano) HTML e CSS
Paperback
$$$
(English) HTML and CSS: Visual QuickStart Guide
Kindle Edition
$$
Cover image
HTML5 Canvas
Save
Focuses on the HTML5 Canvas element, providing a detailed guide to creating interactive graphics and animations.
(English) HTML5 Canvas: Native Interactivity and Animation...
Paperback
$$
HTML5 Canvas: Website Localization interaction and...
Paperback
$$$
(English) HTML5 Canvas: Native Interactivity and Animation...
Kindle Edition
$$
Cover image
Introducing HTML5
Save
This beginner-friendly book provides a clear and concise introduction to HTML5.
(English) Introducing HTML5 (Voices That Matter)
Paperback
$$
(English) Introducing HTML5 (Voices That Matter)
Kindle Edition
$$
Cover image
CSS Mastery
Save
This advanced guide to CSS covers advanced concepts and techniques.
(English) CSS Mastery
Paperback
$$
(English) CSS Mastery
Kindle Edition
$$
Cover image
Ivor Horton's Beginning ANSI C++
Save
This comprehensive manual covers all aspects of HTML and CSS, including advanced topics.
(English) Ivor Horton's Beginning C++ : The Complete Language...
Paperback
$$
(English) Ivor Horton's Beginning ANSI C++ 3th (third)...
Paperback
$$$
Cover image
HTML5 and CSS3 All-in-One For Dummies
Save
This beginner-friendly book provides a step-by-step guide to HTML5 and CSS3.
HTML5 and CSS3 All-in-One For Dummies
Paperback
Check
HTML5 and CSS3 All-in-One For Dummies
Kindle Edition
Check
Cover image
HTML5: The Missing Manual
Save
This practical guide provides a comprehensive overview of HTML5, covering both the basics and advanced topics.
(English) HTML5: The Missing Manual
Paperback
$$
(English) HTML5: The Missing Manual
Paperback
$$
(English) HTML5: The Missing Manual (Missing Manuals)
Kindle Edition
$$
Cover image
CSS: The Definitive Guide
Save
This comprehensive guide provides a thorough overview of CSS, covering everything from basic syntax to advanced techniques. It is an essential resource for web developers who want to master CSS and create visually stunning websites.
(English) CSS: The Definitive Guide: Web Layout and...
Paperback
$$$
(English) CSS: The Definitive Guide: Visual Presentation for...
Paperback
$$$
(English) CSS: The Definitive Guide
Kindle Edition
$$$
Cover image
CSS Secrets
Save
Collection of practical tips and techniques for using CSS effectively. It covers a wide range of topics, from layout and typography to animation and performance optimization.
CSS Secrets
Paperback
Check
CSS Secrets
Kindle Edition
Check
Cover image
The Zen of CSS Design
Save
Great introduction to CSS for web designers. It covers the basics of CSS, as well as more advanced topics such as responsive design and media queries.
(English) The Zen of CSS Design: Visual Enlightenment for the...
Paperback
$$
Cover image
CSS Pocket Reference
Save
This handy reference guide quick and easy way to find the information you need about CSS. It great resource for web developers who want to have a quick reference for CSS properties and values.
(English) CSS Pocket Reference: Visual Presentation for the...
Paperback
$$
(English) CSS Pocket Reference: Visual Presentation for the...
Paperback
$
(English) CSS Pocket Reference: Visual Presentation for the...
Kindle Edition
$
(English) CSS Pocket Reference (Pocket Reference (O'Reilly))
Paperback
$$
(English) CSS Pocket Reference: Visual Presentation for the...
Unknown Binding
$$
Cover image
Css
Save
Great introduction to CSS for beginners. It covers the basics of CSS, as well as more advanced topics such as responsive design and media queries.
(English) CSS: Beginners Guide to CSS to Master Your Web...
Kindle Edition
$
Cover image
Responsive Web Design
Save
Comprehensive guide to CSS for experienced web developers. It covers advanced topics such as CSS preprocessors, animations, and debugging.
(English) Responsive Web Design: Second Edition
Kindle Edition
$
(Français) Responsive web design: N° 4
Paperback
$$
Cover image
HTML and CSS
Save
Comprehensive guide to CSS3 for experienced web developers. It covers advanced topics such as CSS3 selectors, gradients, and transformations.
HTML and CSS
Paperback
Check
HTML and CSS
Kindle Edition
Check
Cover image
HTML and CSS
Save
Provides a comprehensive overview of HTML and CSS, making it suitable for beginners and experienced web developers alike.
HTML and CSS
Paperback
Check
HTML and CSS
Kindle Edition
Check

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
64.5 total hours
Via
Udemy
Instructor
Ken Cen
Language
中文
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

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.

Affiliate disclosure

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.

© 2016 - 2025 OpenCourser