五倍紅寶石・專業程式教育

五倍紅寶石 ・專業程式教育機構

開課時間

5/1 (六)、5/8 (六)、5/15 (六)、5/22 (六)

10:00~17:00

這堂課適合

  • 想嘗試程式領域的新手。

  • 想找到一起進步的夥伴。

  • 想改變生活,嘗試不同可能性的人。

  • 想學會如何用 HTML / CSS 切版的人。

  • 會切版卻不懂為何這樣切的人。

其它相關課程

你將會學到

  • 具 SEO 效益的網頁設計。

  • 高效的 CSS 選取方式

  • 詳細扎實的 CSS 原理與概念。

  • CSS 排版定位技能。

  • 多樣類型的版面製作方式。

  • 專案實務的切版規劃

課前準備

  • 需自備筆電, Mac / Windows 皆可。

  • 課程將會使用 Sublime Text 3 / VS Code 編輯器,建議同學可以先行安裝。

課程大綱

  • HTML 結構與觀念

  • HTML 網頁標籤意義

  • 語意的重要性

  • SEO 與網頁的關係

  • 樣式的寫法與重要觀念

  • CSS 樣式優先權

  • 區塊與行屬性

  • 基礎 CSS 選取器

  • 選取器的效能

  • 選取器的應用

  • 如何有效的選取網頁物件

  • 更多實用的選取器

  • Fixed 定位

  • 絕對與相對定位介紹

  • Flex 彈性排版的重要觀念

  • 多欄式版面製作

  • 直橫排隨你變

  • 什麼是 Float ?

  • 如何清除及避開浮動?

  • 撰寫具有彈性的網頁原始碼

  • 為何別濫用 Class

  • Class 命名的問題

  • 什麼是模組化

  • 選單製作

  • 兩欄式 / 三欄式版面排版實務

  • 單頁網頁製作

  • 加碼內容(依課程進度動態增減):Grid 排版

課程內容

HTML 課程內頁 - 標題圖 - HTML & CSS 的必學理由
HTML 課程內頁 - HTML Banner 圖

要進入網頁開發的世界,HTML & CSS 可說是基本中的基本,後端工程師應該要懂,想走網頁設計或前端開發的你更應該要學!若是從事行銷工作,在本課程也可學習到如何撰寫具 SEO 效益的網頁,不論是要自行開發或與網頁開發人員溝通,都讓你在工作上更為加分!

五倍紅寶石的 HTML 網頁設計新手村,由業界擁有豐富教學經驗的 Amos 老師,一步步帶領你從零開始,一門讓你受用一輩子的網頁課!不只學技術也從核心觀念扎根,過去讀不懂的原始碼,理不清的排版問題,Amos 老師帶您一次從原理搞懂!

HTML 課程內頁 - 標題圖 - 扎實課程內容搶先看
HTML 課程內頁 - 標題圖 - 第一階段 基礎觀念

你是否曾經想接觸網頁原始碼,但發現自己不知從何下手呢?在第一階段中 Amos 老師將會解釋 HTML 的結構,並建立網頁語意與各個網頁標籤的重要基礎觀念,融會貫通後再進行網頁架構的撰寫,讓你學習不走冤枉路!

此外也會帶領同學們如何使用網頁編輯軟體「VScode」,使用純文字編輯器撰寫網頁原始碼,打好網頁開發基礎!

HTML 課程內頁 - 標題圖 - 第二階段 CSS入門與實務應用

瞭解 HTML 架構後,要讓網頁有美美的顏色與排版,最不可或缺的就是 CSS 樣式,但到底什麼是 CSS?又應該把 CSS 檔案如何套用在 HTML 上呢?在本階段都會詳細的告訴你!

舉凡樣式的寫法與超重要的樣式優先權區塊與行屬性,每一項都是網頁開發的根本,身為網頁初心者絕對不可錯過的精華課程!

HTML 課程內頁 - 標題圖 - 第三階段 入手排版神器

初學網頁設計,在克服了一開始的 HTML 架構與 CSS 樣式套用後,另一大關卡就是分析網頁的結構,並將各個區塊排到應該在的地方,在這個階段將會帶領大家認識排版三大神器「Float 浮動」、「定位屬性」與「Flex 彈性排版」,學會三大排版方式,讓你不再困擾於理不清的排版問題,網頁設計開發隨心所欲!


HTML 課程內頁 - 標題圖 - HTML 課程內容

📘 一、​HTML 是什麼

  • 關於網頁二三事

  • HTML 的結構

  • HTML 觀念一點通

  • 各式網頁標籤意義

  • 如何撰寫一個具有意義的網頁

  • 語意的重要性

  • 何謂 SEO

  • SEO 與網頁的關係

📘 二、變數型撰寫網頁的重要習慣

  • 原始碼縮排

  • VScode 操作應用

  • 為何我們需要專有名詞

  • 溝通與發問的技巧

📘 三、CSS 樣式入門

  • 樣式的寫法

  • 樣式的重要觀念

  • 超重要的樣式優先權

  • 重要的區塊與行屬性

📘 四、重要的 CSS 選取器與實務應用

  • 基礎 CSS 選取器

  • 選取器的效能

  • 選取器的應用

  • 如何有效的選取網頁物件

  • 更多實用的選取器

📘 五、Float 浮動&清除浮動

  • 什麼是 Float?

  • 如何清除浮動?

  • 如何避開浮動?

📘 六、定位屬性

  • 固定定位特性

  • 絕對定位特性

  • 相對定位特性

  • 定位應用實例:

    • 蓋版廣告

    • 側邊廣告

    • 商品標籤

📘 七、Flex 彈性排版

  • Flex 彈性排版的重要觀念

  • 什麼是彈性排版?

  • 多欄式版面製作

  • 排版起手式與原理

  • 直排橫排隨你變

  • 換行與注意事項

📘 八、排版實務

  • 選單製作

  • 兩欄式版面入門

  • 三欄版面排版實務

  • 商品頁面排版實務

  • 單頁網頁製作

  • 加碼內容(依課程進度動態增減):Grid 排版

關於講師

李建杭

HTML / CSS 講師

李建杭 (Amos Lee)

從視覺設計轉職前端的斜槓開發者,活躍於臺灣各大技術研討會,熟稔 HTML & CSS、Bootstrap、RWD、CSS3 等,為國內知名前端技術講師。

2018 年成為 Youtuber,致力於使用簡單易懂的方式讓新手能夠輕鬆學習前端開發技能。

iT 邦幫忙鐵人賽連續三屆冠軍、連續兩屆優選,於 2020 出版「都能懂的 CSS 選取器:金魚都能懂了你還怕學不會嗎(iT邦幫忙鐵人賽系列書)」一書,除了熱衷於牛排的熟成,目前日益精進於釣魚技能。

講師其他課程


他們都在五倍學習程式

想要學好 HTML & CSS 別無他法,跟著 Amos 課程進度,練就一身紮實的基本功,特別是新手,循序漸進學習,如果已經有基本觀念,老師的歸納整理能力會超乎你所能想像,選擇 Amos 老師的課程,絕對是 BEST CHOICE!

赤木

Amos 老師很會用淺顯易懂與生活化的教學來帶入那一堆堆的網頁文字,讓人一步步對於網頁語言不再害怕,真心推薦!!

Wouher Chia

Amos 老師細心解釋各種 HTML 和 CSS 的原理,若想要打好網頁的基礎,真的非常建議來上 Amos 老師的課 五倍紅寶石是一個很可愛又很特別的地方,上課制度有趣,環境也很舒適。

Haha Huang

立即報名

HTML 網頁設計新手村

立即報名

點擊後選擇課程時間及付款方式。

組團報名享折扣

兩人同行 或 一次購買 2 堂課,享 9 折優惠

三人同行 或 一次購買 3 堂課,享 85 折優惠

更多團報或課程諮詢請洽 02-2331-5247

相關課程

立即報名