Frontend Web Developer with Angular 8

Course details

• As a front-end developer, you should know HTML, CSS, JavaScript and at least one of the popular JavaScript frameworks/libraries that are used for building client apps, including Angular, React and Vue.

• HTML, CSS and JavaScript (40 Hours)
• Angular 8 (40 Hours)
• Bootstrap (8 Hours)

• Web development environment
• Web design and development workflow
• Web technologies

• HTML History
• HTML Document/Page Types
• Tags, attributes, Doctypes
• HTML Forms and Lists
• Module 3: CSS
• CSS Fundamentals
• CSS properties and Methods
• CSS Floats and Layouts
• CSS Inheritance

• JavaScript Values, variables, operators
• Type Conversions
• Arrays
• Conditional Statements
• Objects
• Loop Statements

• Tags in HTML5
• Form handling and validations
• Data Storage
• Web SQL and indexed database
• HTML5 Input Types
• HTML Form Attributes
• Embedding audio and video
• Geolocation API
• Canvas API

• CSS3 properties
• CSS3 Animations
• CSS3 Layouts
• Rounded and Elliptical Borders
• Box Shades
• Multiple background images

• What is Object Oriented JavaScript?
• DOM Manipulation
• Understanding DOM
• DOM methods and events
• Inner functions, closures
• Anonymous functions
• Immediate functions
• Ajax

• Introduction to jQuery
• Selectors
• Events
• Hide/Show
• Fade/Slide
• Animate
• Call-backs
• Chaining
• CSS Classes
• jQuery css()
• Dimensions
• Traversing
• Ancestors
• Descendants
• Siblings
• Filtering
• Ajax in jQuery
• DOM manipulation using jQuery
• jQuery Filtering

• User Experience similar to a Desktop Application
• Productivity and Tooling
• Performance
• Community
• Full-featured Framework
• Platform for Targeting Native Mobile not just Web Browsers

• What is Typescript
• Why Typescript
• Setup and installation
• IDE support
• Scoping using Let and Const Keywords ( ES6 )
• Template Literals ( ES6 )
• Spread Syntax and Rest Parameters ( ES6 )
• Destructuring ( ES6 )

• Type inference
• Type Annotations
• Number
• Boolean
• String
• Array
• Tuple
• Enum
• Any
• Void
• Null and Undefined
• Never (Typescript 2)

• Using types in functions
• Function as types
• Optional and default parameters
• Arrow functions

• Inheritance
• Access modifiers
• Getters and setters
• Readonly & static

• Optional properties and methods
• Strict structural contract
• Extending interface
• Implementing interface

• Introduction
• Import
• Export
• Default

• Angular CLI
• Anatomy of the project
• Debugging Angular apps
• Working with Augury

• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

• Why modules
• How to create modules
• Built in modules
• Root Module
• Feature module

• @ Component decorator
• Component configuration object
• Custom components
• Component with templates
• Inline
• External
• Component with Styles
• Inline
• External

• HTML as template
• Data binding
• Interpolation
• Property Binding
• Event Binding
• Two way binding
• Template expressions
• Template syntax
• Attribute, class and style bindings
• @Input()
• @Output
• Template reference variables
• Safe navigation operator

• Built-in directives
• Structural directive
• Attribute directive

• Built-in pipes
• @Pipe decorator

• @angular/forms library
• Template driven forms
• Form and field validation
• Validation check with ng-pristine,ng-dirty, ng-touched, ng-untouched, ng-valid, ng-invalid
• Show and hide validation error messages
• Form submission with ngSubmit
• Reactive/ Model drive forms
• ReactiveFormsModule
• FormGroup, FormControl classes
• FormBuilder for easy form building
• Validations using Validators
• Setting form model using setValue and patchValue
• Use FormArray to build repeated form controls or form groups

• Why DI
• @Injectable decorator
• Custom service development
• Registering the service with NgModule using providers key
• Provider Types
• Class
• Factory
• Value

• @angular/router library
• Configure routes
• forRoot and
• RouterOutlet, RouterLink, RouterLinkActive
• Nested Routes
• Parametrized routes
• Route guards

• Observable interface
• Streams
• Operators
• Subscription
• Subject
• Schedulers

• Setup installing the module
• Making a request for JSON data
• Typechecking the response
• Error handling
• Sending data to the server
• Making a POST request
• Configuring other parts of the request

• Testing in Typescript
• Testing Component
• Testing Service/Provider
• Testing Pipe

• Manually
• Using the Angular CLI with Ahead-Of-Time (AOT) Compilation and Tree-Shaking (removing unused library code)

• Introduction
• Bootstrap Library
• Container Class
• Designing in Grids
• Typography
• CSS and HTML
• JavaScript Components