HTML5, CSS3, jQuery, Bootstrap 網頁設計基礎班 [線上課程] 線上課程

HTML5, CSS3, jQuery, Bootstrap 網頁設計基礎班 [線上課程]

小至個人簡歷、大至研討會活動的官方網站，越來越多的網站的發跡逐漸證實了一件事：HTML5 / CSS3 / Javascript 提供的互動性完全不亞於 Flash，而使用如 Twitter Bootstrap 等 CSS 框架所製作的網站，不僅能有效傳達重要的訊息，更散發著正式、專業的氣質；其響應式設計（Responsive Web Design, RWD）也能確保網站資訊能在手機、平板電腦與桌上型電腦上提供平順的閱讀體驗。
　　隨著雲端運算崛起，Javascript 在互動性高的 Web App 上也扮演著舉足輕重的地位，如 GMail, Facebook 的許多功能，都是透過 Javascript 實作。 jQuery 則可以大幅減輕開發者的開發成本，讓大家可以專心在製作自己想要的功能上。
　　這門課將從由基本的架設網站開始，逐步帶領大家走入網頁開發的世界，並依照內容分為基礎班與進階班，適合不同程度與需求的同學來選修，詳細的課程規劃請參考課程大綱。

※線上課程上課時間：於開課時間內可自行安排時間上課
影片上架進度，請參考備註欄位第(三)點線上課程常見QA連結網址

課程大綱

HTML5, CSS3, jQuery, Bootstrap 網頁設計基礎班課程主題

*基礎班課程大綱，共計30小時課程為一期：

主題一：學習架設網站與網頁基本開發
1. 認識網站架設基礎知識
2. Visual Studio Code 開發環境設定
3. HTML標籤與CSS屬性介紹
4. CSS 選擇器設計策略
5. 認識網頁內容格式：文字、圖片、超連結、版塊、表單與影音格式...等
6. HTML表單應用：使用HTML表單串接自動寄信API服務
7. 部署網站至雲端伺服器

主題二：網站的版面設計
8. 網頁排版策略分享
9. 認識 CSS3 Flexbox
10. CSS3 網頁排版實作步驟示範
11. CSS3 進階定位排版與動畫特效實作
12. 引用外部 CSS Library 輔助設計
13. 響應式網頁設計(Responsive Web Design)實作

主題三：網頁前端程式基礎
14. Javascript 與 jQuery 基礎特效入門
15. 透過 jQuery 綁定事件並控制網頁內容

主題四：進階版面設計實戰
16. 認識 Bootstrap 4 網格系統
17. 整合 Bootstrap 4 元件(如圖片與內容輪播、導覽列...等)至網頁中
18. Bootstrap 4 Landing Page 網頁切版案例實作
19. 認識 Sass 並安裝編譯環境
20. Bootstrap 4 元件 Sass 原始碼客製化實作
21. 整合 jQuery 設計導覽滑動動畫腳本

課程內容將依照學習狀況進度做調整，亦可斟酌大家的意見追加內容。

HTML系列課程地圖
1. HTML基礎班→HTML進階班→Javascript進階班
2. HTML基礎班→HTML進階班→Javascript相關專題課程


線上課程進行方式

本課程將以非同步的影片方式進行線上課程，採用本校的NTU Cool平台，並於開課日以E-mail寄發註冊信(報名時請務必填對E-mail)。



課程評量方式與通過標準
本課程採用期末作業的型式進行評量，只要有製作出成果皆可通過課程考核標準。
期末作業100% (不限主題，透過課程中所學習的技術製作一個響應式網頁，並使用老師指定的平台繳交)

適合對象

無需任何網頁設計基礎，本課程將從0開始教起，程度較佳者或已有Bootstrap相關經驗，建議報名進階班或JavaScript網頁設計入門。

開發環境

使用跨平台編輯器Visual Studio Code做為主要開發環境，此編輯器可安裝於Windows及MacOS的環境下使用。

線上課程注意事項

●線上課程採遠距教學，無需到班上課!

●線上課程影片無字幕輔助

●線上課程為非同步教學，無法及時互動回覆，請學員需自行評估是否適合自己的學習模式。

● 上課教材、影片：開課當天會發送註冊信至信箱，註冊完畢後即可開始上課。

● 繳交作業期限：依照各班講師規定；通過課程標準才會製作證書。

● 課程影片下架日：結束日後六個月

●學員於開課後登入課程時， 登入帳號務必與報名時所填寫的EMAIL相同!!!

公務員全程參與課程學習後可於課程結束後申請登錄公務人員學習時數

 

(一)轉班或退費期限：開課日後⅓時數內，詳情連結

(二)結業狀況：查詢是否合格及證書製作進度，結業名單連結

(三)線上課程上課時間：請參考官網最新消息「線上課程常見QA」，詳情連結

(四)報名備註欄位僅可填寫優惠同行人，收據開立時間及其他問題請直接寄EMAIL向我們聯繫

近期班次

  • 第433期 招生中

    課程類別：線上課程

    開課日期：2025.01.15 ~ 2025.03.12

    學費：新生新台幣4500元整

    • 講師介紹

    黃安聖

    國立臺灣科技大學工商業設計系學士學位

    (一) 個人網站：
    https://enn.design

    (二) 經歷：
    共生智能股份有限公司 Kyosei.ai 共同創辦人兼前端工程師
    Soundscape 前端開發工程師
    112年網站無障礙專家學者座談會暨檢測焦點平台會議座談委員
    111年網站無障礙座談暨檢測焦點平台會議座談委員
    110年網站無障礙規範座談會座談委員
    Uninus 合一智聯科技 前端工程師
    香港 THE Education Academy Group HK 前端工程師
    台北市政府春遊補助管理系統開發
    LINE HACK 2018 入選前十強
    FMTaiwan線上收聽網站開發者
    緯創資通股份有限公司價值創新中心
    京尚股份有限公司
    微星科技工業設計中心

    (三) 教學經歷：
    1.2016年至本班教學，授課時數累計至2024年4月21日為6,000小時；
    擔任：AI應用網站開發入門 HTML CSS React 結合 OpenAI講師、Python程式設計課程講師、HTML5,CSS3,Bootstrap,jQuery網頁設計基礎班課程講師、Python Flask動態網站與聊天機器人實作班課程講師、React Native開發入門班課程講師、Sketch 3 基礎專題班課程講師
    2.緯創軟體股份有限公司：Vue.js前端應用程式設計、React.js前端應用程式設計、Python程式設計課程講師
    3.國立臺灣大學：文學數位應用與實作課程合作講師
    4.國立臺灣大學：文學編輯的當代型態與數位實作網頁開發技術課程合作講師
    5.國立宜蘭大學：微學分課程Python程式設計與網頁爬蟲應用程式實作課程講師
    6.國立宜蘭大學：RWD網頁設計與專題實作研習課程講師
    7.國立宜蘭大學：Python程式設計與專題實作研習課程講師
    8.哈瑪星科技：jQuery基礎程式設計應用與開發、Sass & Scss網頁設計切版課程講師
    9.中華民國國防部：React Natvie程式設計課程講師

    (四) 興趣領域：
    使用者介面設計、使用者經驗設計、HTML5、CSS3、JavaScript、React.js網頁應用程式開發、React Native手機應用開發、Python、Node.js、股票投資與期權交易。

    (五) 特殊經歷：

    2021年經濟日報第12屆權民搶百萬權證交易競賽 - 年度績效獎

    (六) 影音創作：



    (七) 專欄文章：

    1. 使用ChatGPT解決CSS Filter模糊效果在手機瀏覽器上的遲鈍問題
    2. 使用Node.js建置你的第一個LINE BOT
    3. 使用VSCode外掛自動編譯SASS/SCSS
    4. 更新EXPO SDK 47遇上ViewPropTypes問題處理紀錄
    5. iOS 16.1版本，使用 Firebase GoogleAuthProvider 透過 getRedirectResult 獲得登入憑證的處理辦法
    6. 使用 Lottie React Native 將設計師使用 After Effect 製作的動畫無痛轉移至原生App內呈現
    7. Designing an OpenAI-Enhanced LINE Bot with the Neru Server Framework
    8. Put a Spinning Donut in React