線上程式教學課程: HTML, CSS, JavaScript, jQuery 網頁從零開始

總是利用Photoshop與Dreamweaver切版完就沒你的事了嗎? 同樣是設計師，卻明顯地比網站設計師少了50%薪水嗎？本課程從零開始，帶您進入網頁設計的程式端，讓您的職涯海闊天空!

最後更新時間： 2021/08

特價 NT$: 3600

原價 NT$: 6000

優惠至：2024/04/28

課程包含:

終生於平台觀看詳情

8個章節，122堂影片

27小時以上的課程時間

本課程未在其他平台上架。

信用卡、超商、ATM、Paypal皆可付款

3、6期信用卡付款零利率查看支援銀行

(信用卡不留卡號，Paypal需非台灣)

課程敘述

以前開店需要一台小發財車，現在開店需要一台購物車。
Wordpress版型套來套去大家都一樣令你煩惱嗎?
凡事沒有一步登天。
所有你所需要，想要了解的程式技術根基都是源自於本課程的範圍:
HTML / CSS / JavaScript

本課程從基礎開始教起，除了最新的HTML5 以及 CSS3 以外
還會介紹真實的網站中，我們會怎麼設計。
而非只是找著網路文獻書籍教"應該"如何去撰寫。
(HTML / CSS / JavaScript 已經存在20來年，向下相容一直都是一個議題。)

來看看範例實作的成果吧！
https://progressbartw.github.io/
(此範例為新手設計，只有實作部分JavaScript課程內容，大多為HTML / CSS 功能)

此課程包含了jQuery的介紹與使用，也包含基礎的jQuery UI動畫
如果不曉得jQuery是什麼可以看這篇文章：
jQuery是什麼，它跟JavaScript有什麼關係？它又有什麼能耐呢？

如果對轉職有興趣，可以參考這篇文章喔：

什麼是前端工程師(Front end Developer)？要成為前端工程師要學習什麼樣的技術呢？

如果想要包含進階議題，一次更完整學習，可以參考組合課程喔！

前端全攻略 + 後端 Laravel 課程完整課程

HTML CSS JavaScript ES5 jQuery + React ES6 Webpack + 後端 Laravel API 架站

純前端 JavaScript 初中階組合 + 版本管理
HTML CSS JavaScript ES5 jQuery + React ES6 Webpack + Git 版本管理

課程難度

入門，此課程不需任何程式經驗。

請參閱課程需求

課程需求

1. 一台電腦，它可以是Windows系統的PC，也可以是Mac系列產品
(講師將以Macbook pro做示範，少數安裝課程會使用Windows系統)
2. 筆電狀況足夠瀏覽網頁即可

課程目標

1. 瞭解HTML, CSS, JavaScript。
2. 瞭解jQuery與基本元件動作技巧。
3. 有能力自行撰寫靜態網頁。
4. 有能力更改自Photoshop / Dreamwaver 或 Sketch / Zeplin 圖像檔轉譯的HTML檔。
5. 瞭解跨平台網站設計要點，與什麼是響應式架構(Responsive)。
6. 瞭解網頁組成，有能力開始學習後台程式架構。
(例如: Laravel, Wordpress, Ruby on Rails, .Net, JAVA...等)
7. 瞭解使用Javascript 或 Css 函式庫所必備之基本能力。
(例如: Bootstrap, React, Material-lite)

課程特點

從頭開始講解，即使是新手也容易上手。
帶入真實工作環境與工具，不會讓你跟工作脫節。
附加課程一並講解與其他程式架構的前因後果，如果不需要了解未收看也不影響進度。
每堂課不超過30分鐘，方便通勤或短暫休息時學習。
個別章節都有老師實作進度可以下載，不會在跳躍課程複習時找不到目前的進度。

第一章 (總長1.2小時)

網頁開發安裝與介紹

01. 網頁開發基本介紹
19:44
02. 程式編輯器
09:04
03. [VSCode] 介紹Visual Studio Code
07:55
04. [VSCode][Windows] 安裝Visual Studio Code與建立第一個檔案
08:07
05. [VSCode][Mac]安裝Visual Studio Code與建立第一個檔案(加上Command Line設定)
13:43
06. [VSCode] 開啟資料夾與放大縮小編輯器文字
06:24
07. [VSCode] 安裝Extension去實現網頁Live Preview
07:38

第二章 (總長4.2小時)

HTML 與 HTML5 基礎元件介紹與範例

01. 建立第一個HTML檔
23:46
02. 分行與分隔線(br, hr)與註解
07:32
03. 中文編碼表示 meta charset
02:00
04. 文字標籤 h1~h6, p 與 span
16:55
05. 其他方便的文字標籤與圖文編輯器的關係 - 以CKEditor為例
15:21
06. Div標籤以及CSS高, 寬與背景顏色屬性
18:17
07. 其他與Div相似的HTML5所建議的標籤Main, Header, Footer等
19:52
08. a tag(連結標籤)介紹1, 轉址與開啟新頁籤
14:28
09. a tag(連結標籤)介紹2, 定位點與寄信
13:08
10. 列表介紹ul, ol, dl
08:00
11. 表格介紹 Table
11:38
12. Img tag - 圖片介紹
09:05
13. 影片與網頁嵌入(iframe) - 例如youtube
12:59
14. 輸入欄位(input) - 簡介與瀏覽器顯示比較
14:34
15. 輸入欄位(input) - 文字與按鈕
13:04
16. 輸入欄位(input) - 使用表單(From)，以google表單為例
17:29
17. 輸入欄位(input) - checkbox 與 radio
08:14
18. 用標籤(Label)控制輸入欄位
06:35
19. 下拉式選單(Select and option)
05:05
20. Meta 用途介紹
03:22
21. 進入CSS - Style and link 標籤
11:26

第三章 (總長5.7小時)

CSS 與 CSS3 屬性介紹與實例

01. CSS課程介紹與Style介紹
14:10
02. 選擇器(Selectors)
14:33
03. Chrome 開發者模式
09:08
04. 區塊模型 (Box Modal) 介紹
06:03
05. 寬、高,、極大與極小值示範(Width / Height and Max- / Min- )
07:46
06. Padding - 填充屬性
06:30
07. Margin (邊緣)
03:07
08. 滿版圖片設定方式1，CSS3 - Object-fit 與 Object-position
14:20
09. 滿版圖片設定方式2，傳統: background image
06:44
10. 鎖住背景圖片位置 - background-attachment
07:02
11. 文字、物件的垂直置中與水平置中
19:31
12. 物件顏色與文字大小
16:15
13. 變換字體與免費字體的使用 - font
17:44
14. 位置屬性(position) - 讓你輕鬆做出浮動的按鈕
16:05
15. 浮動(float)以及圖層概念(z-index)
14:44
16. Float 的正確用法
07:48
17. visibility 與 display 介紹與運用實例
15:02
18. Border 介紹
09:06
19. 文字陰影與區塊陰影(text-shadow 與 box-shadow)
12:36
20. 響應式頁面的基礎 - @media 與 viewport
24:09
21. 偽元素選擇器(psuedo)
08:59
22. 偽元素選擇器(psuedo)2 - list-child
12:30
23. 字體編碼, UTF-8 與 unicode
11:50
24. 圖形文字使用 (以font-awesome為例)
07:31
25. CSS初始化(reset 與 normalize)
04:34
26. 進階CSS選擇器 Selector 與 !important
22:27
27. 初探Flex-box(flex-grow, flex-shrink, flex-basis, order)
17:16
28. 二探Flex-box(flex-direction, flex-wrap, justify-content, align-items)
16:21

第四章 (總長8.5小時)

JavaScript 介紹與實作

01. JavaScript介紹
16:35
02. 變數var 和基本類別，字串String與數字Number
09:41
03. 點擊觸發事件(onclick event)與函數(function)
08:58
04. ID選擇器(id Selector)
10:05
05. 陣列 Array
11:48
06. 其他的選擇器 (className/ Tag / Name Selector)
17:19
07. 變數 Variable
07:58
08. 基本數學運算
10:41
09. 數字與字串轉換
19:29
10. 布林值與條件判斷(Boolean & if-else)
10:56
11. 數值比較以及實例
21:35
12. 文件物件模型 - DOM
09:29
13. DOM實例 - 利用innerHTML與outerHTML實作類似Excel表格
24:05
14. 函數 (Function)
13:48
15. 迴圈 ( While-loop & For-loop )
15:15
16. Object 與 JSON
22:32
17. 物件 Object 介紹與使用實例(Object 實例介紹一)
23:11
18. 利用物件 Object 實現ES5版Class (Object 實例介紹二)
32:02
19. 常用事件介紹(Events)
11:12
20. 事件處理器與事件氣泡(Event handler & Event bubble)
16:00
21. 瀏覽器物件模型與計時器 (BOM 與 Timer)
12:13
22. 完整介紹計時器(Timer)
16:03
23. 利用DOM append 的方式實現Table新增與刪除
19:26
24. 複製元素(Element)與尋找子元素(querySelector)
08:35
25. 建立動態多對一關係表單(form)
10:37
26. AJAX (Get) 介紹與實作
20:53
27. AJAX request 與 response 詳細介紹
22:21
28. AJAX (Post) 傳送資料
21:31
29. AJAX 動態讀取圖片與自製Lazy load實作
15:49
30. 原型鏈
26:56
31. [補充] JavaScript 原型鏈與繼承
23:50

第五章 (總長2.3小時)

jQuery入門介紹與實作

01. jQuery介紹
13:53
02. jQuery的選擇器
20:07
03. 點擊綁定與鏈結
18:53
04. 屬性與樣式修改(Attribute 與 Style)
09:32
05. 插入與移除元素(append 與 remove)
06:13
06. 子元素與母元素獲取(find, children, closest, parents)
21:47
07. jQuery版本的 table 新增與刪除
22:49
08. AJAX (Get) 函數使用介紹
18:27
09. AJAX (Post) 傳送資料
06:19

第六章 (總長2.3小時)

jQuery動畫與JavaScript組合

01. jQuery動畫介紹(Effects)
06:46
02. 淡入與淡出(fadeIn, fadeOut)
16:35
03. 隱藏, 顯現, 延時與停止(show, hide, delay and stop)
09:37
04. 滑動隱藏, 滑動顯示與顯示切換(slideUp, slideDown, slideToggle, toggle)
08:29
05. 動畫函數(animate)
06:45
06. jQuery.fx與原始碼探討
07:36
07. 滾動追蹤顯現
17:37
08. 小心display: none，使用fadeTo重構程式
03:42
09. 自製動畫卡片型元件
15:11
10. 綜合範例演練介紹
02:38
11. 綜合範例演練 - 修正卡片型元件
16:35
12. 綜合範例演練 - 無窮滑動(infinite scrolling)
07:19
13. 綜合範例演練 - 自動刷新
06:23
14. jQuery UI 簡單使用介紹
09:39
15. jQuery UI datepicker的注意事項
02:41

第七章 (總長2.8小時)

HTML / CSS / JavaScript 完整網站範例

01. 實作範例介紹
02:18
02. 隔線與框架(Grid and layout)
25:29
03. 導覽條 (Navigation bar)
29:41
04. 滿版標語
17:54
05. 固定比例圖片
18:02
06. 卡片型元件
24:41
07. 影片播放器
30:26
08. 頁尾(footer)
12:11
09. 善後與修整(fix bugs)
07:56

第八章 (總長0.5小時)

[選修] 課程補充與學生問題

01. [Git] Github 註冊與基本使用
17:59
02. [Git] 將靜態網頁放上Github Page
09:33

課程講師

縱裕

iOS 工程師 / Ruby On Rails 網站工程師

現職為iOS 工程師，但同時也在鑽研網站技術並且建立多個網站。
曾協助多個新創公司，範圍包含網站前端到桌面應用程式倉存管理與電子機關互動。
從網站架設，手機APP到系統底層都有豐富的經驗。
擅長不同系統架構的整合與創新想法的實現。

經歷：
進度條技術顧問
Digilog.tw 網站與倉庫後台程式架構設計與建置
Zooe 線上教學平台網站架構設計與建置
HelloStudy 楓禾留遊學網設計與建置
Funlock 放樂工作室真實密室逃脫遊戲 - 魔鏡迷城電子機關設計與製作
iOS App - Rock Click 節拍器
Nexcom ARM韌體與軟體工程師
Insyde BIOS工程師