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

課程資訊 課程大綱 開課單位 常見問答
Loading...
線上課程

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

4186次瀏覽
NT$1,360
優惠現領
85 折
【4/9-5/5限時85折】
課程資訊
本頁面課程內容及活動資訊概由廠商提供,部分內容非屬104服務範疇,會員應遵守之規範悉依 104課程中心會員規約 所載。
上課時間 無限期觀看課程查看更多
上課方式 於開課單位網站兌換後觀看課程
課程內容
課程大綱
展開全部
1 CSS Grid Layout 基本觀念
01
前言
02
認識 grid 和 inline-grid
03
QUIZ:認識 grid 和 inline-grid
04
認識基本術語
05
QUIZ:認識基本術語
2 CSS Grid Container 屬性 - 1/2
01
grid-template-columns 設定各欄寬度、grid-template-rows 設定各列高度
02
QUIZ:grid-template-columns 設定各欄寬度、grid-template-rows 設定各列高度
03
grid-auto-flow 設定流向
04
QUIZ:grid-auto-flow 設定流向
05
grid-auto-rows 設定各列預設高度、grid-auto-columns 設定各欄預設寬度
06
QUIZ:grid-auto-rows 設定各列預設高度、grid-auto-columns 設定各欄預設寬度
07
grid-template-areas 屬性 與 grid-area 命名
08
QUIZ:grid-template-areas 屬性 與 grid-area 命名
09
grid-template 簡寫形式
10
QUIZ:grid-template 簡寫形式
11
grid 簡寫形式
12
QUIZ:grid 簡寫形式
13
repeat() 與 minmax() 函式與 fr 單位
14
QUIZ:repeat() 與 minmax() 函式與 fr 單位
3 CSS Grid Container 屬性 - 2/2
01
column-gap 設定各欄間距
02
QUIZ:column-gap 設定各欄間距
03
row-gap 設定各列間距
04
QUIZ:row-gap 設定各列間距
05
gap 簡寫形式
06
QUIZ:gap 簡寫形式
07
justify-items 沿著 Row Axis 排列
08
QUIZ:justify-items 沿著 Row Axis 排列
09
align-items 沿著 Column Axis 排列
10
QUIZ:align-items 沿著 Column Axis 排列
11
place-items 簡寫形式
12
QUIZ:place-items 簡寫形式
13
justify-content 沿著 Row Axis 排列
14
QUIZ:justify-content 沿著 Row Axis 排列
15
align-content 沿著 Column Axis 排列
16
QUIZ:align-content 沿著 Column Axis 排列
17
place-content 簡寫形式
18
QUIZ:place-content 簡寫形式
4 CSS Grid Items
01
grid-column 合併與 Grid Line 的命名
02
QUIZ:grid-column 合併與 Grid Line 的命名
03
grid-row 合併與 Grid Line 的命名
04
QUIZ:grid-row 合併與 Grid Line 的命名
05
justify-self 排列規則與 justify-items 相同
06
QUIZ:justify-self 排列規則與 justify-items 相同
07
align-self 排列規則與 align-items 相同
08
QUIZ:align-self 排列規則與 align-items 相同
09
place-self 簡寫形式
10
QUIZ:place-self 簡寫形式
11
grid-area 簡寫形式與命名
12
QUIZ:grid-area 簡寫形式與命名
5 Columns 多欄排版模式
01
column-count 決定欄數
02
QUIZ:column-count 決定欄數
03
column-fill 內容如何填滿欄數
04
QUIZ:column-fill 內容如何填滿欄數
05
column-gap 各欄間距
06
QUIZ:column-gap 各欄間距
07
column-rule 各欄之間的直線樣式
08
QUIZ:column-rule 各欄之間的直線樣式
09
column-span 元素跨欄
10
QUIZ:column-span 元素跨欄
11
column-width 每欄寬度
12
QUIZ:column-width 每欄寬度
6 CSS 轉場效果 - transition
01
transition-property 與 transition-duration 屬性
02
QUIZ:transition-property 與 transition-duration 屬性
03
transition-timing-function 漸變函式
04
QUIZ:transition-timing-function 漸變函式
05
transition-delay 效果的延遲
06
QUIZ:transition-delay 效果的延遲
07
transition 簡寫形式
08
QUIZ:transition 簡寫形式
7 CSS 動畫效果 - animation
01
第一個 animation
02
QUIZ:第一個 animation
03
關於 keyframes
04
QUIZ:關於 keyframes
05
同個元素套用多個 animation
06
QUIZ:同個元素套用多個 animation
07
animation-iteration-count 次數
08
QUIZ:animation-iteration-count 次數
09
animation-direction 方向
10
QUIZ:animation-direction 方向
11
animation-delay 效果的延遲
12
QUIZ:animation-delay 效果的延遲
13
animation-fill-mode 填滿模式
14
QUIZ:animation-fill-mode 填滿模式
15
animation-play-state 播放狀態
16
QUIZ:animation-play-state 播放狀態
17
animation-timing-function 漸變函式
18
QUIZ:animation-timing-function 漸變函式
19
動畫效果事件
20
QUIZ:動畫效果事件
8 動畫效果套件 - Animate.css
01
簡介及直接加上 class 套用
02
QUIZ:簡介及直接加上 class 套用
03
效果永久的反覆執行
04
QUIZ:效果永久的反覆執行
05
自定義相關屬性
06
QUIZ:自定義相關屬性
07
透過 JS,動態的加上動畫效果 class
08
QUIZ:透過 JS,動態的加上動畫效果 class
09
讓動畫效果,透過按鈕可以執行多次
10
QUIZ:讓動畫效果,透過按鈕可以執行多次
11
動畫效果執行完畢後,再執行自己定義的 JS 程式
12
QUIZ:動畫效果執行完畢後,再執行自己定義的 JS 程式
9 動畫效果套件 - AOS
01
基本套用
02
QUIZ:基本套用
03
瞭解 aos 基本屬性
04
QUIZ:瞭解 aos 基本屬性
05
瞭解 data-aos-offset
06
QUIZ: 瞭解 data-aos-offset
07
瞭解 data-aos-anchor-placement
08
QUIZ:瞭解 data-aos-anchor-placement
09
瞭解 data-aos-anchor
10
QUIZ:瞭解 data-aos-anchor
11
利用 AOS,套用自己寫的 transition
12
QUIZ:利用 AOS,套用自己寫的 transition
13
寫一個 keyframes 的簡單動畫效果,讓 AOS 套用
14
QUIZ:寫一個 keyframes 的簡單動畫效果,讓 AOS 套用
10 實作商品列表檢視模式的切換
01
頁籤介面
02
QUIZ:頁籤介面
03
單個商品排版
04
QUIZ:單個商品排版
05
商品橫向檢視模式
06
QUIZ:商品橫向檢視模式
07
商品直向檢視模式
08
QUIZ:商品直向檢視模式
09
商品瀑布流檢視模式
10
QUIZ:商品瀑布流檢視模式
11 介面實作
01
搜尋框:focus 狀態的轉場效果
02
QUIZ:搜尋框:focus 狀態的轉場效果
03
滑鼠移入,內容往上呈現
04
QUIZ:滑鼠移入,內容往上呈現
05
欄位左右擺動效果
06
QUIZ:欄位左右擺動效果
07
sprite 動畫效果
08
QUIZ:sprite 動畫效果
09
loading icon
10
QUIZ:loading icon
11
介面從螢幕右側向左滑入
12
QUIZ:介面從螢幕右側向左滑入
13
導覽列次選單淡入淡出
14
QUIZ:導覽列次選單淡入淡出
15
棋盤式版型
16
QUIZ:棋盤式版型
你可以學到



若你已經知道如何設計出一個網站頁面,卻總是覺得還少了點什麼?



以上有講到你心中的疑惑,那你就不能錯過此門「透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面」的下集!


|上集和下集的差別在哪呢?

成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集)  中,你將能學會使用 HTML、CSS 去實作出一個網站頁面,也能透過實際練習,了解從無到有的切版過程。

此門課程,將從上集的基本概念繼續向外延伸,帶你掌握更多網頁設計技術,去打造更有互動感的介面!

|透過這門課你可以學到:

  • Grid Layout 排版模式
  • Column 多欄排版模式
  • transition 轉場效果
  • animation 動畫效果
  • 動畫效果套件的使用
適合對象
具備 HTML & CSS 基礎概念,且有以下情形:
  • 對網頁設計有興趣的你
  • 想更進修網頁設計能力的你
  • 想自己設計專業網站的你
  • 想增加自家網站產品包裝頁面吸睛度的你
  • 嚮往網頁設計師、前端工程師、軟體工程師的你
課程講師
張互賓
張互賓老師自 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: chang.abin@gmail.com希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
展開全部
開課單位
緯育TibaMe
緯育TibaMe由全球最大資通訊集團之一的緯創資通集團於2015年正式成立,我們專注於人才培訓與平台服務,發展多元的授課模式,並結合緯育開發的雲端智能化學習系統,有效培育新世代數位化人才。在行動與雲端時代,用科技加值人才培育,持續發展創新與有效的數位教育學習服務。
最新動態 看所有動態

從想轉職到成功轉職-學長姊現身說最真實

🎤 學長姊分享 想跨域轉職一路上的 ✅ 心態調適 ✅ 準備過程 ✅ 成功經驗 ✅ 職場真實樣貌 聽我們說不如聽過來人──轉職成功的學長姊現身說最真實~ 這裡報名線上與學長聊聊>> https://bit.ly/4cGHC9f ▍誰適合參加 🔹即將從就業培訓班結訓的你 🔹剛結訓想繼續物色優質職缺的你 🔹想跨域域轉職猶豫中的你 ▍從財金系畢業轉職為後端工程師的學長要跟你分享 🔥 如何結合非本科系的背景創造自己的優勢 🔥 專題作品準備心法 🔥 履歷撰寫技巧與面試準備方向 🔥 進入職場的實際狀況與持續進修該學什麼 🔥 後端工程師未來職涯發展的可能性 ▍直播資訊 時間:4/23 (三) 晚上 8 點至 9 點 型式:線上直播 (直播連結將於報名後2~3個工作天email提供) 報名連結: https://bit.ly/4cGHC9f

AI × Python × 商務應用開發,跨域實戰訓練開放報名!

📢 AI × Python × 商務應用開發,跨域實戰訓練開放報名! 還在等自學開竅?與其被AI浪潮甩在後頭,不如現在就開始打好根基,從AI開發到商務應用一次搞定! 🔥 【商務AI應用人才養成班】第01期 即日起開放報名 系統化訓練從 Python、ChatGPT、LINE Bot、LLM 到雲端部署與專案實戰, 讓你不只能寫程式,還能部署應用、主導AI專案! 📍 上課地點:台北市中山區/部分遠距授課 📆 上課時間:2025/5/27~2025/8/28(共322小時) 🧠 甄試日期:2025/5/15(含 Python 筆試與口試) 💰 訓練費用:勞動部補助 💡 你將學到: Python 程式設計 × 雲端資料處理 × ChatGPT × Gradio × LINE Bot × Azure AI × Docker × LLM 整合應用 AI 協助簡報設計、圖像生成、影片剪輯等商務應用 NLP開發、AI前端、專題實作、專案管理與求職技巧 🎯 就業發展方向: AI應用工程師、提示詞工程師、產品專案經理、Pre-Sales 工程師、商務開發等 課程說明會: https://www.surveycake.com/s/46o6g 課程頁面>> https://www.tibame.com/goodjob/AItalent
常見問答
如何購買課程並開始上課
於欲購買 1. 線上課程之頁面,點擊「立即購買」,成功使用信用卡完成付款並確立訂單成立後,本平台將透過購買填寫之信箱,以郵件方式通知「訂單成立」,後續兌換學習有兩種形式:(A) 若購買學習廠商提供課程,購買後「提供課程兌換序號、兌換連結、兌換碼使用說明」,引導您至購買課程之出版廠商兌換並上課、(B)若購買是104學習系統,購買完可以從郵件、訂單明細、課程詳細頁直接進到站內線上學習。 2. 實體課程之頁面,點擊「立即購買」,成功完成付款並確立訂單成立後,本平台將透過購買填寫之信箱,以郵件方式通知「訂單成立」即可完成報名,後續開課單位會有專員與您聯繫後續事宜。
購買與報名課程付款方式?
僅提供信用卡付款。
有支援信用卡分期嗎?
平台有提供分期服務:結帳金額滿$4,000可享三期零利率,滿$12,000可享六期零利率;分期服務支援銀行公司為:中國信託、台新銀行、玉山銀行,實際分期金額依各發卡行規定
已完成付款,但用錯折扣碼怎麼辦?
請申請退款並重新下單,已使用之折扣碼,本平台將不進行退回,敬請見諒。
線上刷卡後訂單狀態顯示「待付款」
代表您的結帳流程尚未完成,請儘速完成結帳程序,以免課程相關優惠權益失效。
刷卡失敗的原因
可能為以下原因: 1.授權失敗(例:信用卡發卡銀行系統忙碌、網路塞車、刷卡等待時間過久造成系統確認失敗等問題),建議稍待一段時間再重新刷卡。 2.輸入信用卡卡號等相關資料不正確(例:輸入資料不正確、卡號過期、尚未開卡等問題),建議重新確認輸入資訊。
如何選擇紙本發票
為響應政府政策,不主動提供紙本發票,委由金財通系統寄發電子發票開立通知信至學員購買課程時填寫之Email,發票自動存入會員載具,若未收到請告知。
企業請款之憑證,如何申請
若需要進行企業請款,請於購買時輸入統一編號、發票抬頭,本平台將以郵件寄送電子發票方式,至您填寫之信箱。
多久會收到發票
發票將於付款成功,3個工作天內開立,敬請稍候。
如何退款
請參考下方退款須知與流程 1.若您於本平台成功完成付款購買課程,有退款需求,於外部學習廠商兌換之線上課程自購買日起7天內,且未進行課程兌換,可申請全額退費;於104課程中心站內學習課程若購買日起7天內後「未進到學習頁」,可申請全額退費;實體課程須於開課日前 1 日之非假日上班時段前與104學習精靈提出申請,始得要求全額退費。 2.若需申請退款,請使用信件主旨:「課程中心退款申請」,並於信件內容寫明購買人姓名、訂單編號、欲退款之課程名稱,郵件至nabiservice@104.com.tw,本平台將於5個工作天內盡快為您處理。 3.確認提出退款申請時間為課程購買日起7天內,且未進行課程兌換,本平台將與欲申請退款課程之出版廠商,提出會員資料與學習紀錄查詢,確認您課程的觀看紀錄,並同步確認出版廠商訂定之退款事項,是否全數符合。申請退款的同時,即代表您同意本平台與退款課程之出版廠商,提出查詢會員資料與學習紀錄。 4.若您單一訂單中購買兩堂(含)以上課程,不需要整張訂單退款(只退其中幾堂課),退款金額為欲退款課程售價加總後,扣除此張訂單所使用之折扣碼(若折扣碼為整張訂單之折數折扣,則退款金額為欲退款課程售價加總後乘以折數折扣),若計算後退款金額低於(含)0元,本平台將不執行退款。5.上述退款方式僅限於本平台成功完成付款購買之課程,若付款與訂單成立之任一程序不在本平台完成,退款方式需依照課程出版之廠商所訂定之規則提出申請,並由課程出版廠商協助處理,本平台不介入。 6.若您的發票沒有填寫統一編號,並需要辦理退款時,由本平台代為處理發票相關作業 (如作廢電子發票或開立電子發票折讓單),以加速退款作業時程。 7.若您原訂單信用卡分期,其申請退費時,須整筆訂單全額退費,無法部分或擇一課程退費。
款項何時退回
課程退費採原信用卡退刷方式,退費所需之工作天依各金融機構實際作業時間為準。