Frontend & Full Stack Development Course Outline

HTML 5

• HTML 5
• Laying out a Page with HTML5
• Page Structure
• New HTML5 Structural Tags
• Page Simplification

• Apache Server

• HTTP, HTTP/2
• Download and Installation
• Directory Structure & Important files
• Deploying web pages on AHS
• Accessing pages from browser

• Semantic Tags

• The section Tag, The article Tag
• Outlining, Accessibility
• aside tag, detail tag, summary tag
• nav tag, header tag, footer tag

• HTML Tables

• table tag, thread tag
• tbody tag, caption

• HTML5 Forms

• Modernizr
• New Input Types
• search, tel
• url and email
• date/time input types
• number, range
• min, max, and step attributes
• color

• HTML5 New Form Attributes

• autocomplete
• novalidate

• HTML5 New Form Field Attributes

• required
• placeholder
• autofocus
• autocomplete
• form
• pattern

• New Form Elements

• datalist
• progress and meter
• HTML5 Semantics (New semantic HTML5 elements)
• HTMl5 coding conventions (Best practices, style guide
  and coding conventions)
• Add Interaction with Social Networks
• Optimize for Mobile Devices
• Use Geolocation and Maps
• Use Responsive Web Design
• Save Data Locally
• Save Data Remotely
• Consume Data from Services
• Create Progressive Web Apps
• Serve Users While Offline
• Progressive Web All the Things (PWA)

CSS 3

• The Power of CSS

• A First Example, Challenges
• Next Up

• Introducing CSS3

• What is CSS3? The History of CSS
• Box Model
• Browser Support
• HTML5

• Selectors and Pseudo Classes

• Attribute Selectors
• The Target Pseudo-Class
• UI Element States Pseudo-Classes
• Negation Pseudo-Class
• Structural Pseudo-Classes

• Fonts and Text Effects

• Fonts on the Web
• Font Services
• The @font-face Rule
• Text Shadow
• Word Wrapping

• Colors, Gradients, Background Images

• Color
• The Opacity Property
• Backgrounds
• background-origin, and background-size

• Borders and Box Effects

• Image Borders
• Rounded Corners
• Box Shadow

• Must Know

• position, float, clear, overflow, resize
• margin, padding, z-index

• More features of CSS3

• Media Queries

• Targeting Widths and Devices with CSS3 Media Queries
• Responsive Images and the viewport Metatag
• Writing media queries for desktop browsers
• Writing media queries for tablet viewports
• Writing media queries for mobile devices
• Writing media queries for extra small screens
• Writing media queries for printers

• Responsive Building Blocks

• Fluid Grids
• Fluid Images/Media
• Media Queries
• Breakpoints

• Layout Patterns/Responsive Patterns

• Creating Fixed Width Layouts???
• Mostly Fluid Pattern, Column Drop Pattern
• Layout Shifter Pattern, Mondrian Pattern, Basic Gallery Pattern

• Implementing an Adaptive User Interface

• Creating a Print-Friendly Stylesheet
• Adapting Page Layout To Fit a Different Form Factor

• Adaptive Design

Responsive + Adaptive = Awesomeness

• Implementing CSS3 in the “Real World”

• Stuff That Ain’t (Strictly) CSS, but Sure Is Useful
• jQuery
• HTML5
• Modernizr, Polyfills, Preprocessors
• Frameworks and Grid Systems
• Going Forward/Additional Resources
• What’s Next? Online Resources. Get Involved

• CSS Best practices and performance tuning

• CSS3 Examples

• Designing beautiful toolbars, menus, navbars, fixed bars
• Designing floating right side bars
• Applying realistic animations on ui elements

JavaScript

• Introduction to JavaScript

• What JavaScript Is? What JavaScript Is Not?
• What JavaScript Is Used For?
• JavaScript and Its Place in a Web Page.

•  The <SCRIPT> tag

•  Internal script,  External script
•  <noscript> tag

•  Lexical Structure

•  Character Set,  Case Sensitivity
•  Optional Semicolons,  Valid Identifiers
•  Reserved Word

• JavaScript Building Blocks: Data Types, Literals, and Variables

• Data Types

• Primitive Data Types
• Composite Data Types

• Variables

• Valid Names
• Declaring and Initializing Variables
• Dynamically or Loosely Typed Language
• Scope of Variables
• Concatenation and Variables

• Constants

• Dialog Boxes

• Interacting with the User

• The alert() Method
• The prompt() Method
• The confirm() Method

• Operators

• About JavaScript Operators and Expressions

• Assignment
• Precedence and Associativity

• Types of Operators

• Arithmetic Operators
• Shortcut Assignment Operators
• Autoincrement and Autodecrement Operators
• Concatenation Operator, Comparison Operators
• Logical Operators, The Conditional Operator

• Data Type Conversion

• The parseInt() Function
• The parseFloat() Function
• The eval() Function

• Under Certain Conditions

• Control Structures, Blocks, and Compound Statements
• Conditionals

• if/else, if/else if, switch

• Loops

• The while Loop, The do/while Loop
• The for Loop, The for/in Loop
• Loop Control with break and continue
• Nested Loops and Labels

• Intermediate JavaScript

• Functions

• What Is a Function?

• Function Declaration and Invocation
• Return Values
• Anonymous Functions as Variables
• Recursion
• Functions Are Objects

• Function arguments
• Optional Arguments
• Argument list and ‘arguments’ identifier

• Function: Advanced concepts

• Function as Data
• Anonymous function
• Callbacks
• Self-invoking function
• Inner (Private) Functions 
• Functions that Return Functions 
• Function: Rewriting itself

• Variable Scopes

• Function Level
• No Block Level
• Global Level

• Objects

• What Are Objects?

• Objects and the Dot Syntax
• Creating an Object with a Constructor
• Properties of the Object

o    Methods of the Object

•  Objects Categories

• Native objects (String, Number, Array, Image, Date, Math, etc.)
• Host objects   (window, document, forms, etc.)
• user-defined objects

• JavaScript Core Objects

• What Are Core Objects?
• Array Objects

• Declaring and Populating Arrays
• Array Object Properties
• Associative Arrays
• Nested Arrays

• Array Methods
• The Date Object

• Using the Date Object Methods
• Manipulating the Date and Time
• Customizing the Date Object with the prototype Property

• The Math Object

• Rounding Up and Rounding Down
• Generating Random Numbers

• Wrapper Objects (String, Number, Function, Boolean)

• The String Object
• The Number Object
• The Boolean Object
• The Function Object

• Handling Events

• Introduction to Event Handlers
• The Inline Model for Handling Events

• HTML and the Event Handler
• Setting Up an Event Handler
• Return Values, JavaScript Object Methods and Events

• Handling a Window or Frame Event

• The onLoad and onUnLoad Events
• The onFocus and onBlur Event Handlers
• The onResize Event Handler

• Handling Mouse Events

• How to Use Mouse Events
• Mouse Events and Images—Rollovers
• Creating a Slideshow with Mouse Events

• Handling Link Events

• JavaScript URLs

• Handling a Form Event

• Object Oriented JavaScript Overview

• Inheritance, Encapsulation, Abstraction, Polymorphism

• Objects

• JSON and Literal Objects

• Namespacing

• Global Namespace pollution
• window context
• Global Abetment Pattern
• Creating user defined context

• Change the Scope

• The call() method
• The apply()method
• The with statement 

• Handling “this” 

‘this’ in borrowing method; in callback; in global scope

• Closures

• Overview
• Nested Functions as Closures 
• Private properties with closures
• Closures in timers
• Closures as calllbacks

TypeScript

Introduction:

• Why Learn TypeScript?
• Course Breakdown
• Basics

Getting Started:

• Installing TypeScript
• Compiling Your First TypeScript Program
• Understanding TypeScript Errors
• Installation & Basic Use

Basic TypeScript:

• The Type System
• Basic Types
• Interfaces
• Classes
• Inheritance
• Modules

TypeScript Implementation:

• Automatically Compile TypeScript with Grunt

Building an App with TypeScript

Angular

• Introduction
• Describe the Single Page Application Lifecycle
• Demonstrate creation of angular application
• Displaying data using interpolation, ngIf and ngFor
• Using pipes to format number and date

Angular(Components and  Routing)

• Creation of component
• Event handling and two way binding
• Introduction to Routing

Angular (Forms)

• Implementation of forms using Template Driven Forms
• Implementation of forms using Reactive Forms with validations

Angular (Component Interaction)

• Implementation of interaction between components

Angular Testing

• Demonstrate karma test case creation with DOM reading

Angular (Services and Guards)

• Implementation of service
• Protecting routes with Auth Guards
• using Service and HttpClient to invoke web service

Node JS

• Why Node.js
• Introduction to node
• Advantages of node.js
• Differences between JavaScript and node.js
• Starting Node
• Node REPL
• Installing Node Package Manager (NPM)
• Working with NPM
• Generating package.json
• Working with node
• Node Fundamentals
• Using Core Modules
• FS  
• OS Module
• HTTP Module
• File System Access
• Synchronous vs. asynchronous I/O
• Path and directory operations
• __dirname and __filename
• Asynchronous file reads and writes
• Events Module
• Working with Events
• Events Object
• EventEmitter Class
• Creating own Event Emitter
• Emitting events
• Events subscription
• Events unsubscription
• Process Events
• Streams –
• Reading from Stream
• Writing to Stream
• Piping Streams
• Working With Web sockets
• Getting Started
•  Adding Socket.io To Your App
•  Exploring The Front-end
•  Sending Live Data Back & Forth
•  Creating The Front-end UI
•  Showing Messages In WebApp
• Communication with Databases
• Understanding NoSQL DB support
• Creating collections
• Inserting documents in collection
• Fetching documents from collection
• Using Socket.IO
• Creating Socket Server
• Creating Socket Client
• Continuous/Duplex communication

ReactJS

• Introduction to React
  
• What problem(s) does React solve? 
  • Traditional, pre-JS web applications 
  • Late-model, MV* and JS web applications 

React’s solutions 

• Single-page apps 
• View libraries 
• Helper libraries 

React development environment

• Simplicity:create-react-app
• Build-your-own: an overview 

Hello world 

• Your  first React component 
• Using React within a page 
• Making some basic changes 
• React and JSX 

JSX

• What is JSX? 
• Using JSX 
• Using React with JSX 
• Using React without JSX 
• Precompiled JSX 

Components
Types of components 

• Functional components 
• Class-based components 
• Why use one or the other? 

Props and state 

• Passing in properties 
• Limitations of properties 
• Using state 
• When to use state, when to use props 

Event handling 

• React event handling 
• Synthetic events 
• Reactvs DOM event handling 

Children 

• Components within components 
• Known children and unknown children 
• Testing child components 

Parent-child component communication 

• Communication from parent to child 
• Communication from child to parent 
• Container presentational  components 

React Component Lifecycle 

• Overview 
• Startup and mounting
• Updating
• Unmounting
• Calling lifecycle methods in tests
• Error handling and error boundaries 

Intermediate component usage 

• PropTypes 
• Typing and React 
• Using PropTypes 
• PropTypes in production 

Asynchronous data 

• When should asynchronous fetching be done? 
• What challenges does async offer? 
• Asynchronous best practices 

Lists of data 

• Iterating over a list 
• The key property 
• Sorting data 

Forms

• Controlled vs uncontrolled components 
• What does React now about your form field? 
• Does React control your form field? 
• When does React find out about changes to your form field? Form field types
  Controlling a text field 

Other form fields

Getting data out of a form

Working with form data in tests 

• Introduction to routing
• What problem is routing trying to solve? 
• How does routing solve this problem? 
• Tying components to URLs 
• Passing parameters via the URL 

Routing software 

• React-router 
• Other routers
• Simple router example 
• More complex routing o Top-level routing 
• Routing at the top of your application 
• Allowing other parts of the application to manage routing 

Redirects 

React-router objects 

• match 
• history 
•  location
• Routing organizational techniques 

Hooks

• What are hooks, and what problem do they solve? 
• Defined hooks 
• The state hook 
• The effect hook 
• Rules of hooks 
• Using hooks today 
• Advanced React 

Understanding and optimizing reconciliation 

• Best practices for React reconciliation 
• Recognizing common issues 
• Making improvements 
• React.js Best Practices 

Refs 

• What’s a ref? 
• What problem does it solve? 
• How can I use refs? 
• The challenges of testing refs 

Context 

• What is the context API? 
• Is the context API public? 
• How to use the context API 

GraphQL 

• Introduction to GraphQL 
• Creating a GraphQL server 
• Creating a GraphQL Service 
• Defining the GraphQL Schema 
• Defining the GraphQL Resolvers 
• Working with GraphQL Queries,Mutations 
• Consume GraphQL Service with Axios 
• Using GraphQL with Redux Data Store 
• Updating the Server