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

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

零基礎學會網頁設計 用 HTML & CSS 打好你的前端底子

前端課程入門課程
講師:李建杭 (Amos Lee)

HTML & CSS 可以自學嗎?

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

課程特色

零基礎學會網頁設計 用 HTML & CSS 打好你的前端底子

扎實課程搶先看

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

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

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

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

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

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

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

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

課程大綱

  • HTML 結構與觀念

  • HTML 網頁標籤意義

  • 語意的重要性

  • SEO 與網頁的關係

  • 樣式的寫法與重要觀念

  • CSS 樣式優先權

  • 區塊與行屬性

  • 基礎 CSS 選取器

  • 選取器的效能

  • 選取器的應用

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

  • 更多實用的選取器

  • Fixed 定位

  • 絕對與相對定位介紹

  • Flex 彈性排版的重要觀念

  • 多欄式版面製作

  • 直橫排隨你變

  • 什麼是 Float ?

  • 如何清除及避開浮動?

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

  • 為何別濫用 Class

  • Class 命名的問題

  • 什麼是模組化

  • 選單製作

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

  • 單頁網頁製作

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

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

📘 一、​HTML 是什麼

  • 關於網頁二三事

  • HTML 的結構

  • HTML 觀念一點通

  • 各式網頁標籤意義

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

  • 語意的重要性

  • 何謂 SEO

  • SEO 與網頁的關係

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

  • 原始碼縮排

  • VScode 操作應用

  • 為何我們需要專有名詞

  • 溝通與發問的技巧

📘 三、CSS 樣式入門

  • 樣式的寫法

  • 樣式的重要觀念

  • 超重要的樣式優先權

  • 重要的區塊與行屬性

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

  • 基礎 CSS 選取器

  • 選取器的效能

  • 選取器的應用

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

  • 更多實用的選取器

📘 五、Float 浮動&清除浮動

  • 什麼是 Float?

  • 如何清除浮動?

  • 如何避開浮動?

📘 六、定位屬性

  • 固定定位特性

  • 絕對定位特性

  • 相對定位特性

  • 定位應用實例:

    • 蓋版廣告

    • 側邊廣告

    • 商品標籤

📘 七、Flex 彈性排版

  • Flex 彈性排版的重要觀念

  • 什麼是彈性排版?

  • 多欄式版面製作

  • 排版起手式與原理

  • 直排橫排隨你變

  • 換行與注意事項

📘 八、排版實務

  • 選單製作

  • 兩欄式版面入門

  • 三欄版面排版實務

  • 商品頁面排版實務

  • 單頁網頁製作

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

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

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

李建杭

李建杭

Amos Lee

講師簡介

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

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

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

適合對象

適合對象 | 零基礎學會網頁設計 用 HTML & CSS 打好你的前端底子
適合對象 | 零基礎學會網頁設計 用 HTML & CSS 打好你的前端底子

他們都在五倍學習程式

立即報名

近期開課時間

2021 / 5 月班

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

10:00 ~ 17:00

時數: 24 小時

優惠價

NT$ 13,500

原價 NT$ 16,500
點擊後選擇課程時間及付款方式。

組團報名享折扣

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

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

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

五倍紅寶⽯課程提供

結業證書

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

課程結業證書證明

課程討論群組

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

共同討論課程群組,

老師同學即時交流

wifi

wifi | 五倍紅寶⽯課程提供

備有插座及快速穩定

免費 wifi 連線操作

線上補課

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

線上補課,

不怕跟不上進度!

默默會

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

每週二獨家默默會

讓你問題問到飽

業界高手一同交流

吉祥物貓貓

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

吉祥物貓貓加持