張互賓

成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集)

NT$1,650
軟體開發網頁開發

還在為網頁該如何設計煩惱嗎?在這門 HTML & CSS 課程中,將從 HTML 基本架構寫法開始,到 CSS 樣式撰寫,帶你完整認識並掌握各類語法,並透過實作練習,讓你學習如何完美操控 HTML & CSS,輕鬆打造網頁無負擔!

NT$1,650

2021/09/16

【課程通知】HTML & CSS 下集 上架啦~

<span style="font-size: 18px; font-family: verdana, geneva;">大家好!HTML & CSS 這門課程的<span style="color: #800000; background-color: #ffff00;"><strong>下集</strong></span>也正式上架囉!</span><br><span style="font-size: 18px; font-family: verdana, geneva;">在「下集」的課程中,將從課程「上集」的基本概念繼續向外延伸,<strong><span style="background-color: #ffff00; color: #3366ff;">帶你掌握更多網頁設計技術,去打造更有互動感的介面!</span></strong></span><br><br><span style="font-size: 18px; font-family: verdana, geneva;">你將可以學到:</span><br> <ul> <li><span style="font-size: 18px; font-family: verdana, geneva;">Grid Layout 排版模式</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">Column 多欄排版模式</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">transition 轉場效果</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">animation 動畫效果</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">動畫效果套件的使用</span></li> </ul> <br><span style="font-size: 18px; font-family: verdana, geneva;">若想要更加深入了解 HTML & CSS 或是喜愛張互賓老師的朋友們!</span><br><span style="font-size: 18px; font-family: verdana, geneva;">歡迎至課程頁面觀看更詳細的資訊唷:</span><br><span style="font-family: verdana, geneva; font-size: 18px;"><a href="https://www.tibame.com/course/2075">https://www.tibame.com/course/2075</a></span><br><br><br><br><span style="font-size: 18px; font-family: verdana, geneva;">緯育 TibaMe 團隊祝您學習愉快~</span>

最新討論

相對文字大小em的應用
柔芝 · 2023/08/08 10:43
div與span標籤運用
洋蔥 · 2023/07/27 13:59
css檔與變數關係
洋蔥 · 2023/07/26 09:42
post的內容沒有顯示(開發工具
柔芝 · 2023/07/18 14:56
表單結果無法顯示
柔芝 · 2023/07/16 22:50
查看更多討論

課程資訊

default clock課程時長 13 小時 5 分
default video課程共 21 單元 303 小節
default download2 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 7 週 (每週 2 小時)
最新公告
2021/09/16

【課程通知】HTML & CSS 下集 上架啦~

<span style="font-size: 18px; font-family: verdana, geneva;">大家好!HTML & CSS 這門課程的<span style="color: #800000; background-color: #ffff00;"><strong>下集</strong></span>也正式上架囉!</span><br><span style="font-size: 18px; font-family: verdana, geneva;">在「下集」的課程中,將從課程「上集」的基本概念繼續向外延伸,<strong><span style="background-color: #ffff00; color: #3366ff;">帶你掌握更多網頁設計技術,去打造更有互動感的介面!</span></strong></span><br><br><span style="font-size: 18px; font-family: verdana, geneva;">你將可以學到:</span><br> <ul> <li><span style="font-size: 18px; font-family: verdana, geneva;">Grid Layout 排版模式</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">Column 多欄排版模式</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">transition 轉場效果</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">animation 動畫效果</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">動畫效果套件的使用</span></li> </ul> <br><span style="font-size: 18px; font-family: verdana, geneva;">若想要更加深入了解 HTML & CSS 或是喜愛張互賓老師的朋友們!</span><br><span style="font-size: 18px; font-family: verdana, geneva;">歡迎至課程頁面觀看更詳細的資訊唷:</span><br><span style="font-family: verdana, geneva; font-size: 18px;"><a href="https://www.tibame.com/course/2075">https://www.tibame.com/course/2075</a></span><br><br><br><br><span style="font-size: 18px; font-family: verdana, geneva;">緯育 TibaMe 團隊祝您學習愉快~</span>

適合對象

  • 無設計、程式基礎的初學者
  • 有設計或是程式基礎且對網頁設計有興趣者
  • 嚮往網頁設計師、前端工程師、軟體工程師的職涯發展者
  • 網頁設計領域的入門者
  • 想自我進修專業能力者
  • 想自己設計網站的 DIY 者

你可以學到


你是否曾經有過以下情況呢?

    ➔  曾在瀏覽網頁時,對於畫面的介面設計感到很驚奇?
    ➔  在瀏覽網頁時總是好奇到底要如何才能產出這些美觀的畫面設計?
    ➔  在不經意拉動瀏覽器視窗,好奇網頁如何變化出不同樣式的風格?

現代科技已完全融入在我們的生活,幾乎人手一機
手機、電腦打開都是滿滿各種玲琅滿目的網頁,
到底要如何從眾多網頁中抓住瀏覽者的眼球呢?
此時「網頁設計」就將成為能夠讓你從眾多競爭者當中脫穎而出的重要技能!

「網頁設計」是指設計及建構一個網頁。舉例像是「網站架構、版面、顏色、字體、圖像」等等各元素的設計以及整體效果呈現。



此門課將帶你學會網頁設計技巧,
透過「 HTML」 與 「CSS」兩大網頁元素建造出實用又吸引人的介面,
從版面到顏色、從文字到圖像,馬上學馬上建!

課程介紹

★★★★ 免費試閱專區 ★★★★
      
1-1           第一個網頁快速上手
2-1           HTML 網頁文件基本結構
7-1           套用 CSS
20-2           商品圖文編排(下)
21-2           直向圖文編排

★★★★★★★★★★★★★★



此門課程將會使用 HTML5 與 CSS3 的版本帶你實際操作練習,除此之外,老師也會在影片分享 HTML 與 CSS 的新舊版本差異與重要觀念唷!


並從 HTML 基本架構寫法、語意標籤開始,到 CSS 基礎與進階樣式撰寫,帶著你完整認識並掌握各類語法,讓你的網頁整體不僅看起來更亮眼、吸睛外,還可以更精緻、多元!快來跟著影片中的教學步驟,打造專屬於你自己的網頁吧!





課程包含 21 個精華章節,每堂教學影片中不僅有張互賓老師詳細實作教學的內容,還有特製重點回顧與測驗評量來強化你的重要概念。

    ✦ 
21 個章節

    ✦  145 測驗評量
    ✦  HTML 實作_表單製作
    ✦  CSS 實作_版型切版實例
    ✦  HTML + CSS 實作_網頁介面製作





透過知識教學與實務應用雙管齊下,讓你學習如何完美操控 HTML & CSS 網頁兩大元素。



快跟上互賓老師的步伐,執行你的學習計畫

Goal 01. 瞭解 HTML 與 CSS 在網頁設計中所扮演的角色並安裝相關工具
Goal 02. 瞭解 HTML 網頁基本結構及基本術語
Goal 03. 學習使用基本標籤、固定結構及功能性標籤、媒體類型標籤及其它
Goal 04. 熟悉製作 HTML 表單流程
Goal 05. 瞭解 CSS 基本套用模式
Goal 06. 學習撰寫文字、背景、溢載、特定標籤主題、效果等樣式
Goal 07. 與 HTML 結合實際練習製作固定式版型切版及網頁介面

平淡無奇的網頁想在這現今網路世界中抓住大眾的眼球而被看見,這情況就猶如在大海裡撈針,因此透過「成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集)」這門課,讓互賓老師教你網頁設計眉角,讓你的網頁成為萬所矚目的焦點!



完成學習計畫後,你將能夠嘗試以下應用:

➤  了解版本宣告、標籤、元素、屬性等概念,實現基本網頁架構


➤  了解基本標概念,實現網頁架構中斷行與水平分隔線、段落、內容標題等設定。


➤  了解固定結構及功能性標籤概念,實現網頁中列表、清單、連結、圖片等設定。


➤  了解媒體類型標籤概念,實現網頁中影片、音訊等設定。


➤  了解選取器概念,實現網頁 CSS 套用方式


➤  了解 CSS 文字樣式概念,實現網頁中字體大小、粗體、樣式等設定。


➤  了解 CSS 基礎排版樣式概念,實現網頁中各元素定位等設定。


➤  了解 CSS 溢載樣式概念,實現網頁中內容超出區域等設定。


➤  了解 CSS 特定標籤主題概念,實現網頁中連結、列表、表格等設定。


➤  了解 CSS 背景樣式概念,實現網頁中背景顏色、圖片、大小、位置等設定。


➤  了解 CSS 基本效果樣式概念,實現網頁中各元素的透明度、陰影等設定。


➤  了解 transform 2D 概念,實現網頁中各元素的形變等設定。


➤  了解  Flexbox 概念,實現網頁中進階排版樣式等設定。



最完整的知識體系

這門課程仰賴 TibaMe 多年廣受好評且開班不斷的就業養成班體系「Web/APP 前端設計工程師養成班」所產出的以就業為出發點且在完訓後能為業界公司所用的最完整的知識內容,在課程製作前便已先行依照多位業界專家與授課講師(專業面)協同資深的教學設計師(教學面)一同規劃的「課程地圖」進行教學課綱的擬定與討論,在課程教材與影片上也已經過層層審核,不會出現像坊間線上課程沒有完整的知識架構,著重面不夠全面或是單元間的銜接度不足的尷尬狀況。

最豐富的培訓經驗

TibaMe 有著傳承中壢資策會多年的培訓基因,加上 TibaMe 雲端科技培訓團隊近 5 年的雲端科技導入。並且有著多年來累積的堅強教學師資,在知識與科技上的跟進從來不會一成不變,我們相信一門專業領域知識很難在一、兩堂線上課程完整呈現與詮釋,但只要透過有步驟、有技巧的學習方式就能有效確保學員只要有心想學就可以有所收穫!

最有效的學習成果

  • 學習目標|完成這門課程,讓你學會課程實作的知識及技能,每支課程影片都會有明確的學習目標,讓學員能完全掌握每支課程影片的教學目的與內容,可讓你將課程中的知識及技能實際應用在你的工作或專案上。
  • 學習計劃|我們設計的學習計畫,可以結合 Google 日曆,學員可以依照系統建議設定的學習週期與時數,也可以依照個人學習步調安排學習的時間,以逐步完成這門課的學習,系統會主動提醒學習時段。
  • 碎片學習|我們將課程教學影片每個知識點設計在 10 分鐘以內,利於學習者運用零碎時間學習,也方便使用電腦、平版或手機等跨裝置的學習。
  • 學習檢核|每個單元章節都會有形成性評量測驗,透過 QUIZ 練習讓你清楚知道自己的學習狀況,知道哪些內容學的好,那些內容需要加強。
  • 學習履歷|學員能夠透過學習履歷了解自我學習的歷程、足跡與習慣,進而掌握自己的能力的圖。此外,我們還會提供完課學員「學習證明」讓學員的努力更可以被看見並增加履歷的豐富度。
  • 複習便利|因有著每支課程影片(知識點)的學習目標與精簡的教學影片,在用作複習時也更容易進行快速搜索,找出想要重複觀看的教學內容,不會有在查找一支影片時需花費大量時間觀看且不易找出所需教學內容的問題。
  • 職涯增能|課程規劃以職場實際需求的知識和技能為目標,針對業界各職位所需的技能設計一步步引導的教學方式,讓你容易學會課程內容,也同時學會在職場上應用的知識及技能。


這門課程作為「成為前端工程師系列」的初階課程,課堂中不僅分別拆解及詳細解說 HTML 與 CSS 知識,還有以現有實際的功能案例進行演示網頁介面的實作技巧,並且每個教學章節都含有評量練習。全部內容包含了「 21 個章節、 158 支教學影片、145 個測驗評量」。準備好跟上腳步了嗎?我們將一同陪你一步一步踏入前端工程師世界並挖掘滿滿的網頁設計知識。

學習前基本能力

  • 熟悉 Windows 或 MacOS 作業系統基本操作

學習前準備

請學員自備筆記型電腦或桌上型電腦並確認有穩定的網路以利學習唷~

課程資訊

default clock課程時長 13 小時 5 分
default video課程共 21 單元 303 小節
default download2 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 7 週 (每週 2 小時)

關於講師

張互賓

張互賓老師
自 2009 年從業以來,即參與網站建置相關領域的工作,從需求、設計、開發、維護、管理,皆有所涉略,也不斷地接受客戶的委託,承接專案,期許能為想打造網站的公司或個人,解決網站大小事。

現況|
▹ 緯育 TibaMe 就業養成班講師
▹ 接案 自由工作者 Freelancer
▹ 建立 「WebMix - 設計好網站」粉絲頁,分享網站知識及文章。
▹ 成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。

經歷|
▹ 2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
▹ 2013 年:全職的網站前端自由工作者。
▹ 2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
▹ 2017 年:承接標案。
▹ 2018 年:網站相關教學。
▹ 2019 年:合夥存股管家。

作品分享(部份)|
01、5breakfast 早餐平台網站
02、X Fail 活動網站
03、鉅亨網債劵基金排行網頁
04、matchnow 網紅平台網站
05、上海在野設計網站
06、毅創投資網站
07、MBA 顧問網站
08、智夢網站
09、RocketAdmit網站
10、臺南市政府圖片資料庫平台網站
11、王爺水餃子網站
12、雕塑學會網站
13、亞太公私合夥建設發展協會網站
14、長風文教基金會網站
15、矽谷創業家協會網站


聯絡方式|
▹ 張互賓/Carlos
▹ 個人 FB( https://www.facebook.com/hubin )
▹ FB 專頁( https://www.facebook.com/webmix.cc/ )
▹ 個人 email: [email protected]

希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
1. 基礎簡介
6 小節
video common icon

簡介前端主要程式:HTML、CSS、JS

02:19
quiz common icon

QUIZ:簡介前端主要程式:HTML、CSS、JS

共2題
video common icon

工具:編輯器及瀏覽器

03:06
quiz common icon

QUIZ:工具:編輯器及瀏覽器

共1題
試看
video common icon

第一個網頁快速上手

04:34
quiz common icon

QUIZ:第一個網頁快速上手

共1題
2. HTML 基本寫法
6 小節
試看
video common icon

HTML 網頁文件基本結構

01:59
quiz common icon

QUIZ:HTML 網頁文件基本結構

共1題
video common icon

認識版本宣告、標籤、元素、屬性

01:08
quiz common icon

QUIZ:認識版本宣告、標籤、元素、屬性

共2題
video common icon

HTML 撰寫注意事項

04:40
quiz common icon

QUIZ:HTML 撰寫注意事項

共1題
3. HTML 語意標籤 - 基本標籤
24 小節
video common icon

保留文字格式

01:31
quiz common icon

QUIZ:保留文字格式

共1題
video common icon

表示程式的標籤

01:56
quiz common icon

QUIZ:表示程式的標籤

共1題
video common icon

註解

01:37
quiz common icon

QUIZ:註解

共1題
video common icon

網頁標題

00:55
quiz common icon

QUIZ:網頁標題

共1題
video common icon

中介資料(Meta Data)

02:24
quiz common icon

QUIZ:中介資料(Meta Data)

共1題
video common icon

時間

02:04
quiz common icon

QUIZ:時間

共1題
video common icon

縮寫

01:38
quiz common icon

QUIZ:縮寫

共1題
video common icon

斷行與水平分隔線

01:26
quiz common icon

QUIZ:斷行與水平分隔線

共1題
video common icon

段落

00:38
quiz common icon

QUIZ:段落

共1題
video common icon

內容標題

01:47
quiz common icon

QUIZ:內容標題

共1題
video common icon

引用

01:35
quiz common icon

QUIZ:引用

共1題
video common icon

結構練習一

01:58
quiz common icon

QUIZ:結構練習一

共1題
4. HTML 語意標籤 - 固定結構及功能性標籤
20 小節
video common icon

列表

02:33
quiz common icon

QUIZ:列表

共1題
video common icon

清單

02:08
quiz common icon

QUIZ:清單

共1題
video common icon

連結

02:58
quiz common icon

QUIZ:連結

共1題
video common icon

圖片

05:08
quiz common icon

QUIZ:圖片

共1題
video common icon

獨立內容

02:11
quiz common icon

QUIZ:獨立內容

共1題
video common icon

表格

06:35
quiz common icon

QUIZ:表格

共1題
video common icon

嵌入外站

03:35
quiz common icon

QUIZ:嵌入外站

共1題
video common icon

span 和 div

02:33
quiz common icon

QUIZ:span 和 div

共1題
video common icon

有語意的結構標籤

02:23
quiz common icon

QUIZ:有語意的結構標籤

共2題
video common icon

結構練習二

02:52
quiz common icon

QUIZ:結構練習二

共1題
5. HTML 語意標籤 - 媒體類型標籤及其它
14 小節
video common icon

HTML Entity(實體)

03:16
quiz common icon

QUIZ:HTML Entity(實體)

共1題
video common icon

簡介 SVG

04:48
quiz common icon

QUIZ:簡介 SVG

共1題
video common icon

簡介 canvas

02:02
quiz common icon

QUIZ:簡介 canvas

共1題
video common icon

影片

04:29
quiz common icon

QUIZ:影片

共1題
video common icon

音訊

02:59
quiz common icon

QUIZ:音訊

共1題
video common icon

其它標籤

03:11
quiz common icon

QUIZ:其它標籤

共1題
video common icon

HTML 所有標籤

02:12
quiz common icon

QUIZ:HTML 所有標籤

共1題
6. HTML 表單
25 小節
video common icon

基本結構

01:55
quiz common icon

QUIZ:基本結構

共1題
video common icon

文字框:一般文字

03:53
quiz common icon

QUIZ:文字框:一般文字

共1題
video common icon

文字框:密碼

01:00
quiz common icon

QUIZ:文字框:密碼

共1題
video common icon

文字框:隱藏

02:40
quiz common icon

QUIZ:文字框:隱藏

共1題
video common icon

多行文字框

01:50
quiz common icon

QUIZ:多行文字框

共1題
video common icon

單選

02:56
quiz common icon

QUIZ:單選

共1題
video common icon

勾選(核取方塊)

03:51
quiz common icon

QUIZ:勾選(核取方塊)

共1題
video common icon

下拉選單

02:47
quiz common icon

QUIZ:下拉選單

共1題
video common icon

一般按鈕與資料送出按鈕

02:37
quiz common icon

QUIZ:一般按鈕與資料送出按鈕

共1題
video common icon

認識資料傳遞方式

01:43
quiz common icon

QUIZ:認識資料傳遞方式

共1題
video common icon

傳遞檔案

04:38
quiz common icon

QUIZ:傳遞檔案

共2題
video common icon

表單練習(上)

06:15
video common icon

表單練習(下)

05:57
quiz common icon

QUIZ:表單練習

共1題
7. CSS 基礎套用
12 小節
試看
video common icon

套用 CSS

05:41
quiz common icon

QUIZ:套用 CSS

共2題
video common icon

註解

01:31
quiz common icon

QUIZ:註解

共1題
video common icon

選取器 - 屬性及值

06:38
quiz common icon

QUIZ:選取器 - 屬性及值

共1題
video common icon

選取器 - 符號

05:48
quiz common icon

QUIZ:選取器 - 符號

共1題
video common icon

選器取 - class 和 id

06:32
quiz common icon

QUIZ:選器取 - class 和 id

共1題
video common icon

關於優先權

03:06
quiz common icon

QUIZ:關於優先權

共1題
8. CSS 偽元素與偽類別
5 小節
video common icon

偽元素(Pseudo Element)

05:15
quiz common icon

QUIZ:偽元素(Pseudo Element)

共1題
video common icon

偽類別(Pseudo Class)(上)

06:36
video common icon

偽類別(Pseudo Class)(下)

05:06
quiz common icon

QUIZ:偽類別(Pseudo Class)

共1題
9. CSS 基礎排版樣式
23 小節
video common icon

display 屬性

04:24
quiz common icon

QUIZ:display 屬性

共1題
video common icon

區塊模型(Box Model) (上)

07:13
video common icon

區塊模型(Box Model) (下)

06:50
quiz common icon

QUIZ:區塊模型(Box Model)

共1題
video common icon

同層對齊(vertical-align)

04:59
quiz common icon

QUIZ:同層對齊(vertical-align)

共1題
video common icon

定位(position)- 固定定位

05:49
quiz common icon

QUIZ:定位(position)- 固定定位

共1題
video common icon

定位(position)- 相對定位

02:10
quiz common icon

QUIZ:定位(position)- 相對定位

共1題
video common icon

定位(position)- 絕對定位

03:26
quiz common icon

QUIZ:定位(position)- 絕對定位

共1題
video common icon

定位(position)- sticky 定位

03:29
quiz common icon

QUIZ:定位(position)- sticky 定位

共1題
video common icon

浮動(float)

06:08
quiz common icon

QUIZ:浮動(float)

共1題
video common icon

二欄固定式版型(上)

07:50
video common icon

二欄固定式版型(下)

05:54
quiz common icon

QUIZ:二欄固定式版型

共1題
video common icon

練習導覽列(上)

05:11
video common icon

練習導覽列(下)

07:30
quiz common icon

QUIZ:練習導覽列

共1題
10. CSS 文字樣式
22 小節
video common icon

文字大小(font-size)

07:27
quiz common icon

QUIZ:文字大小(font-size)

共1題
video common icon

文字粗體(font-weight)

04:29
quiz common icon

QUIZ:文字粗體(font-weight)

共1題
video common icon

字體樣式(font-style)

01:25
quiz common icon

QUIZ:字體樣式(font-style)

共1題
video common icon

文字畫線(text-decoration)

05:52
quiz common icon

QUIZ:文字畫線(text-decoration)

共1題
video common icon

英文字大小寫(text-transform)

02:25
quiz common icon

QUIZ:英文字大小寫(text-transform)

共1題
video common icon

文字水平對齊(text-align)

02:02
quiz common icon

QUIZ:文字水平對齊(text-align)

共1題
video common icon

文字行高(line-height)

02:36
quiz common icon

QUIZ:文字行高(line-height)

共1題
video common icon

關於空格(white-space)

02:43
quiz common icon

QUIZ:關於空格(white-space)

共1題
video common icon

文字斷行(word-break)及連字符號(hyphens)

04:37
quiz common icon

QUIZ:文字斷行(word-break)及連字符號(hyphens)

共1題
video common icon

文字顏色(color)

09:22
quiz common icon

QUIZ:文字顏色(color)

共1題
video common icon

指定字體(font-family)

11:13
quiz common icon

QUIZ:指定字體(font-family)

共1題
11. CSS 背景樣式
20 小節
video common icon

背景顏色(background-color)

02:25
quiz common icon

QUIZ:背景顏色(background-color)

共1題
video common icon

背景圖(background-image)

06:26
quiz common icon

QUIZ:背景圖(background-image)

共1題
video common icon

背景圖反覆出現(background-repeat)

05:35
quiz common icon

QUIZ:背景圖反覆出現(background-repeat)

共1題
video common icon

背景圖大小(background-size)

06:11
quiz common icon

QUIZ:背景圖大小(background-size)

共1題
video common icon

背景圖位置(background-position)

04:32
quiz common icon

QUIZ:背景圖位置(background-position)

共1題
video common icon

背景圖固定模式(background-attachment)

09:57
quiz common icon

QUIZ:背景圖固定模式(background-attachment)

共1題
video common icon

背景圖顯示區域(background-origin)

04:23
quiz common icon

QUIZ:背景圖顯示區域(background-origin)

共1題
video common icon

背景圖裁切(background-clip)

03:53
quiz common icon

QUIZ:背景圖裁切(background-clip)

共1題
video common icon

背景線性漸層

09:37
quiz common icon

QUIZ:背景線性漸層

共1題
video common icon

同個區域可設定多個背景

03:51
quiz common icon

QUIZ:同個區域可設定多個背景

共1題
12. CSS 溢載樣式
4 小節
video common icon

內容超出區域(overflow)

06:34
quiz common icon

QUIZ:內容超出區域(overflow)

共1題
video common icon

限制單行文字,出現省略符號(text-overflow)

02:39
quiz common icon

QUIZ:限制單行文字,出現省略符號(text-overflow)

共1題
13. CSS 特定標籤主題樣式
6 小節
video common icon

連結樣式

04:53
quiz common icon

QUIZ:連結樣式

共1題
video common icon

列表樣式

05:56
quiz common icon

QUIZ:列表樣式

共1題
video common icon

表格樣式

04:10
quiz common icon

QUIZ:表格樣式

共1題
14. CSS 基本效果樣式
14 小節
video common icon

元素不透明度(opacity)

04:32
quiz common icon

QUIZ:元素不透明度(opacity)

共1題
video common icon

元素是否可見(visibility)

02:39
quiz common icon

QUIZ:元素是否可見(visibility)

共1題
video common icon

元素輪廓(outline)

04:35
quiz common icon

QUIZ:元素輪廓(outline)

共1題
video common icon

游標(cursor)

04:37
quiz common icon

QUIZ:游標(cursor)

共1題
video common icon

圓角(border-radius)

05:52
quiz common icon

QUIZ:圓角(border-radius)

共2題
video common icon

區塊陰影(box-shadow)

06:11
quiz common icon

QUIZ:區塊陰影(box-shadow)

共1題
video common icon

文字陰影(text-shadow)

03:49
quiz common icon

QUIZ:文字陰影(text-shadow)

共1題
15. CSS 形變效果樣式 - transform 2D
10 小節
video common icon

旋轉

05:36
quiz common icon

QUIZ:旋轉

共1題
video common icon

縮放

04:06
quiz common icon

QUIZ:縮放

共1題
video common icon

偏移

05:36
quiz common icon

QUIZ:偏移

共1題
video common icon

傾斜

05:18
quiz common icon

QUIZ:傾斜

共1題
video common icon

同時套用多種形變效果

03:46
quiz common icon

QUIZ:同時套用多種形變效果

共1題
16. CSS 進階排版樣式 - Flexbox 觀念
6 小節
video common icon

flex 和 inline-flex

02:35
quiz common icon

QUIZ:flex 和 inline-flex

共1題
video common icon

Flex Container 和 Flex Items

03:24
quiz common icon

QUIZ:Flex Container 和 Flex Items

共1題
video common icon

主軸(Main Axis)和交錯軸(Cross Axis)

02:12
quiz common icon

QUIZ:主軸(Main Axis)和交錯軸(Cross Axis)

共1題
17. CSS 進階排版樣式 - Flexbox Container
12 小節
video common icon

方向如何排列(flex-direction)

04:32
quiz common icon

QUIZ:方向如何排列(flex-direction)

共1題
video common icon

是否斷行(flex-wrap)

03:53
quiz common icon

QUIZ:是否斷行(flex-wrap)

共1題
video common icon

方向與斷行的縮寫(flex-flow)

01:49
quiz common icon

QUIZ:方向與斷行的縮寫(flex-flow)

共1題
video common icon

Items 在主軸中如何排列(justify-content)

05:46
quiz common icon

QUIZ:Items 在主軸中如何排列(justify-content)

共1題
video common icon

Items 在交錯軸中如何排列(align-content)

08:01
quiz common icon

QUIZ:Items 在交錯軸中如何排列(align-content)

共1題
video common icon

各 Items 之間,在交錯軸中如何排列(align-items)

06:59
quiz common icon

QUIZ:各 Items 之間,在交錯軸中如何排列(align-items)

共1題
18. CSS 進階排版樣式 - Flexbox Items
14 小節
video common icon

只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)

04:30
quiz common icon

QUIZ:只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)

共1題
video common icon

指定順序(order)

02:48
quiz common icon

QUIZ:指定順序(order)

共1題
video common icon

自動擴展(flex-grow)

05:08
quiz common icon

QUIZ:自動擴展(flex-grow)

共1題
video common icon

自動壓縮(flex-shrink)

05:02
quiz common icon

QUIZ:自動壓縮(flex-shrink)

共1題
video common icon

設定寬或高(flex-basis)

02:53
quiz common icon

QUIZ:設定寬或高(flex-basis)

共1題
video common icon

縮寫形式(flex)

03:09
quiz common icon

QUIZ:縮寫形式(flex)

共1題
video common icon

使用 Flexbox 建立固定式二欄排版

05:05
quiz common icon

QUIZ:使用 Flexbox 建立固定式二欄排版

共1題
19. 固定式版型切版 - 商品列表頁
19 小節
video common icon

網頁建立、header 區塊及變數寫法(上)

07:11
video common icon

網頁建立、header 區塊及變數寫法(下)

08:21
quiz common icon

QUIZ:網頁建立、header 區塊及變數寫法

共1題
video common icon

LOGO 及導覽列左側

11:30
quiz common icon

QUIZ:LOGO 及導覽列左側

共1題
video common icon

導覽列右側(上)

08:46
video common icon

導覽列右側(下)

08:44
quiz common icon

QUIZ:導覽列右側

共1題
video common icon

滿版背景圖

04:30
quiz common icon

QUIZ:滿版背景圖

共1題
video common icon

footer 區域

05:35
quiz common icon

QUIZ:footer 區域

共1題
video common icon

中間區域及二欄式切版

10:04
quiz common icon

QUIZ:中間區域及二欄式切版

共1題
video common icon

側邊欄表單分類

10:06
quiz common icon

QUIZ:側邊欄表單分類

共1題
video common icon

商品列表區域(上)

10:52
video common icon

商品列表區域(下)

09:23
quiz common icon

QUIZ:商品列表切版

共1題
20. 固定式版型切版 - 商品詳細頁
9 小節
video common icon

商品簡介及購買表單(上)

11:14
video common icon

商品簡介及購買表單(下)

11:02
quiz common icon

QUIZ:商品簡介及購買表單

共1題
video common icon

商品圖文編排(上)

05:56
試看
video common icon

商品圖文編排(下)

07:30
quiz common icon

QUIZ:商品圖文編排

共1題
video common icon

詢問表單排版(上)

06:24
video common icon

詢問表單排版(下)

07:45
quiz common icon

QUIZ:詢問表單排版

共1題
21. 介面實作
32 小節
video common icon

麵包屑(Breadcrumb)

08:26
quiz common icon

QUIZ:麵包屑(Breadcrumb)

共1題
試看
video common icon

直向圖文編排

09:37
quiz common icon

QUIZ:直向圖文編排

共1題
video common icon

文繞圖

11:07
quiz common icon

QUIZ:文繞圖

共1題
video common icon

自訂下拉選單外觀

05:10
quiz common icon

QUIZ:自訂下拉選單外觀

共1題
video common icon

分頁(Pagination)(上)

06:22
video common icon

分頁(Pagination)(下)

06:15
quiz common icon

QUIZ:分頁(Pagination)

共1題
video common icon

三角形

04:10
quiz common icon

QUIZ:三角形

共1題
video common icon

tooltip

08:53
quiz common icon

QUIZ:tooltip

共1題
video common icon

popover

11:08
quiz common icon

QUIZ:popover

共1題
video common icon

表單欄位群組化(Input Group)

09:33
quiz common icon

QUIZ:表單欄位群組化(Input Group)

共1題
video common icon

進度條(Progress Bar)

04:48
quiz common icon

QUIZ:進度條(Progress Bar)

共1題
video common icon

自訂核取方塊

08:46
quiz common icon

QUIZ:自訂核取方塊

共1題
video common icon

雙態開關

06:28
quiz common icon

QUIZ:雙態開關

共1題
video common icon

列表項目符號替換

04:15
quiz common icon

QUIZ:列表項目符號替換

共1題
video common icon

影片第一屏滿版

07:03
quiz common icon

QUIZ:影片第一屏滿版

共1題
video common icon

頁籤(Tab)(上)

07:37
video common icon

頁籤(Tab)(下)

09:02
quiz common icon

QUIZ:頁籤(Tab)

共1題

學習附件

file-icon
講義.pdf
15.91 MB
stage arrow to bottom
file-icon
html_css.zip
11.55 MB
stage arrow to bottom

購買此課程後,才能使用留言功能

沒有回應的問題

目前尚無任何討論主題

成為第一個發問的人!在問答中找到學習的捷徑。

關於講師

張互賓

張互賓老師
自 2009 年從業以來,即參與網站建置相關領域的工作,從需求、設計、開發、維護、管理,皆有所涉略,也不斷地接受客戶的委託,承接專案,期許能為想打造網站的公司或個人,解決網站大小事。

現況|
▹ 緯育 TibaMe 就業養成班講師
▹ 接案 自由工作者 Freelancer
▹ 建立 「WebMix - 設計好網站」粉絲頁,分享網站知識及文章。
▹ 成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。

經歷|
▹ 2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
▹ 2013 年:全職的網站前端自由工作者。
▹ 2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
▹ 2017 年:承接標案。
▹ 2018 年:網站相關教學。
▹ 2019 年:合夥存股管家。

作品分享(部份)|
01、5breakfast 早餐平台網站
02、X Fail 活動網站
03、鉅亨網債劵基金排行網頁
04、matchnow 網紅平台網站
05、上海在野設計網站
06、毅創投資網站
07、MBA 顧問網站
08、智夢網站
09、RocketAdmit網站
10、臺南市政府圖片資料庫平台網站
11、王爺水餃子網站
12、雕塑學會網站
13、亞太公私合夥建設發展協會網站
14、長風文教基金會網站
15、矽谷創業家協會網站


聯絡方式|
▹ 張互賓/Carlos
▹ 個人 FB( https://www.facebook.com/hubin )
▹ FB 專頁( https://www.facebook.com/webmix.cc/ )
▹ 個人 email: [email protected]

希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
立即加入成為Line官方好友
become line friend
返回主選單
課程類型
影音課程
直播課程
實體課程
返回主選單
返回主選單
返回主選單