前進網頁進階實戰！
精煉手刻切版技術，做出屬於自己的漂亮網站！
觀念不熟悉，每次都要東改西改耗時又沒效率
你所遇到的困擾，我們都聽到了！ 跟著 Amos 老師，透過面對面授課的方式，馬上釐清你的學習疑惑，帶你精通前端網頁開發，為功力打底，再複雜的設計都能快速完成切版！
課程特色
讓 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 語法就能讓網頁注入靈魂、充滿互動感！
你好，我是李建杭，⼤家都叫我 Amos，曾為多家知名電商、網路服務的前端⼯程師， 現擔任多家程式教育機構的前端講師，我原本是設計師，因緣際會下成為前端⼯程師，也算是跨領域的轉職，所以我很清楚學習程式的盲點。
我認為在學習程式的時候，最重要的就是了解每⾏程式碼背後的邏輯是什麼，如此⼀來，才能夠真正學好程式，我不否認這樣的學法在⼀開始的階段，會比較⾟苦比較累，但是打好基礎，對於你後續的程式之路⼀定能⾛的更順、更久！
講師簡介
從視覺設計轉職前端的斜槓開發者，活躍於臺灣各大技術研討會，熟稔 HTML & CSS、Bootstrap、RWD、CSS3 等，為國內知名前端技術講師。
2018 年成為 Youtuber，致力於使用簡單易懂的方式讓新手能夠輕鬆學習前端開發技能。
iT 邦幫忙鐵人賽連續三屆冠軍、連續兩屆優選，於 2020 出版「金魚都能懂的 CSS 選取器：金魚都能懂了你還怕學不會嗎（iT邦幫忙鐵人賽系列書）」一書，除了熱衷於牛排的熟成，目前日益精進於釣魚技能。
適合對象
上過課的同學怎麼說︖
想要學好 HTML & CSS 別無他法，跟著 Amos 課程進度，練就一身紮實的基本功，特別是新手，循序漸進學習，如果已經有基本觀念，老師的歸納整理能力會超乎你所能想像，選擇 Amos 老師的課程，絕對是 BEST CHOICE！
赤木
Amos 老師著重於觀念及原理，不會要你死板的就套用就好，如果想把網頁打好基礎真的很推薦老師的課喔!
宋橘子
Amos 老師超專業，把原理講得很清楚，對我這種喜歡聽原理的人來說，真是太棒了，原理懂了才能好好應用，原理才是王道！讚！
Paggy Lai
在五倍紅寶石上課，是一件非常享受的事情，寬敞的上課空間，老師教學口條清晰易懂，上課練習題也非常實用！讓原本看到CSS像文盲一樣的我，突然可以稍微認得它們了！非常值得！
呂佳容
Amos 老師很會用淺顯易懂與生活化的教學來帶入那一堆堆的網頁文字，讓人一步步對於網頁語言不再害怕，真心推薦 網頁前端設計女性專班！！ 還有貼心的助教跟舒適的環境與迎賓貓！！
Analeigh Kuo
五倍紅寶石提供了友善的學習環境，讓學生接觸不會覺得有壓力，講解技術觀念清楚易懂也進步很多，在這裡可以很開心的學習！
Monica
學生作品
課程大綱
利用 flex 排版
直式卡片版面製作
多欄卡片版面製作
橫式卡片版面製作
交錯橫式卡片版面製作
-----------------------
基礎橫排選單製作
基礎橫排彈出式選單製作
基礎直排選單製作
基礎直排彈出式選單
滿版頁面製作
-----------------------
Grid 入門
Grid 快速入門
Grid 卡片版面製作
媒體查詢
媒體查詢入門
斷點設定原理及應用
利用媒體查詢製作 RWD 區塊
格線
格線設計
使用格線製作 RWD
選單
漢堡按鈕的作法
漢堡與選單的控制
選單撰寫與注意事項
CSS 動畫入門
transition 簡易動畫
animation 關鍵影格動畫
幻燈片
幻燈片製作
幻燈片修改
自訂幻燈片介面
扎實課程搶先看
初探切版實務
flex 是當下最常見的 CSS 切版方式之一，我們可以利用 flex 做出電商網站的多數版面，也可以利用 flex 去做出以往最辛苦的上下置中效果，然而 CSS 切版就只有運用 flex 嗎？並沒有，flex 家族還包括了 justify-content, align-item … 等，好好認識 flex 家族成員，是切版技能不可或缺的知識之一。
在課堂上， Amos 老師也會帶你一起認識 Grid ，好好熟悉 Grid 可以讓你在未來掌握住 tailwind 的格線系統，不再因爲捉摸不定的 Grid 處處撞牆。
RWD入門
初學者常常無法確定什麼時候該斷點，手機尺寸因每家不同的廠牌而有不同尺寸，我們應該如何確定目前大眾使用的尺寸是什麼呢？在課堂上 Amos 老師將教你如何透過哪些網站去做查詢，並且說明 RWD 的斷點原理與應用。再配合格線系統，就能做出自適應 RWD 的網站！
為網頁注入靈魂
前面學會了靜態網站的做法後，還能透過 CSS 我們能做出簡易的動畫，讓網站更加動人。在課堂上也會教你怎麼製作幻燈片，在未來能透過這個技巧運用在網站不同的元件上，例如：Banner輪播切換、照片輪播。
五倍紅寶石專業程式教育機構因應疫情發展，
🚨 實體教學課程落實社交距離注意事項：
- 每天都會要求學員量體溫、使用酒精消毒雙手
- 進入教室，建議配戴口罩；就算在用餐時，也請同學盡量不要邊吃邊聊天
- 學員下課後，會進行空間的次氯酸空氣消毒
- 每週都會安排漂白水、紫外線殺菌燈消毒
- 若有呼吸道疾病，或被政府匡列的接觸者，禁止進入教室
- 除上述之外，我們也全力配合政府防疫規定，讓每位學員都能在安心的環境學習
立即報名
前端網頁進階實戰！
課程類別與程度
前端課程入門課程近期開課時間
4月 進階班
課程已結束4/8（六）、4/15（六）、4/22（六）、4/29（六）
10:00 ~ 17:00
7月 初階班
7/2（日）、7/9（日）
10:00 ~ 17:00
7 月進階班
7/16（日）、7/23（日）、7/30（日）、8/6（日）
10:00 ~ 17:00
初 + 進階
7/2（日）、7/9（日）、7/16（日）、7/23（日）、7/30（日）、8/6（日）
10:00 ~ 17:00
限時優惠價
NT$ 14,000
點擊後選擇課程時間。
組團報名享折扣
兩人同行 或 一次購買 2 堂課，享 9 折優惠
三人同行 或 一次購買 3 堂課，享 85 折優惠
更多團報或課程諮詢請洽 02-2331-5247
五倍紅寶⽯課程提供
結業證書
課程結業證書證明
課程討論群組
共同討論課程群組，
老師同學即時交流
wifi
備有插座及快速穩定
免費 wifi 連線操作
線上補課
線上補課，
不怕跟不上進度！
默默會
每週二獨家默默會
讓你問題問到飽
業界高手一同交流
吉祥物貓貓
吉祥物貓貓加持