HTML 網頁設計新手村

用 HTML & CSS 打好你的前端底子

HTML & CSS 可以自學嗎?

對新手 / 老手來說任何程式語⾔你都可以⾃學,若你有搜尋過,程式語⾔學習的建議多如⽜⽑,要在這些龐雜資訊海中「掏出正確的資訊對於⽼⼿來說不是問題」,但「對於新⼿要找到正確的資訊卻是⼀件相對困難又很花費時間的事情」,當然如果你只是學興趣或是暫時沒有時間壓⼒的話,是沒有什麼關係,但如果你的⽬標是在短時間內真正學會這項技能,有「⼀個專業且了解你問題的⽼師在旁邊帶著你學,絕對能夠幫你節省很多冤枉的時間!」

課程特色

HTML 課程特色

你好,我是李建杭,⼤家都叫我 Amos,曾為多家知名電商、網路服務的前端⼯程師, 現擔任多家程式教育機構的前端講師,我原本是設計師,因緣際會下成為前端⼯程師,也算是跨領域的轉職,所以我很清楚學習程式的盲點。

我認為在學習程式的時候,最重要的就是了解每⾏程式碼背後的邏輯是什麼,如此⼀來,才能夠真正學好程式,我不否認這樣的學法在⼀開始的階段,會比較⾟苦比較累,但是打好基礎,對於你後續的程式之路⼀定能⾛的更順、更久!

李建杭

李建杭

Amos Lee

講師簡介

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

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

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

適合對象

HTML 適合對象

上過課的同學怎麼說︖

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

赤木

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

Wouher Chia

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

Haha Huang

課程大綱

  • HTML 結構與觀念

  • HTML 網頁標籤意義

  • HTML 5 是什麼

  • 語意的重要性

  • SEO 與網頁的關係

  • 樣式的寫法與重要觀念

  • CSS 樣式優先權

  • 區塊與行屬性

  • 基礎 CSS 選取器

  • 選取器的效能

  • 選取器的應用

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

  • 更多實用的選取器

  • Fixed 定位

  • 絕對與相對定位介紹

  • Flex 彈性排版的重要觀念

  • 多欄式版面製作

  • 直橫排隨你變

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

  • 為何別濫用 Class

  • Class 命名的問題

  • 什麼是模組化

  • 選單製作

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

  • 單頁網頁製作

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

扎實課程搶先看

HTML 課程內頁 - 標題圖 - 第一階段 基礎觀念

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

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

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

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

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

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

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


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

📘 一、​HTML5 是什麼

  • 關於網頁二三事

  • HTML5 的結構

  • HTML5 觀念一點通

  • 各式網頁標籤意義

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

  • 語意的重要性

  • 何謂 SEO

  • SEO 與網頁的關係

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

  • 原始碼縮排

  • VScode 操作應用

  • 為何我們需要專有名詞

  • 溝通與發問的技巧

📘 三、CSS 樣式入門

  • 樣式的寫法

  • 樣式的重要觀念

  • 超重要的樣式優先權

  • 重要的區塊與行屬性

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

  • 基礎 CSS 選取器

  • 選取器的效能

  • 選取器的應用

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

  • 更多實用的選取器

📘 五、定位屬性

  • 固定定位特性

  • 絕對定位特性

  • 相對定位特性

  • 定位應用實例:

    • 蓋版廣告

    • 側邊廣告

    • 商品標籤

📘 六、Flex 彈性排版

  • Flex 彈性排版的重要觀念

  • 什麼是彈性排版?

  • 多欄式版面製作

  • 排版起手式與原理

  • 直排橫排隨你變

  • 換行與注意事項

📘 七、排版實務

  • 選單製作

  • 兩欄式版面入門

  • 三欄版面排版實務

  • 商品頁面排版實務

  • 單頁網頁製作

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

立即報名

HTML 網頁設計新手村

課程類別與程度

前端課程入門課程

近期開課時間

2022 / 5 月 直播班

課程已結束

5/7 (六)、5/14 (六)、5/21 (六)、5/28 (六)

10:00~17:00

限時優惠價

NT$ 13,500

目前課程已滿班或結束,如對課程有興趣,
歡迎追蹤五倍粉絲專頁來信洽詢,獲得最新的開課消息。

組團報名享折扣

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

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

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

五倍紅寶⽯課程提供

結業證書

結業證書 | 五倍紅寶⽯課程提供

課程結業證書證明

課程討論群組

課程討論群組 | 五倍紅寶⽯課程提供

共同討論課程群組,

老師同學即時交流

wifi

wifi | 五倍紅寶⽯課程提供

備有插座及快速穩定

免費 wifi 連線操作

線上補課

線上補課 | 五倍紅寶⽯課程提供

線上補課,

不怕跟不上進度!

默默會

默默會 | 五倍紅寶⽯課程提供

每週二獨家默默會

讓你問題問到飽

業界高手一同交流

吉祥物貓貓

吉祥物貓貓 | 五倍紅寶⽯課程提供

吉祥物貓貓加持