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

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

前進網頁進階實戰!

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

說改就改,不靠 stackoverflow,100% 重現網站設計稿

你所遇到的困擾,我們都聽到了!

跟著 Amos 老師,透過面對面授課的方式,馬上釐清你的學習疑惑,帶你精通前端網頁開發,為功力打底,再複雜的設計都能快速完成切版!

課程特色

Amos課程-大量實戰練習,技能帶著走

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

Amos課程- Amos 老師親自 code review

Amos 老師用業界的撰寫思路為每一位學員 code review,立刻點出你的學習盲點,讓你快速掌握精髓,揮別髒 code !

Amos課程-RWD讓你再也不困擾

身為前端工程師幾乎都會遇到的切版難題,RWD 該怎麼切,才不用大改 HTML 及 CSS 架構又有效率?不要擔心,Amos 親自傳授秘訣給你

Amos課程-加碼贈送用CSS做出互動效果

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

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

立即報名

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

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

李建杭

李建杭

Amos Lee

講師簡介

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

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

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

適合對象

Amos課程-還在猶豫嗎?這堂課是專門為你們設計的
Amos課程-適合對象

上過課的同學怎麼說︖

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

赤木

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

宋橘子

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

Paggy Lai

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

呂佳容

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

Analeigh Kuo

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

Monica

學生作品

Amos課程-學生作品2

Amos課程-學生作品3

gif檔案測試

課程大綱

利用 flex 排版

  • 直式卡片版面製作

  • 多欄卡片版面製作

  • 橫式卡片版面製作

  • 交錯橫式卡片版面製作

-----------------------

  • 基礎橫排選單製作

  • 基礎橫排彈出式選單製作

  • 基礎直排選單製作

  • 基礎直排彈出式選單

  • 滿版頁面製作

-----------------------

  • Grid 入門

  • Grid 快速入門

  • Grid 卡片版面製作

媒體查詢

  • 媒體查詢入門

  • 斷點設定原理及應用

  • 利用媒體查詢製作 RWD 區塊

   格線

  • 格線設計

  • 使用格線製作 RWD

   選單

  • 漢堡按鈕的作法

  • 漢堡與選單的控制

  • 選單撰寫與注意事項

CSS 動畫入門

  • transition 簡易動畫

  • animation 關鍵影格動畫

幻燈片

  • 幻燈片製作

  • 幻燈片修改

  • 自訂幻燈片介面

立即報名

扎實課程搶先看

Amos課程-第一章節初探切版實務

初探切版實務

flex 是當下最常見的 CSS 切版方式之一,我們可以利用 flex 做出電商網站的多數版面,也可以利用 flex 去做出以往最辛苦的上下置中效果,然而 CSS 切版就只有運用 flex 嗎?並沒有,flex 家族還包括了  justify-content, align-item … 等,好好認識 flex 家族成員,是切版技能不可或缺的知識之一。

在課堂上, Amos 老師也會帶你一起認識 Grid ,好好熟悉 Grid 可以讓你在未來掌握住 tailwind 的格線系統,不再因爲捉摸不定的 Grid 處處撞牆。

Amos課程-第二章節RWD入門

RWD入門

初學者常常無法確定什麼時候該斷點,手機尺寸因每家不同的廠牌而有不同尺寸,我們應該如何確定目前大眾使用的尺寸是什麼呢?在課堂上 Amos 老師將教你如何透過哪些網站去做查詢,並且說明 RWD 的斷點原理與應用。再配合格線系統,就能做出自適應 RWD 的網站!

第三章節-為網頁注入靈魂

為網頁注入靈魂

前面學會了靜態網站的做法後,還能透過 CSS 我們能做出簡易的動畫,讓網站更加動人。在課堂上也會教你怎麼製作幻燈片,在未來能透過這個技巧運用在網站不同的元件上,例如:Banner輪播切換、照片輪播。

五倍紅寶石專業程式教育機構因應疫情發展,

🚨 實體教學課程落實社交距離注意事項:

  1. 每天都會要求學員量體溫、使用酒精消毒雙手
  2. 進入教室,也規定戴口罩;就算在用餐時,也會提醒同學盡量不要邊吃邊聊天
  3. 每場與課程相關的活動,都會要求填寫實名制健康聲明卡
  4. 學員下課後,會進行空間的次氯酸空氣消毒
  5. 每週都會安排漂白水、紫外線殺菌燈消毒
  6. 若有呼吸道疾病,或被政府匡列的接觸者,禁止進入教室,並可使用補課平台觀看線上補課
  7. 除上述之外,我們也全力配合政府防疫規定,讓每位學員都能在安心的環境學習

立即報名

前端網頁進階實戰!

課程類別與程度

前端課程入門課程

近期開課時間

4月 進階班

4/8(六)、4/15(六)、4/22(六)、4/29(六)

10:00 ~ 17:00

3月 初階班

3/11(六)、3/18(六)

10:00 ~ 17:00

初 + 進階

3/11(六)、3/18(六)、4/8(六)、4/15(六)、4/22(六)、4/29(六)

10:00 ~ 17:00

限時優惠價

NT$ 14,000

點擊後選擇課程時間。

組團報名享折扣

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

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

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

五倍紅寶⽯課程提供

結業證書

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

課程結業證書證明

課程討論群組

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

共同討論課程群組,

老師同學即時交流

wifi

wifi | 五倍紅寶⽯課程提供

備有插座及快速穩定

免費 wifi 連線操作

線上補課

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

線上補課,

不怕跟不上進度!

默默會

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

每週二獨家默默會

讓你問題問到飽

業界高手一同交流

吉祥物貓貓

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

吉祥物貓貓加持

注意事項

  1. 課程內容、日期及講師可能因故有所修改,主辦單位保留異動之權利。
  2. 學員需自備筆記型電腦。
  3. 開課前一週,會提供上課平台,及時互動群組及注意事項等課前通知。
  4. 不限地點,請於上課時間內準時上線。
  5. 若報名學員人數不足 10 人,將視情況取消當次課程,並全額退還報名費用。
  6. 如有企業或團體課程需求,歡迎來信洽詢。

上課地點

© 2014 - 2023 五倍紅寶石程式資訊教育股份有限公司 (5xRuby Training Group CO., LTD) | 台北市短期補習班立案 第 7594 號