Front End Development 

This course focuses on the relevant web technologies for developing the client side of web applications and hybrid ones. Whether your target is developing a cross platform mobile application or a one page web application this course is for you. The course focuses on the use of JavaScript, its libraries and HTML5. The course includes 140 academic hours organized in 12 parts, that take place in class, and 560 academic hours (and beyond) that take place at home. The training material (slides, video clips, assignments, solutions and code samples) for the entire course is organized in small online courses on the e-learning platform we use during the course.


Fundamental Topics in Software Development (1th Part)
This part covers the very basic topics in software development which are necessary in order to learn all other topics the course includes. This part focuses on very basic topics in procedural programming, basics of html and css. (10 academic hours)

User Interface Design in CSS (2th Part)

This part focuses on CSS3 in order to get the required understanding for the development of user interface using web technologies such as JavaScript, HTML5 and CSS. This part is essential for understanding the final outcome of every web application. (10 academic hours)

Software Development in JavaScript (3th Part)

This part covers the JavaScript programming language and is essential for the rest of the course. You cannot learn HTML5 nor any of the famous popular libraries as jQueryMobile, PhoneGap or AngularJS without knowing JavaScript. (30 academic hours)

Software Development in TypeScript (4th Part)

TypeScript is a new programming language developed by Microsoft. It compiles to JavaScript and provides us with capabilities similar to those in classic OOP languages. TypeScript is been used by many well known companies, including Google and Wix. (10 academic hours).

Client Side JavaScript Frameworks (5th Part)

This part covers some of the most popular client side JavaScript frameworks such as jQuery, jQueryMobile, MooTools, AngularJS and many others. Some of these frameworks allow us to develop rich graphics user interface both for desktop applications and mobile ones. Others allow us to develop a structured client side which is relevant whether you develop a web application or an hybrid one for mobile telephones and tablets or the desktop. The more important frameworks get more hours. AngularJS 2.x get 25 academic hours. jQuery,jQueryUI and jQuery Mobile get 20 academic hours. (50 academic hours)

The HTML5 Ecosystem (6th Part)

The HTML5 ecosystem is everything the HTML5 specification covers and beyond. We will start with covering the official parts of HTML5 and continue with some of the more interesting HTML5 capabilities that still weren’t added to the specification. (15 academic hours).

Social Web Applications (7th Part)

Whether you develop a web application or an hybrid one you might want to interact with social networks as Facebook and others. This part of the courses focuses on using the Facebook JavaScript SDK. (3 academic hours)

Android Hybrid Applications (8th Part)

Taking a web application optimized for mobile telephone and wraps it as an hybrid application for android or any other mobile telephones platform is fairly simple. We will do it for android. Doing the same for iPhone or any other mobile platform is pretty much the same idea. (5 academic hours)

Web Browsers Extensions (9th Part)

This part focuses on learning how to develop extensions for web browsers. In addition, we will learn how to develop applications for ChromeOS, the new coming operating system, and learn how to place them for sale through the Chrome web store. (2 academic hours).

Responsive Web Applications (10th Part)

Developing one website that fits all platform including mobile telephones, tablets, tv and desktops is the next challenge. This part of the course covers the available possibilities. (2 academic hours)


Development Tools (11th Part)

Developing web applications and software in general involves with using various development and control version tools. This part of the course focuses on those tools and set the required basic knowledge for learning how to use Git, JSDoc and Grunt. (1 academic hours)

Analysis & Design using UML (12th Part)

This part summarizes the course and provides the students with analysis and design capabilities using UML. Based on the technological skills acquired during the course we learn how to analyze and design web and mobile hybrid applications and how to use UML, SOAML and SysML doing that process. (2 academic hours)


Meeting

Topic

Online Course

1

Fundamental Topics

Introduction to The Internet
Internet History, The Web, HTTP Protocol, Web Services, Websites


Introduction to Procedural Programming
Simple Variables, Input & Output, If Statement, While Loop

XHTML Fundamentals
Introduction, Headings, Images, Links, Tables, Lists

2

Fundamental Topics

Introduction to Procedural Programming
Arrays, Functions

XHTML Fundamentals
Forms


Introduction to Object Oriented Programming
Objects

3

CSS3

CSS Basics
Introduction
Background

Text

Font

Border

Outline
Margine

Padding

List

Table

Dimension

Classification

4

CSS3










HTML



CSS

CSS Basics
Positioning
Images
Transforms
Transitions

Animations
Columns
Navigation
Forms
Media Queries

HTML Style Guide
Introduction
Guidelines Overview

CSS Style Guide
Introduction
Guidelines Overview

5

JavaScript

JavaScript Programming
Introduction
Basic Elements

6

JavaScript

JavaScript Programming
Object Oriented Programming
Debugging

Array

Date

7

JavaScript

JavaScript Programming

Boolean

Number

String

Math
Functions
Anonymous Functions

Global Object

Window

Location

Navigator

Screen

History

8

JavaScript

JavaScript Programming
Document Object Model
Events Handling
Errors Handling

9

JavaScript

JavaScript Programming
Regular Expressions
Using Cookies
Live Connect
Handling Images
JavaScript and CSS
Memory Management
Asynchronous Programming

Lambda Expressions
CodeLinting
Iterators
Generators
Reflection
Modules
Data Structures
Proxies
Promises

Design Patterns in JavaScript

Introduction

Classic Design Patterns

JavaScript MV* Patterns

10

JavaScript







JavaScript

Ajax Fundamentals
Introduction to Ajax
The XmlHttpRequest Object
Web Services
The JSON Format

Dynamic Tag Pattern
JSONP Pattern
Cross Site Requests
Mashups
Cross-site HTTP requests
The FormData Object

DOM Fundamentals
Overview
Nodes

Parsing
Methods & Properties
Accessing
Node Info
Node List
Navigation

11

TypeScript

TypeScript Fundamentals
Introduction
Jump Start
Basics
Types
Functions
Arrays
Classes

12

TypeScript

TypeScript Fundamentals
Inheritance
Generics
Interfaces
Enumerations
Exceptions
Modules
Runtime

13

Client Side JavaScript Frameworks

The jQuery
Introduction
Basics
Ajax
Animation
Events
Manipulation
Selectors
Traversing
Form
CSS

14

Client Side JavaScript Frameworks

The jQuery UI
Buttons
Tabs
Accordion
Dialog
Slider
Date Picker
Auto Complete
Drag & Drop
Resizing
Animation

15

Client Side JavaScript Frameworks

jQuery Mobile Basics
Introduction
Pages
Dialogs
Themes
Buttons
Lists
Toolbars
Layout
Form

16

Client Side JavaScript Frameworks  

AngularJS Basics
### Topics To Be Added ###

17

Client Side JavaScript Frameworks  

AngularJS Basics
### Topics To Be Added ###

18

Client Side JavaScript Frameworks  

AngularJS Basics
### Topics To Be Added ###

19

Client Side JavaScript Frameworks

Twitter Bootstrap
### Topics To Be Added ###

20

Client Side JavaScript Frameworks

AngularJS Basics
### Topics To Be Added ###

Self Learning

Client Side JavaScript Frameworks

Google WebFonts
Introduction
Jump Start


MooTools Basics
Introduction
Functions

Classes
The Browser Object
The Request Object
The Cookie Object

Backbone.js Basics
Introduction
Jump Start
Modules
Ajax
Views
Collections
Routing


Zxcvbn.js Basics
Introduction
Jump Start

Adapts.js Basics
Introduction
Jump Start

Barousel.js Basics
Introduction
Jump Start

Date.js Basics
Introduction
Jump Start

Galleria Basics
Introduction
Jump Start

Google Maps
Introduction
Jump Start

Overlays

Handlebars.js Basics
Introduction
Jump Start

Highcharts.js Basics
Introduction
Jump Start

Howler.js Basics
Introduction
Jump Start

json2html.js Basics
Introduction
Jump Start

JSZip Basics
Introduction
Jump Start  

Lightbox Basics
Introduction
Jump Start

Lo-Dash Basics
Introduction
Jump Start  

Log4JavaScript Basics
Introduction
Jump Start  

Modernizr.js Basics
Introduction
Jump Start

Moment.js Basics
Introduction
Jump Start

Self Learning

Client Side JavaScript Frameworks

Smoke.js Basics
Introduction
Jump Start

Sugar.js Basics
Introduction
Jump Start  

Dojo Toolkit
Introduction
Jump Start  

Two.js Basics
Introduction
Jump Start  

Underscore.js Basics
Introduction
Jump Start  

Video.js Basics
Introduction
Jump Start  

Yepnope.js Basics
Introduction
Jump Start  

Moris.js Basics
Introduction
Jump Start  

Mustache.js Basics
Introduction
Jump Start

Polymer.js Basics
Introduction
Jump Start

Microtext.js Basics
Introduction
Jump Start

UAParser.js Basics
Introduction
Jump Start

Paper.js Basics
Introduction
Jump Start

Math.js Basics
Intrduction
Jump Start

String.js Basics
Introduction
Jump Start

OpenLayers.js Basics
Introduction
Jump Start

LESS.js Basics
Introduction
Variables
Functions
Nested Rules
Mixins

Google Charts
Introduction
Jump Start

Google FontLoader
Introduction
Jump Start

Turn.js Basics
Introduction
Jump Start

List.js Basics
Introduction
Jump Start

Numeral.js Basics
Introduction
Jump Start

Pixastic.js Basics
Introduction
Jump Start


PouchDB Basics
Introduction
Jump Start

TeffyDB Basics
Introduction
Jump Start

CoffeeScript
Introduction
Jump Start
Basics
Control Structure
Functions
Collections
Classes

21

Client Side JavaScript Frameworks

AngularJS Basics
### Topics To Be Added ###

22

Client Side JavaScript Frameworks

AngularJS Basics
### Topics To Be Added ###

23

HTML5

Introduction to HTML5

Introduction
Multimedia

Video Capturing
Geo Location
Offline Storage

24

HTML5

Introduction to HTML5

Canvas 2D Graphics
Canvas 3D Graphics

Communication
Web Workers
IndexedDB
Local Files Access

25

HTML5

Introduction to HTML5
Web Sockets
HTML5 Forms
Drag & Drop
Accessing Files
Application Cache
History Manipulation

26

Social Web Applications






























Responsive Web Applications

Facebook JavaScript SDK
Introduction
User Session (short overview only)
The Graph API (short overview only)
User Interaction (short overview only)
XFBML Parsing (short overview only)
FQL Queries (short overview only)
Facebook Graph API
Introduction
Data Selection
Graph Introspection
User Authorization
Pages Interaction
Graph Publishing
Objects Deletion
Profile Photos
Facebook Places
Graph Search
Facebook Social Plugin
Introduction
JavaScript SDK
Like Button
Recommendations
Like Box
Activity Feed
Login Button
Comments


Responsive Web Design
Introduction
Navigation
Media Queries
Templates
Images
Layout
Videos

27

Hybrid Applications


Android Fundamentals
Introduction
Web View

Phone Gap Basics
Introduction
Basics
Device Ready
Device Information
PhoneGap Build
Cordova Basics

28









Web Browsers Extensions









Development Tools















UML Analysis & Design

Chrome OS Extensions
Jump Start
Desktop Notifications
Deployment Options
Packaged Apps
Browser Actions
Manifest File
Page Actions

Introduction to Git
Introduction
Git Basics
Distributed Work
GitHub Jump Start
Git Logs

Grunt Basics
Introduction
Jump Start

Introduction to JSDoc
Introduction
Jump Start

UML Fundamentals

Use Case Diagram
Class Diagram
Activity Diagram
Package Diagram

SOAML Fundamentals
Introduction
Basics

SysML Fundamentals
Introduction
Basics


Changes Logs:

August 15th, 2013:

The topic ‘MV* Design Patterns’ was added to the JavaScript topic in meeting 11.

September 1th, 2013:

The following JavaScript libraries were added to the ‘Client Side JavaScript Libraries’ topic in meeting 18:

Microtext.js
UAParser.js
Paper.js
Math.js
String.js  
OpenLayers.js
LESS.js
Google Charts
Google FontLoader
Turn.js

September 16th, 2013:

Video Capturing was added to the HTML5 topic.

Lambda Expressions was added to the JavaScript Programming topic.

October 16th, 2013:

Code Linting and Iterators were added to the JavaScript Programming topic.
Grunt Basics was added to the the Server Side in JavaScript topic.

MySQL and Basics were added to the node.js sub-topic in Server Side in JavaScript topic.

December 17th, 2013:

The topics covered in AngularJS were changed. More topics were added. The animation topic was removed (it isn’t why we want to use angularjs).

January 2th 2014:

The topics List.js, Pixastic.js and Numeral.js were added.

June 12th 2014:
The HTML5 File API topic was added.

June 14th 2014:
The IndexedDB topic was added.

July 22th 2014:
The JSON, JSONP, Cross Domain Requests and Mashups sub topics were added to the Ajax Fundamentals topic.  

July 26th 2014:
The HTML Style Guide and the CSS Style Guide topics were added.

August 27th 2014:
The Ajax, Modules, Directives and Modules topics were added to the AngularJS topic.

October 10th 2014:
The following topics were taken away and they are now covered in the Software Engineering in JavaScript course. You can find the detailed plan of this course at
http://tinyurl.com/lifemichaeljs:
Node.js
Grunt
QUnit Testing Framework
The new available hours (10 in total) are added to covering the AngularJS framework.

October 12th 2014:
The Design Patterns in JavaScript topic is taken away. The available hours (10 in total) are added to covering the jQuery framework.  

May 10th 2014:
The jQuery topic was splitted into two separated topics. jQuery and jQuery UI. Both topics received new subtopics.

October 25th 2015:
More topics were added to HTML5. More hours were added to AngularJS. TypeScript new part was added (10 hours). JavaScript was updated with ECMAScript 2015 topics (some topics that already exist were updated and new topics, such as Data Structures, Reflection etc. were added). More hours were added to Bootstrap. Many topics in JavaScript Libraries big topic will be self studied in order to allow us having 25 hours dedicated to AngularJS 2.X and 20 hours dedicated to jQuery, jQueryMobile and jQuery UI. The Development Tools new part was added (2 horus). Few more topics were added to the list of self studied topics.

December 29th 2015:
AngularJS 2.x gets 5 more academic hours (30 academic hours in total) in the expense of jQuery that will be covered in 20 academic hours (instead of 25).  

December 30th, 2015:
The ‘
Cross-site HTTP requests’ and the ‘FormData Object’ sub topics were added to the Ajax Fundamentals topic.