JAVASCRIPT ENGINEER BOOTCAMP
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
Programming Basics
- What is programming?
- What is programming language
- Writing source code
- Running your code
- Using an IDE
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
Coding Links
- Linking to Pages Within a Website
- Linking to Other Websites
- Opening a Link in a New Browser Window
Adding Images
- The Image Tag and Source Attribute
- Using the Width, Height and Alt Attributes
- Using Horizontal Rule
- The Break Tag
Intro To Cascading Style Sheets (CSS)
- The Style Tag
- Tag Selectors
- Class Selectors
- The Class Attribute
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
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
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
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
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
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
An Introduction
- An Introduction to JavaScript
- Manuals and specifications
- Code editors
- Developer console
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
Code Quality
- Debugging in the browser
- Coding Style
- Comments
- Ninja code
- Automated testing with Mocha
- Polyfills and Transpilers
Objects: The Basics
- Objects
- Object references and copying
- Garbage collection
- Object methods, “this”
- Constructor, operator “new”
- Optional chaining ‘?.’
- Symbol type
- Object to primitive conversion
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
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
Object Properties Configuration
- Property flags and descriptors
- Property getters and setters
Prototypes, Inheritance
- Prototypal inheritance
- F.prototype
- Native prototypes
- Prototype methods, objects without __proto__
Classes
- Class basic syntax
- Class inheritance
- Static properties and methods
- Private and protected properties and methods
- Extending built-in classes
- Class checking: “instanceof”
- Mixins
Error Handling
- Error handling, “try…catch”
- Custom errors, extending Error
Promises, Async/Await
- Introduction: callbacks
- Promise
- Promises chaining
- Error handling with promises
- Promise API
- Promisification
- Microtasks
- Async/await
Generators, Advanced Iteration
- Generators
- Async iteration and generators
Modules
- Modules, introduction
- Export and Import
- Dynamic imports
Phase 03 – Week 8 to 10 – Working With Browser & Advance JAVASCRIPT
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
Introduction To Events
- Introduction to browser events
- Bubbling and capturing
- Event delegation
- Browser default actions
- Dispatching custom events
UI Events
- Mouse events
- Moving the mouse: mouseover/out, mouseenter/leave
- Drag’n’Drop with mouse events
- Pointer events
- Keyboard: keydown and keyup
- Scrolling
Forms, Controls
- Form properties and methods
- Focusing: focus/blur
- Events: change, input, cut, copy, paste
- Forms: event and method submit
STAGE 3 ASSESSMENT
Document And Resource Loading
- Page: DOMContentLoaded, load, beforeunload, unload
- Scripts: async, defer
- Resource loading: onload and onerror
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
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.