NT$1,360
目前尚無任何課程公告
講師將會在這發佈與課程相關的公告或是通知課程內容更新的公告。
最新討論
![](https://cdn.tibame.com/resize/user/282634/avatar/b2328bdf-47bf-4f92-a222-7465537c4c73_1x.webp)
課程講義
![](https://cdn.tibame.com/resize/user/272759/650a3dc8-15f6-4adc-878b-d1db107223cf_1x.webp)
grid-template-columns 版面沒改變
![](https://cdn.tibame.com/resize/user/269848/795bae09-f401-45dd-9f31-454188d6fb48_1x.webp)
程式碼沒有變色
![](https://cdn.tibame.com/resize/user/222708/f6ed3b87-c864-4eb7-a9ac-c67f1994f365_1x.webp)
老師,請教一下表格跑出來container和1 2 3之間的小空隙該如何消除呢?目前有試過在div.grid-container加入margin 0和margin-top 0都沒效果,謝謝。
animation-fill-mode 屬性 課堂測驗
查看更多討論
課程資訊
適合對象
![誰適合學習這門課程.png](https://cdn.tibame.com/course/2075/brief/2964597f-81c4-4ec4-8d6a-303b8372b00f_誰適合學習這門課程.png)
具備 HTML & CSS 基礎概念,且有以下情形:
- 對網頁設計有興趣的你
- 想更進修網頁設計能力的你
- 想自己設計專業網站的你
- 想增加自家網站產品包裝頁面吸睛度的你
- 嚮往網頁設計師、前端工程師、軟體工程師的你
你可以學到
若你已經知道如何設計出一個網站頁面,卻總是覺得還少了點什麼?
![學習痛點.gif](https://cdn-static.tibame.com/course/2075/brief/bbf87b67-513e-4c57-a64d-76e14aba3db1_學習痛點.gif)
以上有講到你心中的疑惑,那你就不能錯過此門「透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面」的下集!
|上集和下集的差別在哪呢?
在 成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集) 中,你將能學會使用 HTML、CSS 去實作出一個網站頁面,也能透過實際練習,了解從無到有的切版過程。
此門課程,將從上集的基本概念繼續向外延伸,帶你掌握更多網頁設計技術,去打造更有互動感的介面!
|透過這門課你可以學到:
- Grid Layout 排版模式
- Column 多欄排版模式
- transition 轉場效果
- animation 動畫效果
- 動畫效果套件的使用
課程介紹
![HTML&CSS課程規劃設計.png](https://cdn-static.tibame.com/course/2075/brief/94bc30d1-309c-4e16-8d3f-5aaadaaac36a_HTML&CSS課程規劃設計.png)
經過張互賓老師精心設計的這門課程,將帶你建立起自己腦中的靈感技能燈泡,學會運用三大技術去玩轉網頁介面的包裝,並跟著老師一起完成九大實作練習,掌握更多網頁設計要素!
![課程規劃設計架構.png](https://cdn-static.tibame.com/course/2075/brief/618f8606-a578-4b6f-b559-abbdf6b5ba4f_課程規劃設計架構.png)
![帶你認識專業講師.png](https://cdn-static.tibame.com/course/2075/brief/826c5843-46da-4f75-b59f-e4299a2918eb_帶你認識專業講師.png)
張互賓老師擁有豐富的教學經驗,以及多年的接案經歷,同時在與多位學生的互動中,更是能夠以非常貼近學員的角度,去思考學員們可能遇到的問題,透過清楚的解說與實際範例的操作,詳細的為學員解答。
![講師資訊_0.png](https://cdn-static.tibame.com/course/2075/brief/58d430a7-a345-4a4f-a256-d8850106970f_講師資訊_0.png)
![HTML 學員評價.png](https://cdn-static.tibame.com/course/2075/brief/8bfe61ea-4f2a-4f70-a948-877bd7058433_HTML學員評價.png)
張互賓老師不僅在緯育 TibaMe 中擁有超高人氣,
所教授的網頁設計相關課程更是深受學員們愛戴,好評如潮!
我們統計了截至目前為止的學員評價:
在滿分為 5 分的講師教學評價中,平均有超過 90% 以上的學員都給予 4~5 分的高滿意分數呢!
![學員評價_0.png](https://cdn-static.tibame.com/course/2075/brief/1a459cae-4d74-46ee-82de-14adc1ed66c6_學員評價_0.png)
![HTML 課程試閱.png](https://cdn-static.tibame.com/course/2075/brief/a9ef5073-88b0-4db4-9cc7-8c846fe33f87_HTML課程試閱.png)
想要體驗看看張互賓老師的課程嗎!點擊「課程試閱連結」,讓緯育 TibaMe 帶你進入搶先看:
★★★★ 免費試閱專區 ★★★★
![TibaMe 學習資源庫_HTML.png](https://cdn-static.tibame.com/course/2075/brief/076ef7fe-c77d-4e65-856e-20036b78f4a7_TibaMe學習資源庫_HTML.png)
|購買本課程的所有學員,都可以擁有以下完整學習資源庫
- 程式碼範例下載:提供完整程式碼範例檔,讓你邊上課邊跟著講師逐步完成範例,清楚知道撰寫程式流程,並透過實作強化觀念。
- 課後作業練習:每個單元都會有課後評量,透過題目反覆練習讓你了解自身的學習狀況。
- 課程重複觀看:不限時間、不限次數,皆可反覆觀看課程影片進行複習。
- 課程討論區:有任何學習問題皆可在討論區發問,專業講師將會替你答題解惑。
![學習資源_0.png](https://cdn-static.tibame.com/course/2075/brief/623e120e-c5ae-4672-acfb-33139d7014a8_學習資源_0.png)
|提供便利線上學習環境
- 下載學習 App,行動學習最便利:
下載學習 App,隨時隨地都能學,聰明把握每個零碎時間,走到哪學到哪! - 開啟學習計畫,彈性安排學習進度:
學習計畫結合 Google 日曆,學員可以依照建議的學習週期進行學習,也可依照個人學習步調安排學習時間,逐步完成課程學習。 - 完整拆解知識點,複習所學最便利:
將知識點進行拆解與分類,複習時更容易快速搜索,找到想要複習的課程內容。
![學習環境_0.png](https://cdn-static.tibame.com/course/2075/brief/b274a6ce-4a72-445e-b3e5-3002a51acd97_學習環境_0.png)
![提供完訓證書_HTML(原版).png](https://cdn-static.tibame.com/course/2075/brief/ece3ce26-8b61-4142-8c64-8e3607697360_提供完訓證書_HTML(原版).png)
完成所有課程,將可以獲得緯育 TibaMe 頒發的完課證書唷!
![完訓證書.png](https://cdn-static.tibame.com/course/2075/brief/c1976f64-c5a5-4e6e-81de-fcf8b0176fca_完訓證書.png)
學習前基本能力
|學習這門 HTML & CSS 課程之前,需要有什麼先備知識嗎?
- 需具備 HTML & CSS 基礎概念
- 建議若是有「javaScrupt」、「 jQury」的概念會更有助於學習唷!
沒有的話也不用怕,課程中互賓老師也會為你詳細解說運用到程式碼概念~
協助你獲得更好的學習效果!
|那還不太會 HTML & CSS 基礎概念該怎麼辦?
別擔心~我們有推薦以下基礎課程!
建議可先學習「張互賓老師的 HTML & CSS 網頁設計(上集)」喔!
|學習時遇到挫折好焦慮啊,可是又不敢發問嗎?
免煩惱!遇到任何困難都歡迎發問,在緯育 TibaMe 的「課程討論區」裡不用擔心自己是否會問錯問題,只要你是認真學習且積極發問的態度,獲取的知識都是屬於你自己的寶藏唷~而且還能能幫助討論區的其他同學一起互相觀摩、學習,共同提升學習成效,真是一舉多得呢!
|還有其他對於 緯育 TibaMe 的問題?
歡迎點選 FAQ,你將可以得到更多解答喔!
學習前準備
![學習設備_HTML.png](https://cdn.tibame.com/course/2075/brief/5c7a1b39-6a43-408b-a6c2-e0d9beb58f7b_學習設備_HTML.png)
請自備筆記型電腦或桌上型電腦並確認有穩定的網路以利學習唷~
課程資訊
關於講師
![](https://cdn-static.tibame.com/resize/user/156764/9aeeb4af-71f8-42f9-925c-928abcc0f59e_hu_pin_chang_2x.webp)
張互賓
張互賓老師
自 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
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
自 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
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
學習附件
課程練習檔_grid_animation.zip
1.44 MB
購買此課程後,才能使用留言功能
或
沒有回應的問題
目前尚無任何討論主題
成為第一個發問的人!在問答中找到學習的捷徑。關於講師
![](https://cdn-static.tibame.com/resize/user/156764/9aeeb4af-71f8-42f9-925c-928abcc0f59e_hu_pin_chang_2x.webp)
張互賓
張互賓老師
自 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
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
自 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
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。