初學者的網頁開發超級課程

課程資訊

展開更多內容

試聽單元

1-1 簡介-HTML是什麼？為什麼會搭配CSS和JS

1-17 表單資料傳送觀念以及簡介前後端工作範圍

課程單元

第1單元 HTML 的入門到精通

1-1 簡介-HTML是什麼？為什麼會搭配CSS和JS

00:00
1-2 Html 標籤介紹

00:00
1-3 環境準備與目錄結構

00:00
1-4 常見的文字標籤

00:00
1-5 文字類型可以怎麼變化

00:00
1-6 區塊-一切都從區塊開始

00:00
1-7 連結-網頁的靈魂元素

00:00
1-8 圖片

00:00
1-9 按鈕-互動的開始

00:00
1-10 練習1 簡易的產品介紹網頁

00:00
1-11 列表-整齊呈現資訊

00:00
1-12 練習2 網頁選單（無css/有css）

00:00
1-13 網頁的資訊設定

00:00
1-14 Emoji和跳脫字元

00:00
1-15 表格-管理資料的重要幫手

00:00
1-16 練習3 本月行事曆（無css/有css）

00:00
1-17 表單資料傳送觀念以及簡介前後端工作範圍

00:00
1-18 表單-如何建立第一個表單及各種表單類型

00:00
1-19 Iframe-嵌入有趣的Youtube影片

00:00
1-20 Media-播放音樂和影片其實很容易

00:00
1-21 練習4 意見調查（無css/有css）

00:00

第2單元 CSS 從認識到活用

2-1 css 的多種用法-我要如何開始使用 css

00:00
2-2 css 基本規則

00:00
2-3 常見文字相關css

00:00
2-4 如何讓連結更生動好看

00:00
2-5 圖片的樣式調整其實是一門學問

00:00
2-6 區塊與間距-網頁好看的關鍵

00:00
2-7 Box-sizing，常被呼略的重要觀念

00:00
2-8 背景的變化其實很多

00:00
2-9 練習5：建立一個圖文並茂的資訊盒

00:00
2-10 CSS的優先權重-為什麼我的設定沒有用？

00:00
2-11 Display – 多種排版觀念

00:00
2-12 Justify – 排版的多種對齊快讓人發瘋

00:00
2-13 Posistion – 如何放置一個固定位置的漂浮按鈕

00:00
2-14 練習6：單頁排版練習

00:00
2-15 Z-index – 擺放層級設定，圖片為什麼被擋住了？

00:00
2-16 Opacity – 透明度設定

00:00
2-17 Over-flow – 超出範圍怎麼辦？

00:00
2-18 練習7：自由排版練習

00:00
2-19 Shadow – 流行的陰影美感

00:00
2-20 對齊的多種方式相關用法大整理

00:00
2-21 object-fit – 另一種好用的圖片呈現技巧

00:00
2-22 絕對和相對單位

00:00

第3單元 CSS 進階玩法

第4單元常用的樣式技巧

第5單元加速開發的幫手 Bootstrap

第6單元 RWD 大魔王

6-1 RWD基本觀念

00:00
6-2 裝置大小

00:00
6-3 常用技巧1: 善用Bootstrap的RWD設計

00:00
6-4 常用技巧2: 排版框架設計及元件安排

00:00
6-5 常用技巧3: 圖片的比例令人頭痛

00:00
6-6 常用技巧4: 左右互換呈現順序

00:00
6-7 常用技巧5: 手機版隱藏

00:00
6-8 常用技巧6: 打掉重練和選擇性出現

00:00
6-9 設計師也很實用的 RWD 思維

00:00
6-10 練習9：我的第一個RWD練習

00:00

第7單元實際切版流程

第8單元常用Javascript

8-1 JavaScript 簡介與 JQuery 的區別

00:00
8-2 變數與資料型態

00:00
8-3 選取網頁元素

00:00
8-4 事件及方法行為

00:00
8-5 跳出視窗及警告

00:00
8-6 換頁與重新整理技巧

00:00
8-7 簡單運算

00:00
8-8 條件判斷

00:00
8-9 迴圈及陣列處理方法

00:00
8-10 計時等待

00:00
8-11 練習 11：寫一個碼錶

00:00
8-12 利用 Bootstrap 建立一個幻燈片

00:00
8-13 利用 Bootstrap 建立一個折疊資訊按鈕

00:00
8-14 利用 Bootstrap 建立 Modal 彈跳視窗

00:00
8-15 透過api取得遠端資料

00:00
8-16 如何使用有趣的 library – chart.js 教學

00:00
8-17 練習 12：比特幣價格的 Dashboard

00:00

第9單元接案經驗手把手傳授

第10單元網站做好了如何部署到雲端

第11單元本課最精華 22 個經典版型案例

11-1 20 種按鈕示範

00:00
11-2 一頁式 Landing page

00:00
11-3 美麗的搜集資料表單

00:00
11-4 Banner 幻燈片

00:00
11-5 固定背景效果

00:00
11-6 任意拖移功能

00:00
11-7 設計一套自己的顏色主題

00:00
11-8 用網頁做動畫

00:00
11-9 網頁音樂播放器

00:00
11-10 復刻一個 Youtube吧

00:00
11-11 多功能的後台管理表格

00:00
11-12 登入表單

00:00
11-13 google 登入怎麼做

00:00
11-14 我的攝影作品集

00:00
11-15 有趣的網頁畫版

00:00
11-16 網頁天氣App

00:00
11-17 視差特效

00:00
11-18 fullscreen 效果

00:00
11-19 簡易購物車

00:00
11-20 做一個網頁版 IG

00:00
11-21 有趣的濾鏡應用

00:00
11-22 大選民調系統

00:00

課程資訊

試聽單元

課程單元

第1單元 HTML 的 入門到精通

1-1 簡介-HTML是什麼？為什麼會搭配CSS和JS

1-2 Html 標籤介紹

1-3 環境準備與目錄結構

1-4 常見的文字標籤

1-5 文字類型可以怎麼變化

1-6 區塊-一切都從區塊開始

1-7 連結-網頁的靈魂元素

1-8 圖片

1-9 按鈕-互動的開始

1-10 練習1 簡易的產品介紹網頁

1-11 列表-整齊呈現資訊

1-12 練習2 網頁選單 （無css/有css）

1-13 網頁的資訊設定

1-14 Emoji和跳脫字元

1-15 表格-管理資料的重要幫手

1-16 練習3 本月行事曆（無css/有css）

1-17 表單資料傳送觀念以及簡介前後端工作範圍

1-18 表單-如何建立第一個表單及各種表單類型

1-19 Iframe-嵌入有趣的Youtube影片

1-20 Media-播放音樂和影片其實很容易

1-21 練習4 意見調查（無css/有css）

第2單元 CSS 從認識到活用

2-1 css 的多種用法-我要如何開始使用 css

2-2 css 基本規則

2-3 常見文字相關css

2-4 如何讓連結更生動好看

2-5 圖片的樣式調整其實是一門學問

2-6 區塊與間距-網頁好看的關鍵

2-7 Box-sizing，常被呼略的重要觀念

2-8 背景的變化其實很多

2-9 練習5：建立一個圖文並茂的資訊盒

2-10 CSS的優先權重-為什麼我的設定沒有用？

2-11 Display – 多種排版觀念

2-12 Justify – 排版的多種對齊快讓人發瘋

2-13 Posistion – 如何放置一個固定位置的漂浮按鈕

2-14 練習6：單頁排版練習

2-15 Z-index – 擺放層級設定，圖片為什麼被擋住了？

2-16 Opacity – 透明度設定

2-17 Over-flow – 超出範圍怎麼辦？

2-18 練習7：自由排版練習

2-19 Shadow – 流行的陰影美感

2-20 對齊的多種方式相關用法大整理

2-21 object-fit – 另一種好用的圖片呈現技巧

2-22 絕對和相對單位

第3單元 CSS 進階玩法

3-1 CSS中的動態計算長度

3-2 CSS動畫

3-3 CSS變形

3-4 CSS遮罩

3-5 自動斷句產生刪節號…

3-6 ::after 使用技巧

3-7 練習8：自動截圖產生頭像

第4單元 常用的樣式技巧

4-1 tailwind 加速CSS開發的好工具

4-2 使用 google fonts 及客製化字型

4-3 使用漂亮的icon

4-4 整理css的技巧

第5單元 加速開發的幫手 Bootstrap

5-1 什麼是 Bootstrap？如何快速使用？

5-2 Bootstrap 的網格排版架構

5-3 Bootstrap 的常用元件和使用方法

5-4 用 Bootstrap 快速建立一個好看的表單

5-5 用 Bootstrap 快速建立客製化導覽列

第6單元 RWD 大魔王

6-1 RWD基本觀念

6-2 裝置大小

6-3 常用技巧1: 善用Bootstrap的RWD設計

6-4 常用技巧2: 排版框架設計及元件安排

6-5 常用技巧3: 圖片的比例令人頭痛

6-6 常用技巧4: 左右互換呈現順序

6-7 常用技巧5: 手機版隱藏

6-8 常用技巧6: 打掉重練和選擇性出現

6-9 設計師也很實用的 RWD 思維

6-10 練習9：我的第一個RWD練習

第7單元 實際切版流程

7-1 拆解網站layout及開發順序

第1單元 HTML 的入門到精通

1-12 練習2 網頁選單（無css/有css）

第4單元常用的樣式技巧

第5單元加速開發的幫手 Bootstrap

第7單元實際切版流程

第8單元常用Javascript

第9單元接案經驗手把手傳授

第10單元網站做好了如何部署到雲端

第11單元本課最精華 22 個經典版型案例