ProgressBar

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

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

最後更新時間： 2023/5/29

售價 NT$: 6000

課程包含:

終生於平台觀看 詳情

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小時)

網頁開發安裝與介紹
▼
  • ▶

    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小時)

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小時)

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小時)

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小時)

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小時)

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小時)

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

第八章

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

    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工程師