張互賓

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

NT$1,650

＃軟體開發＃網頁開發

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

NT$1,650

2021/09/16

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

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

適合對象

無設計、程式基礎的初學者
有設計或是程式基礎且對網頁設計有興趣者
嚮往網頁設計師、前端工程師、軟體工程師的職涯發展者
網頁設計領域的入門者
想自我進修專業能力者
想自己設計網站的 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 作業系統基本操作

學習前準備

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

課程資訊

課程時長 13 小時 5 分

課程共 21 單元 303 小節

2 個可下載的學習資源

提供完訓證書

提供制定學習計畫建議學習 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： chang.abin@gmail.com

希望學員/讀者在這學習領域中，有遇到任何問題，可直接與我聯繫，盼能協助各位在這領域上精進。

學習附件