Front End Development 

This course focuses on the relevant classic web technologies for developing the client side of web applications and hybrid ones. Whether your target is developing a cross platform hybrid mobile application, a single page web application or a classic simple one this course is for you. This course focuses on the use of JavaScript, the jQuery library, the bootstrap framework and on HTML5. The course includes 90 academic hours organized in 5 parts, that take place in class, and 360 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. The entire course is captured on video in order to allow the participants to go over the material (effectively) in between the meetings. In addition, in order to assist those who cannot attend (as a result of military reserve or travelling abroad) the course is delivered online (sharing trainer computer using the gotomeeting platform). This way, the students can attend remotely.


Fundamental Topics (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 the very basic topics in procedural programming, and the basics of HTML and CSS. (10 academic hours)

Software Development in JavaScript (2th Part)

This is the main part of the course. It covers the JavaScript programming language and is essential for the rest of the course. You cannot learn HTML5 nor any of the other topics this course includes without knowing JavaScript. (30 academic hours)

Responsiveness and Accessibility (3rd Part)
This part focus on the development of accessible web applications and on the development of responsive web pages. (5 academic hours)

JavaScript Libraries (4th Part)

This part focuses on jQuery, today most popular JavaScript library. The other libraries covered in this part of the course include jQueryMobile and Twitter Bootstrap. This part includes more than 40% practice in each meeting. (30 academic hours)

The HTML5 Ecosystem (5th 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).


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

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

2

Fundamental Topics

Introduction to Procedural Programming
Arrays, Functions

HTML Fundamentals
Forms


Introduction to Object Oriented Programming
Objects

CSS Basics
Introduction

HTML Style Guide
Introduction
Guidelines Overview

CSS Style Guide
Introduction
Guidelines Overview

Flexbox Basics
Introduction
Basics

3

JavaScript

JavaScript Programming
Introduction
Basic Elements

4

JavaScript

JavaScript Programming
Object Oriented Programming
Debugging

Array

Date

5

JavaScript

JavaScript Programming

Object Oriented Programming
Boolean

Number

String

Math
Functions
Anonymous Functions

Global Object

Window

Location

Navigator

Screen

History

6

JavaScript

JavaScript Programming
Document Object Model
Events Handling
Errors Handling

7

JavaScript

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

Lambda Expressions
CodeLinting
Data Structures
Promises
Service Workers

8

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

Fetch API Basics
Introduction
Basics
Headers

9

Responsiveness 









Accessibility

Responsive Web Design
Introduction
Navigation
Media Queries
Templates
Images
Layout
Videos

Accessibility
Introduction
Focusable Elements
Semantic Web Pages
Styling

10

JavaScript Libraries

jQuery
Introduction
Basics
Ajax
Animation
Events
Manipulation
Selectors

11

JavaScript Libraries

jQuery
Traversing
Form
CSS

12

JavaScript Libraries

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

13

JavaScript Libraries

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

14

JavaScript Libraries

Twitter Bootstrap
Introduction
Jump Start
Components
Layout
Images

15

JavaScript Libraries

Twitter Bootstrap
Introduction
Jump Start
Components
Layout
Images

16

HTML5

Introduction to HTML5

Introduction
Multimedia

Video Capturing
Geo Location
Offline Storage
Canvas 2D Graphics
Canvas 3D Graphics

Communication

17

HTML5

Introduction to HTML5
Web Workers
IndexedDB
Local Files Access
Web Sockets

18

HTML5

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


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.

October 9th, 2017:
The cover for many small topics was shrinked in favor of a better coverage for Angular 4. You now get 10 academic hours for TypeScript and 40 academic hours for Angular 4.

October 10th, 2017:
The introduction hours were shortened to 8 (instead of 10), and the CSS hours were shortened to 2 (instead of 10). 10 more academic hours were added to Angular!

April 7th, 2018:

The course was split into two courses. Angular Fundamentals and Front End Development.

July 4th, 2018:
The ‘Flexbox Basics’, ‘Fetch API Basics’, ‘Responsive Web Pages’ and ‘Web Accessibility’ topics were added. The ‘Promises’ and the ‘Service Worker’ sub topics in JavaScript was added.