前進網頁進階實戰!

精煉手刻切版技術,做出屬於自己的漂亮網站!

觀念不熟悉,每次都要東改西改耗時又沒效率😭 你所遇到的困擾,我們都聽到了! 跟著 Amos 老師,透過面對面授課的方式,馬上釐清你的學習疑惑,帶你精通前端網頁開發,為功力打底,再複雜的設計都能快速完成切版!

現在報名只要 NT$14,000
  • 線上補課
  • 結業證書

講師介紹

使用者大頭貼

李建杭 Amos Lee

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

適合對象

  • 決心做出屬於自己網站的人
  • 前端工程師想切版切得更有效率
  • 網頁製作有興趣,想要打穩基礎的人

課程特色



讓 Amos 老師幫你打穩好每次課程的切版技術,逐漸做出你期待的網站樣貌。
因此每次課程結束後,請不要輕易放過自己,打開老師的教材好好練習,把CSS屬性觀念摸清楚、記牢牢,萬一有不懂的地方,我們提供 Discord 社群讓您盡情發問,即使無法跟老師相見,我們線上仍舊能解決你的問題,所以請不要害羞提出你的問題!

同樣的頁面,每個人切版出來的結構都不一樣,而怎麼樣寫的才正確?並沒有一定的答案,但是撰寫的觀念都是一樣的(好理解的思考脈絡),因此透過 code review 你能在這之中不斷地進步,並且學習同學不同的思路與寫法。
Amos 老師用業界的撰寫思路為每一位學員 code review,立刻點出你的學習盲點,讓你快速掌握精髓,揮別髒 code !

Amos 老師是常年的心智圖使用好手,課堂中先讓你理解程式的基礎觀念後,還能手把手帶你用心智圖歸納整理,讓你理解後還能記得牢!

我們提供 Discord 社群讓您盡情發問,不用擔心下課後遇到問題解決不了,我們永遠在線上等您的發問,所以請不要害羞提出你的問題!即使課程結束,Discord 社群仍舊歡迎您任何問題。

獨家服務之外,基礎扎實的切版教程一個都不少!

打穩網頁前端的切版基礎,最不能錯過的就是純手刻切版技巧,因為所有套件的原理都來自於 CSS 屬性,熟悉 CSS 屬性後再去學 Tailwind CSS, Bootstrap 絕對不會後悔!

🤩 大量實戰練習,技能帶著走

多達 11 個實務練習,先搞懂觀念再實戰,大量的練習讓即使才剛學習完 HTML 及 CSS 的朋友們,Flex 、 Grid 都能輕鬆應用,甚至 RWD 也難不了你!

🙌 RWD 讓你再也不困擾

多達 11 個實務練習,先搞懂觀念再實戰,大量的練習讓即使才剛學習完 HTML 及 CSS 的朋友們,Flex 、 Grid 都能輕鬆應用,甚至 RWD 也難不了你!

🌈加碼贈送用 CSS 做出互動效果

想把酷炫的動畫效果放在網頁中,但不知道該用 JS 還是 CSS? Amos 用簡單的 CSS 語法就能讓網頁注入靈魂、充滿互動感!

課程章節

初探切版實務

利用 flex 排版

  • 直式卡片版面製作
  • 多欄卡片版面製作
  • 橫式卡片版面製作
  • 交錯橫式卡片版面製作

  • 基礎橫排選單製作
  • 基礎橫排彈出式選單製作
  • 基礎直排選單製作
  • 基礎直排彈出式選單
  • 滿版頁面製作

  • Grid 入門
  • Grid 快速入門
  • Grid 卡片版面製作

RWD 入門

媒體查詢

  • 媒體查詢入門
  • 斷點設定原理及應用
  • 利用媒體查詢製作 RWD 區塊

格線

  • 格線設計
  • 使用格線製作 RWD

選單

  • 漢堡按鈕的作法
  • 漢堡與選單的控制
  • 選單撰寫與注意事項

為網頁注入靈魂

CSS 動畫入門

  • transition 簡易動畫
  • animation 關鍵影格動畫

幻燈片

  • 幻燈片製作
  • 幻燈片修改
  • 自訂幻燈片介面

前進網頁進階實戰!

課程類別 前端課程

近期開課時間

優惠價

NT$14,000

組團報名享折扣

  • 兩人同行 或 一次購買 2 堂課,享 9 折優惠
  • 三人同行 或 一次購買 3 堂課,享 85 折優惠
更多團報或課程諮詢請洽
02-2331-5247

上過課的同學怎麼說︖

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

赤木

五倍紅寶石提供了友善的學習環境,讓學生接觸不會覺得有壓力,講解技術觀念清楚易懂也進步很多,在這裡可以很開心的學習!

Monica

在五倍紅寶石上課,是一件非常享受的事情,寬敞的上課空間,老師教學口條清晰易懂,上課練習題也非常實用!讓原本看到CSS像文盲一樣的我,突然可以稍微認得它們了!非常值得!

呂佳容

Amos 老師著重於觀念及原理,不會要你死板的就套用就好,如果想把網頁打好基礎,真的很推薦老師的課喔!

宋橘子

Amos 老師很會用淺顯易懂與生活化的教學來帶入那一堆堆的網頁文字,讓人一步步對於網頁語言不再害怕,真心推薦 網頁前端設計女性專班!! 還有貼心的助教跟舒適的環境與迎賓貓!!

Analeigh Kuo

Amos 老師超專業,把原理講得很清楚,對我這種喜歡聽原理的人來說,真是太棒了,原理懂了才能好好應用,原理才是王道!讚!

Paggy Lai

其他課程推薦