TibaMe
系統初始化失敗,請重新整理頁面
若持續無法載入頁面,請 聯絡客服

張互賓

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

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

面對已經設計出來卻覺得還缺少東西的網站頁面,你還在持續苦惱中,且不知道該怎麼辦嗎?快來看看這門 HTML & CSS 下集課程。 此門課程將從上集的 HTML & CSS 基本概念繼續向外延伸,帶你掌握更多進階的網頁設計排版技術、動畫效果,去打造更有互動感的介面!

NT$1,360

目前尚無任何課程公告
講師將會在這發佈與課程相關的公告或是通知課程內容更新的公告。

最新討論

課程講義
洋蔥 · 2023/07/24 21:32
grid-template-columns 版面沒改變
朱君倫 · 2022/12/12 21:37
程式碼沒有變色
Yen Cheng Lin · 2022/10/06 16:27
老師,請教一下表格跑出來container和1 2 3之間的小空隙該如何消除呢?目前有試過在div.grid-container加入margin 0和margin-top 0都沒效果,謝謝。
蔡嘉倫 · 2022/08/03 18:11
animation-fill-mode 屬性 課堂測驗
許懷文 · 2022/05/06 13:49
查看更多討論

課程資訊

default clock課程時長 6 小時 11 分
default video課程共 11 單元 141 小節
default download1 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 4 週 (每週 2 小時)

適合對象



具備 HTML & CSS 基礎概念,且有以下情形:
  • 對網頁設計有興趣的你
  • 想更進修網頁設計能力的你
  • 想自己設計專業網站的你
  • 想增加自家網站產品包裝頁面吸睛度的你
  • 嚮往網頁設計師、前端工程師、軟體工程師的你

你可以學到



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



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


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

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

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

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

  • Grid Layout 排版模式
  • Column 多欄排版模式
  • transition 轉場效果
  • animation 動畫效果
  • 動畫效果套件的使用

課程介紹



經過張互賓老師精心設計的這門課程,將帶你建立起自己腦中的靈感技能燈泡,學會運用三大技術去玩轉網頁介面的包裝,並跟著老師一起完成九大實作練習,掌握更多網頁設計要素!





張互賓老師擁有豐富的教學經驗,以及多年的接案經歷,同時在與多位學生的互動中,更是能夠以非常貼近學員的角度,去思考學員們可能遇到的問題,透過清楚的解說與實際範例的操作,詳細的為學員解答。





張互賓老師不僅在緯育 TibaMe 中擁有超高人氣,
所教授的網頁設計相關課程更是深受學員們愛戴,好評如潮!
我們統計了截至目前為止的學員評價:
在滿分為 5 分的講師教學評價中,平均有超過 90% 以上的學員都給予 4~5 分的高滿意分數呢!





想要體驗看看張互賓老師的課程嗎!點擊「課程試閱連結」,讓緯育 TibaMe 帶你進入搶先看:

★★★★ 免費試閱專區 ★★★★
      
1-1          認識 grid 和 inline-grid      
1-2          認識基本術語      
10-5          商品瀑布流檢視模式      
11-4          sprite 動畫效果      

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



|購買本課程的所有學員,都可以擁有以下完整學習資源庫


  • 程式碼範例下載:提供完整程式碼範例檔,讓你邊上課邊跟著講師逐步完成範例,清楚知道撰寫程式流程,並透過實作強化觀念。

  • 課後作業練習:每個單元都會有課後評量,透過題目反覆練習讓你了解自身的學習狀況。

  • 課程重複觀看:不限時間、不限次數,皆可反覆觀看課程影片進行複習。

  • 課程討論區:有任何學習問題皆可在討論區發問,專業講師將會替你答題解惑。


|提供便利線上學習環境

  • 下載學習 App,行動學習最便利:
    下載學習 App,隨時隨地都能學,聰明把握每個零碎時間,走到哪學到哪!

  • 開啟學習計畫,彈性安排學習進度:
    學習計畫結合 Google 日曆,學員可以依照建議的學習週期進行學習,也可依照個人學習步調安排學習時間,逐步完成課程學習。

  • 完整拆解知識點,複習所學最便利:
    將知識點進行拆解與分類,複習時更容易快速搜索,找到想要複習的課程內容。




完成所有課程,將可以獲得緯育 TibaMe 頒發的完課證書唷!



學習前基本能力



|學習這門 HTML & CSS 課程之前,需要有什麼先備知識嗎?

  • 需具備 HTML & CSS 基礎概念
  • 建議若是有「javaScrupt」、「 jQury」的概念會更有助於學習唷!
    沒有的話也不用怕,課程中互賓老師也會為你詳細解說運用到程式碼概念~
    協助你獲得更好的學習效果!


|那還不太會 HTML & CSS 基礎概念該怎麼辦?

別擔心~我們有推薦以下基礎課程!

建議可先學習「張互賓老師的 HTML & CSS 網頁設計(上集)」喔!

|學習時遇到挫折好焦慮啊,可是又不敢發問嗎?

免煩惱!遇到任何困難都歡迎發問,在緯育 TibaMe 的「課程討論區」裡不用擔心自己是否會問錯問題,只要你是認真學習且積極發問的態度,獲取的知識都是屬於你自己的寶藏唷~而且還能能幫助討論區的其他同學一起互相觀摩、學習,共同提升學習成效,真是一舉多得呢!


|還有其他對於 緯育 TibaMe 的問題?

歡迎點選 FAQ,你將可以得到更多解答喔!

學習前準備



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

課程資訊

default clock課程時長 6 小時 11 分
default video課程共 11 單元 141 小節
default download1 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 4 週 (每週 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. CSS Grid Layout 基本觀念
5 小節
video common icon

前言

試看
video common icon

認識 grid 和 inline-grid

03:29
quiz common icon

QUIZ:認識 grid 和 inline-grid

試看
video common icon

認識基本術語

02:34
quiz common icon

QUIZ:認識基本術語

2. CSS Grid Container 屬性 - 1/2
14 小節
video common icon

grid-template-columns 設定各欄寬度、grid-template-rows 設定各列高度

quiz common icon

QUIZ:grid-template-columns 設定各欄寬度、grid-template-rows 設定各列高度

video common icon

grid-auto-flow 設定流向

quiz common icon

QUIZ:grid-auto-flow 設定流向

video common icon

grid-auto-rows 設定各列預設高度、grid-auto-columns 設定各欄預設寬度

quiz common icon

QUIZ:grid-auto-rows 設定各列預設高度、grid-auto-columns 設定各欄預設寬度

video common icon

grid-template-areas 屬性 與 grid-area 命名

quiz common icon

QUIZ:grid-template-areas 屬性 與 grid-area 命名

video common icon

grid-template 簡寫形式

quiz common icon

QUIZ:grid-template 簡寫形式

video common icon

grid 簡寫形式

quiz common icon

QUIZ:grid 簡寫形式

video common icon

repeat() 與 minmax() 函式與 fr 單位

quiz common icon

QUIZ:repeat() 與 minmax() 函式與 fr 單位

3. CSS Grid Container 屬性 - 2/2
18 小節
video common icon

column-gap 設定各欄間距

quiz common icon

QUIZ:column-gap 設定各欄間距

video common icon

row-gap 設定各列間距

quiz common icon

QUIZ:row-gap 設定各列間距

video common icon

gap 簡寫形式

quiz common icon

QUIZ:gap 簡寫形式

video common icon

justify-items 沿著 Row Axis 排列

quiz common icon

QUIZ:justify-items 沿著 Row Axis 排列

video common icon

align-items 沿著 Column Axis 排列

quiz common icon

QUIZ:align-items 沿著 Column Axis 排列

video common icon

place-items 簡寫形式

quiz common icon

QUIZ:place-items 簡寫形式

video common icon

justify-content 沿著 Row Axis 排列

quiz common icon

QUIZ:justify-content 沿著 Row Axis 排列

video common icon

align-content 沿著 Column Axis 排列

quiz common icon

QUIZ:align-content 沿著 Column Axis 排列

video common icon

place-content 簡寫形式

quiz common icon

QUIZ:place-content 簡寫形式

4. CSS Grid Items
12 小節
video common icon

grid-column 合併與 Grid Line 的命名

quiz common icon

QUIZ:grid-column 合併與 Grid Line 的命名

video common icon

grid-row 合併與 Grid Line 的命名

quiz common icon

QUIZ:grid-row 合併與 Grid Line 的命名

video common icon

justify-self 排列規則與 justify-items 相同

quiz common icon

QUIZ:justify-self 排列規則與 justify-items 相同

video common icon

align-self 排列規則與 align-items 相同

quiz common icon

QUIZ:align-self 排列規則與 align-items 相同

video common icon

place-self 簡寫形式

quiz common icon

QUIZ:place-self 簡寫形式

video common icon

grid-area 簡寫形式與命名

quiz common icon

QUIZ:grid-area 簡寫形式與命名

5. Columns 多欄排版模式
12 小節
video common icon

column-count 決定欄數

quiz common icon

QUIZ:column-count 決定欄數

video common icon

column-fill 內容如何填滿欄數

quiz common icon

QUIZ:column-fill 內容如何填滿欄數

video common icon

column-gap 各欄間距

quiz common icon

QUIZ:column-gap 各欄間距

video common icon

column-rule 各欄之間的直線樣式

quiz common icon

QUIZ:column-rule 各欄之間的直線樣式

video common icon

column-span 元素跨欄

quiz common icon

QUIZ:column-span 元素跨欄

video common icon

column-width 每欄寬度

quiz common icon

QUIZ:column-width 每欄寬度

6. CSS 轉場效果 - transition
8 小節
video common icon

transition-property 與 transition-duration 屬性

quiz common icon

QUIZ:transition-property 與 transition-duration 屬性

video common icon

transition-timing-function 漸變函式

quiz common icon

QUIZ:transition-timing-function 漸變函式

video common icon

transition-delay 效果的延遲

quiz common icon

QUIZ:transition-delay 效果的延遲

video common icon

transition 簡寫形式

quiz common icon

QUIZ:transition 簡寫形式

7. CSS 動畫效果 - animation
20 小節
video common icon

第一個 animation

quiz common icon

QUIZ:第一個 animation

video common icon

關於 keyframes

quiz common icon

QUIZ:關於 keyframes

video common icon

同個元素套用多個 animation

quiz common icon

QUIZ:同個元素套用多個 animation

video common icon

animation-iteration-count 次數

quiz common icon

QUIZ:animation-iteration-count 次數

video common icon

animation-direction 方向

quiz common icon

QUIZ:animation-direction 方向

video common icon

animation-delay 效果的延遲

quiz common icon

QUIZ:animation-delay 效果的延遲

video common icon

animation-fill-mode 填滿模式

quiz common icon

QUIZ:animation-fill-mode 填滿模式

video common icon

animation-play-state 播放狀態

quiz common icon

QUIZ:animation-play-state 播放狀態

video common icon

animation-timing-function 漸變函式

quiz common icon

QUIZ:animation-timing-function 漸變函式

video common icon

動畫效果事件

quiz common icon

QUIZ:動畫效果事件

8. 動畫效果套件 - Animate.css
12 小節
video common icon

簡介及直接加上 class 套用

quiz common icon

QUIZ:簡介及直接加上 class 套用

video common icon

效果永久的反覆執行

quiz common icon

QUIZ:效果永久的反覆執行

video common icon

自定義相關屬性

quiz common icon

QUIZ:自定義相關屬性

video common icon

透過 JS,動態的加上動畫效果 class

quiz common icon

QUIZ:透過 JS,動態的加上動畫效果 class

video common icon

讓動畫效果,透過按鈕可以執行多次

quiz common icon

QUIZ:讓動畫效果,透過按鈕可以執行多次

video common icon

動畫效果執行完畢後,再執行自己定義的 JS 程式

quiz common icon

QUIZ:動畫效果執行完畢後,再執行自己定義的 JS 程式

9. 動畫效果套件 - AOS
14 小節
video common icon

基本套用

quiz common icon

QUIZ:基本套用

video common icon

瞭解 aos 基本屬性

quiz common icon

QUIZ:瞭解 aos 基本屬性

video common icon

瞭解 data-aos-offset

quiz common icon

QUIZ: 瞭解 data-aos-offset

video common icon

瞭解 data-aos-anchor-placement

quiz common icon

QUIZ:瞭解 data-aos-anchor-placement

video common icon

瞭解 data-aos-anchor

quiz common icon

QUIZ:瞭解 data-aos-anchor

video common icon

利用 AOS,套用自己寫的 transition

quiz common icon

QUIZ:利用 AOS,套用自己寫的 transition

video common icon

寫一個 keyframes 的簡單動畫效果,讓 AOS 套用

quiz common icon

QUIZ:寫一個 keyframes 的簡單動畫效果,讓 AOS 套用

10. 實作商品列表檢視模式的切換
10 小節
video common icon

頁籤介面

quiz common icon

QUIZ:頁籤介面

video common icon

單個商品排版

quiz common icon

QUIZ:單個商品排版

video common icon

商品橫向檢視模式

quiz common icon

QUIZ:商品橫向檢視模式

video common icon

商品直向檢視模式

quiz common icon

QUIZ:商品直向檢視模式

試看
video common icon

商品瀑布流檢視模式

06:39
quiz common icon

QUIZ:商品瀑布流檢視模式

11. 介面實作
16 小節
video common icon

搜尋框:focus 狀態的轉場效果

quiz common icon

QUIZ:搜尋框:focus 狀態的轉場效果

video common icon

滑鼠移入,內容往上呈現

quiz common icon

QUIZ:滑鼠移入,內容往上呈現

video common icon

欄位左右擺動效果

quiz common icon

QUIZ:欄位左右擺動效果

試看
video common icon

sprite 動畫效果

11:35
quiz common icon

QUIZ:sprite 動畫效果

video common icon

loading icon

quiz common icon

QUIZ:loading icon

video common icon

介面從螢幕右側向左滑入

quiz common icon

QUIZ:介面從螢幕右側向左滑入

video common icon

導覽列次選單淡入淡出

quiz common icon

QUIZ:導覽列次選單淡入淡出

video common icon

棋盤式版型

quiz common icon

QUIZ:棋盤式版型

學習附件

file-icon
課程練習檔_grid_animation.zip
1.44 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
返回主選單
課程類型
影音課程
直播課程
實體課程
返回主選單
返回主選單
返回主選單
返回主選單