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

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

開課時間

4/11 (日)、4/18 (日)、4/25 (日)、5/2 (日)、5/9 (日)、5/16 (日)

09:30 ~ 17:30

10/16 (日)、10/23 (日)、10/30 (日)、11/6 (日)、1/13 (日)、11/20 (日)

09:30 ~ 17:30

這堂課適合

  • 想嘗試程式領域的女生。

  • 想提升網頁學習效率者。

  • 想找到一起進步的夥伴。

  • 視覺 / 網頁設計師、SOHO 族、行銷人員、PM 專案經理。

  • 想前往前端領域發展的妳。

其它相關課程

你將會學到

  • HTML / CSS / jQuery 基礎與實用得網頁切版技能。

  • 網頁前端工程師協作溝通技巧。

  • 前端獨立切版技能。

  • 掌握如何在網頁上寫出互動效果。

  • 提供作業練習,帶您實戰把觀念融會貫通。

課前準備

  • 需自備筆電, Mac / Windows 皆可。

  • 課程將會使用 Sublime Text 3 / VS Code 編輯器,建議同學可以先行安裝。

課程大綱

  • 網頁是什麼?

  • 前端是什麼?

  • 網頁的內容與 HTML 標籤

  • 網頁架構與規則

  • CSS 簡介與寫法

  • 常見 CSS 屬性介紹

  • CSS 偽類選取器

  • 網頁排版會用到什麼?

  • Flex 與 Float 介紹

  • 定位應用

  • RWD 是什麼?

  • RWD 網頁的製作方式

  • 網頁動畫的製作方式有哪些?

  • CSS 動畫介紹

  • Transition 與 Animation 屬性介紹

  • jQuery 介紹與撰寫方式

  • 常見的 jQuery 方法

  • 什麼是框架?

  • Bootstrap 介紹與使用方式

  • 從版面分析切版方式

  • 實際撰寫一個網站

課程內容

女力班-課程內頁圖-標題圖-學會網頁設計攻略技巧
女力班-課程內頁圖-Banner

網頁設計課程包含 HTML、CSS、 jQuery,讓新手的妳從零基礎到實作出自己的網站,前端網頁設計女性班課程強調頁面規劃與結構設計,除了基礎教學外,也提供許多實務上專案合作時的技法,業界經驗豐富的老師不藏私,通通傳授給妳!讓妳實作出屬於自己的網頁。

女力班-課程內頁圖-標題圖-HTML/CSS/jQurey 是什麼
女力班-課程內頁 - 使用 HTML 來打造網頁基礎

🛠 使用 HTML 來打造網頁基礎

HTML 是一種用來建構網頁的標記語言而非程式,如果將網頁譬擬為一個人,那麼 HTML 就如同人的骨架,透過這個骨架可以達成很多事:像是呈現網頁、瀏覽器妳的網站資訊,甚至還可以透過 JavaScript 來讓你的網頁資訊和其他網站溝通。

能建立一個骨架很容易,但不好的骨架就好像告訴瀏覽器妳的腳和眼睛擺錯了位置,讓瀏覽器讀取時搞混 🤯 。這堂課 Amos 老師將會告訴妳寫出一個有意義的、有效網頁結構,對 SEO 和前後端串接是多麽重要!

女力班-課程內頁 - 讓 CSS 來美化你的網頁吧

💅 讓 CSS 來美化你的網頁吧!

如果 HTML 是骨架的話,那麼 CSS 就像是衣服,妳可以透過 CSS 設定網頁的字體大小、框線、陰影甚至是做一點小動畫!除了這些效果外,CSS 最主要還能製作成 RWD (Responsive Web Design) 響應式網頁,使頁面不管是在任何尺寸下都整到適合的瀏覽樣式。

精通 CSS 樣式能讓妳不畏懼各式網頁設計稿,切出理想的版面。

女力班-課程內頁 - 透過 jQuery 打造互動網頁

🌀 透過 jQuery 打造互動網頁!

有了 HTML 的身體骨架、CSS 的衣服美化,那麼 JavaScript 就像是神經元素。我們能透過 JavaScript 讓骨架移動、改變樣式、獲取資料等。

而這門課將透過 jQuery 這一套輕量的 JavaScript 函式庫,讓妳的網頁動起來!

jQuery 的不僅跨瀏覽器支援度高,且最重要的是:簡化大量的 JavaScript 方法,讓初學者能夠透過 jQuery 快速的實作網頁動畫事件處理,甚至可以與其他網站資料庫互動。

女力班-課程內頁圖-標題圖-課程特色

扎實 42 小時課程,這門課將讓妳完整瞭解網頁脈絡,從網頁結構到網站動畫實作,課堂最後每一位學員都還能獨立完成至少一頁的網頁切版!

課堂中有錄影,老師會依照同學狀況調整節奏、五倍紅寶石提供工程師助教,不用擔心跟不上進度!

一起跟著 Amos 老師,打好妳的網頁基礎!💪💪

女力班 課程內頁 - 標題圖 - 前端女性專班課程特色

🖥️ 初識網頁

  • 始業式

  • 網頁是什麼?

  • 前端是什麼?前端用到的語言有哪些?

  • 撰寫網頁的工具

🧚‍♀️ 網頁起手式

  • 網頁的內容 HTML 標籤

  • 網頁架購與規則

🎨 用 CSS 美化你的網頁!

  • CSS 是什麼?

  • CSS 的寫法

  • CSS 的偽類取器

🙋‍♀️ 網頁排版囉!

  • 排版會用到甚麼?

  • Flex & Float 介紹

  • 完成你的第一個網頁

  • 定位的應用

  • 利用定位製作網頁互動效果

📱 來做個 RWD 網頁吧!

  • RWD 是什麼?

  • RWD 網頁的製作方式介紹

  • 做一個簡單的 RWD 網頁吧!

🌀 網頁動起來

  • 網頁為何需要動畫?

  • 網頁動畫的製作方式有哪些?

  • CSS 動畫介紹

  • Transition 與 Animation 屬性介紹

🧞‍♀️ 跟網頁互動

  • jQuery 介紹

  • jQuery 的撰寫方式

  • 添加互動到你的網頁吧

🚀 用框架加速你的網頁製作

  • 什麼是框架?

  • Bootstrap 介紹與使用方式

  • 用 Bootstrap 完成一個網頁吧

🧳 網頁切版實務

  • 從版面分析切版方式

  • 實際撰寫一個網站

  • 結業式

關於講師

李建杭

HTML / CSS 講師

李建杭 (Amos Lee)

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

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

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

講師其他課程


他們都在五倍學習程式

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

Analeigh Kuo

Amos 大神的課程內容 清楚明瞭 帶著女力班的大家了解建構網頁的基礎及脈絡 對想轉職 的女力們 有很大幫助。值得大推的課程!!

Etim Yang

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

宋橘子

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

Paggy Lai

立即報名

網頁前端設計女性專班

立即報名

點擊後選擇課程時間及付款方式。

組團報名享折扣

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

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

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

相關課程

立即報名