實體課程 / 網站開發

HTML 網頁設計新手村

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

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

7 章節

7 單元

講師：

李建杭 aka Amos

最後更新：2024 年 03 月

你將學到什麼

你是否曾經想接觸網頁原始碼，但發現自己不知從何下手呢？在第一階段中 Amos 老師將會解釋 HTML5 的結構，並建立網頁語意與各個網頁標籤的重要基礎觀念，融會貫通後再進行網頁架構的撰寫，讓你學習不走冤枉路！
此外也會帶領同學們如何使用網頁編輯軟體「VScode」，使用純文字編輯器撰寫網頁原始碼，打好網頁開發基礎！

瞭解 HTML5 架構後，要讓網頁有美美的顏色與排版，最不可或缺的就是 CSS 樣式，但到底什麼是 CSS？又應該把 CSS 檔案如何套用在 HTML 上呢？在本階段都會詳細的告訴你！
舉凡樣式的寫法與超重要的樣式優先權、區塊與行屬性，每一項都是網頁開發的根本，身為網頁初心者絕對不可錯過的精華課程！

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

課程大綱

HTML 結構與觀念
HTML 網頁標籤意義
HTML 5 是什麼
語意的重要性
SEO 與網頁的關係

樣式的寫法與重要觀念
CSS 樣式優先權
區塊與行屬性

基礎 CSS 選取器
選取器的效能
選取器的應用
如何有效的選取網頁物件
更多實用的選取器

Fixed 定位
絕對與相對定位介紹

Flex 彈性排版的重要觀念
多欄式版面製作
直橫排隨你變

撰寫具有彈性的網頁原始碼
為何別濫用 Class
Class 命名的問題
什麼是模組化

選單製作
兩欄式 / 三欄式版面排版實務
單頁網頁製作
加碼內容（依課程進度動態增減）：Grid 排版

講師介紹

李建杭 aka Amos

從視覺設計轉職前端的斜槓開發者，活躍於臺灣各大技術研討會，熟稔 HTML & CSS、Bootstrap、RWD、CSS3 等，為國內知名前端技術講師。
2018 年成為 Youtuber，致力於使用簡單易懂的方式讓新手能夠輕鬆學習前端開發技能。
iT 邦幫忙鐵人賽連續三屆冠軍、連續兩屆優選，於 2020 出版「金魚都能懂的 CSS 選取器：金魚都能懂了你還怕學不會嗎（iT邦幫忙鐵人賽系列書）」一書，除了熱衷於牛排的熟成，目前日益精進於釣魚技能。