JAVASCRIPT ENGINEER BOOTCAMP

                                          English and Arabic 

5 Days Course

OVERVIEW

Learn JavaScript!

For learning any programming language easily, you must be familiar with basic technical terms and tricks. This course is aimed at complete beginners to the subject we do assume that you have some knowledge of HTML and a little CSS. Therefore we are starting the program with HTML & CSS fundamentals.

This course will teach you advanced JavaScript from the ground up. It features a systematic walk-through of the most important concepts of the language. This course will take students who have little to no experience with the JavaScript Programming language and get them up and running with core JS principles. We will begin by running JavaScript in our command line, learning to declare variables, control the flow of a program using conditional statements, declare arrays, create functions and write loops to iterate behavior. We will then work through some of the more difficult concepts in the JavaScript language like objects, hoisting, and scope. We will dive into the most current JavaScript syntax, using Es6, and discover the value of these updates to the language. We will then learn to use JavaScript to interact with the browser and conclude by writing a fully functioning program in the browser.

WHAT YOU WILL LEARN

  • Relevant terms and concepts
  • Learn enough of the DOM API to bend it to your will
  • Make communication between the browser and your server possible
  • Leverage closures
  • How JavaScript’s object model differs from the model classical object-oriented programming languages
  • What jQuery is and how to add it to your applications
  • Use jQuery to select complex sets of elements from the DOM
  • Develop rich web pages that respond to user interaction
  • Interact with your server-side code using Ajax
  • Explore a wide variety of plugins and learn how to write your own
  • Test your applications to make sure your JavaScript is as solid as the rest of your code.

COURSE STRUCTURE AND AGENDA

STAGES
DESCRIPTION
DURATION
Phase 1
Programming fundamentals
2 Week
Phase 2
JAVASCRIPT language
5 Week
Phase 3
Working with browser & advance JAVASCRIPT
3 Week
Phase 4
Capstone project (best practices and use cases from various industries & project presentation)
2 Week
 
Phase 01 – Week 1 & 2 – Programming fundamentals
Module – 01

Programming Basics

  • What is programming?
  • What is programming language
  • Writing source code
  • Running your code
  • Using an IDE
Module – 02

Coding Basics: Introduction To HTML Syntax

  • Headings, Paragraphs, and Body Tags
  • Strong and EM Tags
  • The Doctype Declaration (DTD)
  • The Lang Attribute
  • Meta Tag: The Unicode Character Set
Module – 03

Coding Links

  • Linking to Pages Within a Website
  • Linking to Other Websites
  • Opening a Link in a New Browser Window
Module – 04

Adding Images

  • The Image Tag and Source Attribute
  • Using the Width, Height and Alt Attributes
  • Using Horizontal Rule
  • The Break Tag
Module – 05

Intro To Cascading Style Sheets (CSS)

  • The Style Tag
  • Tag Selectors
  • Class Selectors
  • The Class Attribute
Module – 06

The Div Tag And Basic Page Formatting

  • Understanding Divisions
  • Setting a Div Width
  • Adding Padding Inside a Div
  • CSS Background-Color
  • CSS Borders
  • CSS Shorthand and the DRY principle
  • Content Structure with Multiple Divs
  • Assigning IDs to Divs
  • Adding Images
  • Organizing Content Into Divs
  • Tagging Headings
Module – 07

The Box Model And Background-Images

  • Using ID Selectors
  • The Background-Image Property
  • The Box Model
  • Padding and Margin Spacing
  • Setting Div Width
  • Setting Page Defaults for Font Styles
  • Adding Images
  • Adding an Image Title
  • Floating Images
  • Class Selectors
  • Margins

 

STAGE 1 ASSESSMENT

Module – 08

IPv4 Subnetting

  • Purpose of Subnetting
  • Subnet Communications
  • Subnet Mask Rules
  • The Art of Subnetting
  • The Science of Subnetting
  • Calculating Subnets
  • Four Key Addresses
  • Implementing the Plan
  • Subnetting Case Study
  • Variable-Length Subnet Masking
  • Module Review and Discussion Questions
Module – 09

Links & Navigation

  • Anchor Tags and Relative URLs
  • External Links (Using Target Attributes)
  • Spambot Resistant Email Links
  • Linking Within a Page (Named Anchors)
  • Styling the Anchor Tag
  • Pseudo-Classes
  • Creating CSS Navigation Styles
  • Using Descendent (Nested) Selectors
  • Managing White-Space and Wrapping Issues
Module – 10

Shared CSS And Centering Content

  • Moving Embedded Styles into an External CSS File
  • Sharing Styles Across a Site
  • Text-Align
  • Center Divs
  • Fixing “Page Shift” with Overflow-y
  • Planning a Two-Column Layout
  • Linking to an External Style Sheet
  • Using Floats to Position Divs
  • Using a Content Wrapper Div
  • Clearing Floated Elements
  • Margins vs. Padding
  • CSS Shorthand: TRBL
  • Styling Anchor Tags
  • Styling the Hover Pseudo-Class
  • Using Descendent Selectors
  • More CSS Borders
  • Managing White-Space and Wrapping Issues
  • Fixing Spacing Around Images
  • Moving Borders with Padding
Module – 11

BROWSER DEVELOPMENT TOOLS

  • Fine-Tuning Lists, Paragraphs, and the Footer
  • More Descendent (Nested) Selectors
  • Styling Lists
  • Organizing Styles
  • Using Browser Developer Tools
  • Opening the DevTools in Chrome
  • Editing HTML in the DevTools Elements Tab
  • Enabling, Disabling and Editing CSS in the DevTools
  • Using DevTools to Fine-Tune Your CSS
  • FTP Uploading to a Live Website
  • Creating a FORM
  • Submitting Form Data to a Server-Side Script

Phase 02 – Week 3 to 7 – JAVASCRIPT language

Module – 11

An Introduction

  • An Introduction to JavaScript
  • Manuals and specifications
  • Code editors
  • Developer console
Module – 12

JavaScript Fundamentals

  • Code structure
  • The modern mode, “use strict”
  • Variables
  • Data types
  • Interaction: alert, prompt, confirm
  • Type Conversions
  • Basic operators, maths
  • Comparisons
  • Conditional branching: if, ‘?’
  • Logical operators
  • Nullish coalescing operator ‘??’
  • Loops: while and for
  • The “switch” statement
  • Functions
  • Function expressions
  • Arrow functions, the basics
  • JavaScript specials
Module – 13

Code Quality

  • Debugging in the browser
  • Coding Style
  • Comments
  • Ninja code
  • Automated testing with Mocha
  • Polyfills and Transpilers
Module – 14

Objects: The Basics

  • Objects
  • Object references and copying
  • Garbage collection
  • Object methods, “this”
  • Constructor, operator “new”
  • Optional chaining ‘?.’
  • Symbol type
  • Object to primitive conversion
Module – 15

Data Types

  • Methods of primitives
  • Numbers
  • Strings
  • Arrays
  • Array methods
  • Iterables
  • Map and Set
  • WeakMap and WeakSet
  • Object.keys, values, entries
  • Destructuring assignment
  • Date and time
  • JSON methods, toJSON
Module – 16

Advanced Working With Functions

  • Recursion and stack
  • Rest parameters and spread syntax
  • Variable scope, closure
  • The old “var”
  • Global object
  • Function object, NFE
  • The “new Function” syntax
  • Scheduling: setTimeout and setInterval
  • Decorators and forwarding, call/apply
  • Function binding
  • Arrow functions revisited

 

STAGE 2 ASSESSMENT

Module – 17

Object Properties Configuration

  • Property flags and descriptors
  • Property getters and setters
Module – 18

Prototypes, Inheritance

  • Prototypal inheritance
  • F.prototype
  • Native prototypes
  • Prototype methods, objects without __proto__
Module – 19

Classes

  • Class basic syntax
  • Class inheritance
  • Static properties and methods
  • Private and protected properties and methods
  • Extending built-in classes
  • Class checking: “instanceof”
  • Mixins
Module – 20

Error Handling

  • Error handling, “try…catch”
  • Custom errors, extending Error
Module – 21

Promises, Async/Await

  • Introduction: callbacks
  • Promise
  • Promises chaining
  • Error handling with promises
  • Promise API
  • Promisification
  • Microtasks
  • Async/await
Module – 22

Generators, Advanced Iteration

  • Generators
  • Async iteration and generators
Module – 23

Modules

  • Modules, introduction
  • Export and Import
  • Dynamic imports

Phase 03 – Week 8 to 10 – Working With Browser & Advance JAVASCRIPT

Module – 24

Document

  • Browser environment, specs
  • DOM tree
  • Walking the DOM
  • Searching: getElement*, querySelector*
  • Node properties: type, tag and contents
  • Attributes and properties
  • Modifying the document, Styles and classes
  • Element size and scrolling, Window sizes and scrolling
Module – 25

Introduction To Events

  • Introduction to browser events
  • Bubbling and capturing
  • Event delegation
  • Browser default actions
  • Dispatching custom events
Module – 26

UI Events

  • Mouse events
  • Moving the mouse: mouseover/out, mouseenter/leave
  • Drag’n’Drop with mouse events
  • Pointer events
  • Keyboard: keydown and keyup
  • Scrolling
Module – 27

Forms, Controls

  • Form properties and methods
  • Focusing: focus/blur
  • Events: change, input, cut, copy, paste
  • Forms: event and method submit

 

 

STAGE 3 ASSESSMENT

Module – 28

Document And Resource Loading

  • Page: DOMContentLoaded, load, beforeunload, unload
  • Scripts: async, defer
  • Resource loading: onload and onerror
Module – 29

ReactJS

  • React Components
  • React State and Props
  • React Event Handling
  • Routing in React
  • React Flux
  • Styling React
  • Features of ECMAScript 6
  • Introduction to Redux
  • React – Redux Node Package
 
Module – 30

AngularJS

  • Single page applications
  • TypeScript & ESNext
  • Decorators
  • Component Decorator
  • Angular Routing
  • Dependency Injection and Directives
  • Forms in Angular
  • Using third party libraries
  • Features of typescript and Angular
  • NgModule and Ng Unit Testing
  • Free Course
  • Starting with Angular 4
  • Angular 4 Components
  • Angular 4 Routing
  • Angular 4 Services
  • Angular 4 Modules
  • Styling Angular 4
  • Directives and Pipes
Phase 04 – Week 11 & 12 – Capstone project using agile methodologies

Unique Project that can be developed with JavaScript

  • Budget tracker project
  • Weather project
  • Clock project
  • Contact form project
  • Quiz project

Each team first creates a minimally viable product to fulfill mandatory technical elements, then iterates based on feedback, refining and adding additional features. At the end of the boot camp, teams present their projects to the Management & External Observer.

 

FINAL ASSESSMENT