Course Details

HTML5 + CSS3 + BootStrap + JavaScript + jQuery + jQuery UI + jQuery Mobile + PhoneGap + Node.JS + AngularJS
Image

Course Introduction 課程簡介

此課程內容相當豐富。課程主要教授學員Web的前台程式設計(Front End programming)等相關技術,

  • 學習如何利用HTML5 打造網頁的骨架及如何利用CSS來美化網頁。
  • 學習使用HTML5 的新功能, 例如地圖服務 ,視頻播放, 網頁繪畫及資料儲存等。
  • 學習JavaScript這個跨平台的前端網頁語言及如何利用JavaScript處理 DOM tree 及與伺服器程式進行 AJAX 溝通。
  • 學習如何利用jQuery來簡化Javascript的寫法及介紹各種實用的jQuery Libraries程式庫。
  • 學習使用jQuery UI 快速建立網頁介面。
  • 學習如何使用jQuery Mobile 建立 Mobile Web。
  • 學習如何使用PhoneGap 或 Cordova去將網站變成 Android 或 iPhone Apps。
  • 學習如何使用PhoneGap 或 Cordova的各種 plug-ins 去強化 Apps 功能。
  • 學習如何使用BootStrap 去快速建立迴響式 (Responsive) 網站。
  • 學習如何利用Node.JS 將 JavaScript 變成 Server side language 網站後台語言, 使開發人員只須學習一種語言便可開發完整的應用程式。
  • 學習如何使用AngularJS 去建構出一個更快速及容易維護的前台程式。
  • 學習如何利用AngularJS 去建立一個SPA(Single Page Application)。

技術包括:

HTML5

HTML5是最新版本的HTML,可以準確描述出網頁的內容及外觀。HTML5利用JavaScript解決了瀏覽器兼容性的問題,並且引入多媒體及不同類型Tags增強結構及可讀性。

CSS3

CSS3 是一套美化網頁既語言,利用CSS我們可以加入不同的美化效果。例如背景圖畫、邊框、顏色、動畫效果及各種設計元素。

JavaScript

Javascript是運行於瀏覽器上的程式語言 自從Google的v8引擎出現後,JavaScript的效能得到大大的提升 令我們可以在網頁上創造出不同的互動效果。

jQuery

jQuery是一套跨瀏覽器的JavaScript函式庫,簡化HTML與JavaScript之間的操作,是目前最受歡迎的JavaScript函式庫。

jQuery UI

jQuery UI 是一套跨瀏覽器的JavaScript函式庫,提供抽象化、可自訂主題的GUI 控制項與動畫效果。適合用來建立成網頁介面。

jQuery Mobile

jQuery Mobile是另一套Javascript 函式庫,可快速建構出跨平台的流動網站介面, 與各種各樣的智能手機和平板電腦兼容。

PhoneGap/Cordova

PhoneGap/Corodva 是讓開發者可以使用HTML和Javascript開發行動裝置Apps應用程式的工具。可將任何網站包封成一個iPhone / Android Apps。

BootStrap

BootStrap 是一套跨瀏覽器的CSS framework ,可快速製作出適合不同裝置及尺寸的回彈性網頁介面。

Node.JS

Node.JS是一個Javascript Server 或執行環境,令JavaScript獨立於瀏覽器外運作 ,可取替php等後台程式語言。

AngularJS

現今最流行的Web frontend framework, 利用不同的 Directives 及 MVC 設計模式 模式, 大大加強HTML的功能,不用寫程式也能做出不同的互動效果,被譽為HTML6。

Course Duration 課程時數

24 hrs (18 hrs 面授 + 6 hrs 視像)

Course Objective 課程目標

本課程目的是培訓學員了解現今各種新穎的網頁設計技術,讓學員能利用學懂的技術去建構不同類型的 Web及Apps應用程式

Entry Requirement 入學要求

報讀者無需任何程式設計背景,但對網頁程式設計及各種新技術有興趣請便可報讀

Course Features 課程特點

★ 解說詳細:循序漸進說明各種技術的使用方法。
★ 即時實習:即時實習,導師與學員一起由零開始打造系統。
★ 多元學習:了解不同技術的配搭,因應情況使用不同的技術方案。
★ 視像重溫:部分複雜的課程部分將以視像形式教授,學員可在家重複觀看方便吸收。

Face to Face Course Outline 面授課程內容 (18 hrs)

第一部分是課堂實習,學員將與導師一起進行一連串的實習。為期18小時

Lesson 1:

  • HTML Basic Tags (Header, Hyperlink, Paragraph, Table, Image)
  • HTML Layout using DIV tags
  • CSS basic styling commands and cascading concepts
  • CSS ID and class concepts
  • CSS Box Model (Background and Border styling)
  • CSS Color schemes and Google fonts
  • CSS Float and Layout

Lesson 2:

  • CSS Menu bar makeup
  • JavaScript Basics and Functions
  • JavaScript Variables and Arrays
  • JavaScript If-Else and Looping control structures
  • DOM (Document Object Model) introduction
  • Interacting DOM by JavaScript
  • AJAX communication with Server by JavaScript

Lesson 3:

  • jQuery Basic Sytnax
  • Interacting DOM with jQuery
  • AJAX communication with Server by jQuery
  • jQuery UI (User Interface)
  • jQuery UI widgets (Datepicker,Accordion and Tabs)
  • jQuery UI themes
  • jQuery UI drag and drop

Lesson 4:

  • jQuery Mobile for Mobile Web Design
  • jQuery Mobile Page structure
  • jQuery Mobile Page Navigation
  • jQuery Mobile widgets (ListView,Panels,Forms)
  • jQuery Mobile event programming
  • PhoneGap Build for coverting web site to Apps

Lesson 5:

  • BootStrap for Responsive Web Design
  • Build a BootStrap based site from scratch
  • BootStrap Grid system for web layout
  • Using BootStrap classes to build various common web elements
  • BootStrap for styling a form
  • BootStrap for mobile web

Lesson 6:

  • Setup Node.JS and Express Web server
  • Run Javscript out of the browsers
  • AngularJS MVC concepts
  • AngularJS model, directives and modules
  • AngularJS 2-way binding
  • AngularJS controllers and services

Supplementary Online Videos Course Outline
補充視像課程內容 - 3 個內月無限重複觀看

第二部分是當學員熟識了導師的教法後,便可自行在家觀看視像,跟著老師的步驟進行一連串的實習 , 務求令學員能夠重覆觀看一些難度高的程式設計動作,讓學員能輕鬆因應自己的進度來完成整個課程。

More jQuery + CSS

  • How to build Dropdown Menu
  • How to build Side Menu
  • How to build Tab Menu
  • How to build Toggle Menu
  • How to build Slider
  • How to build Viewer
  • How to build Photo Caption
  • How to build Smooth Scroll

More AngularJS

  • Managing Multiple Views with ng-include
  • Creating a Custom Directive
  • Working with Promises
  • Using $http Service to access backend server
  • Using Form Controls with AngularJS
  • AngularJS Form State Management
  • AngularJS Custom Validation
  • Applying Built-in Angular Service

More Cordova

  • Using the Accelerator API for getting phone orientation
  • Using the Camera API for taking pictures
  • Using the Geolocation API for displaying maps
  • Using the File Transfer API for uploading/downloading files
  • Packaging the web site to Android Apps
  • Packaging the web site to iPhone Apps

Free Courses 免費課程

Introduction to HTML (Duration:29m:51s)

Course Outline

TopicsDuration
Environment Setup 1m:52s
Basic Structure 5m:28s
Headers and Paragraphs 3m:22s
Images 2m:23s
HyperLinks 2m:02s
Tables 3m:08s
List 1m:30s
Final Exercises 8m:48s

Featured Video Demos

jQuery Demo: Dropdown Menu

jQuery Demo: Tab Menu

jQuery Demo: Side Menu

jQuery Demo: Smooth Scroll Menu

jQuery Demo: Photo Caption

jQuery Demo: Slider Caption

Navigation

Social Media

IT Design