Training Schedule
- Course Duration: 144 Hours
- No of Class: 72
- Duration: 6 months
- Class time: Notify after admission
- Class Start: Notify after admission
If innovation and creativity in technology attracts you and developing impressive webpages are your passion, then this specialization is for you. Front-end developers are skilled professionals who are experts in combining the art of designing with the science of programming. The skills acquired in this field presents copious opportunities for individuals like you in the field of web application development. This Specialization transforms learners with no programming background into front-end Web developers who can build highly engaging consumer-facing, rich front-end Single Page Application (SPA).
WHAT YOU WILL LEARN:
- Structure and style mobile friendly web pages using HTML5, CSS3 and Tailwind CSS
- Add interactive behavior to web pages using JavaScript that allows access to modify the web page content while being viewed on the browser
- Add interactive behavior to web pages using JavaScript that allows access to modify the web page content while being viewed on the browser
- Enhance the angular web application quickly with rich user experience, which is robust, easy to customize and accessible using Tailwind CSS utility framework
Course Outline:
- Javascript Module
- Typescript Module
- AlpineJS Module
- Tailwind CSS Module
Angular Module
- Angular Basics
- Modules and Components
- Data Binding in Angular js
- RxJS
- Directives in Angular js
- Dependency Injection in Angular js
- Routing
- Forms
- Reactive Forms
- Pipes
- NgRx State Management
- HTTP Requests
- Authentication
- Angular Modules
- HTTP Client
- Animations
- Unit Testing
- Android apps development
- Fundamentals
- Conditionals
- Functions
- Scope
- Arrays
- Dates
- Iterators
- Objects
- Events
- Class
- Promises, Async/Await
- Error Handling
- Module, Export, Import
- JS Mistakes
- Best Practices
- JS Performance
- Introduction
- Installation & A Basic Alpine Component
- Dropdown
- Modals and x-ref
- Sidebar
- Tabs
- Image Selection
- Scroll Detection
- Accordion Toggle and loops
- fetch and x-init
- Todo App and x-model
- Transitions: Dropdown
- Transitions: Modal
- Transitions: Sidebar
- Easier Transitions
- Introduction Tailwind CSS
- Background Classes & Shades
- Element Sizing & Tailwind’s Numbering System
- Padding & Margins
- Text Styling
- Borders
- Display Modes
- Flexbox
- Responsive Design
- Hover Modifier
- Focus Modifier
- Combination Modifier
- Other Utilities
Final Course Project – Landing Page
- What is Angular
- Angular CLI
- Node JavaScript Introduction
- Setup a Project
- Setup Node js with angular
- What is bootstrap
- Create Your Fist App
- What is Component in Angular
- What is Module in Angular
- Create and Start Component
- Why Components are important
- How we create a component
- Create Component using CLI
- What is nesting Component
- What is Component Template
- What is Data Binding
- Splitting Application into Component
- String Interpolation
- What is Property Binding
- Difference between Property Binding and String
- Interpolation
- Binding with Custom Events
- What are Binding Properties and Events
- Two Way binding
- Combine Forms with Data binding
- Custom Properties
- What is Encapsulation
- How to Use Local Reference in Templates
- Template Access and DOM
- Component Lifecycle
- What is RxJS
- Operators
- Observable
- Subscription
- Subject
- Scheduler
- What is Directives
- Using Output Data Conditionally
- What is nglf and else condition
- Output List
- Styling Element with ngStyle
- How to apply css class dynamically with angular js
- How to Create Basic Attribute Directive
- What is Renderer
- What is HostBinding and HostListener
- Directive Properties
- ngSwitch
- What is Dependency Injection
- What is Services
- Logging Service and Injection
- Create Data Service
- Instance of Services
- Insert Service into Services
- How to use service in Cross Component
- What is Hierarchical Injector
- What is Routing?
- Loading of Routes
- Navigation and it path
- Styling of Router Links
- Relative Path Navigation
- Define parameter in Routing
- Fetch Routing Parameter
- Observables
- Passing & Retrieving Parameters & Fragments
- Nested Routing
- Config Query Parameters
- Redirection Routes
- Route configuration
- Route Guards
- Protect Routes with canActivate
- Navigation Controlling
- Static Data in Route
- Location Strategies
- What is Forms and how do we handle it?
- Reactive Approach
- Template Driven
- Create Template Driven Forms
- What is Registering Control
- Use and Submit of Forms
- Access of Forms
- How to add validation in use input
- Build-In Validation
- HTML5 Validation
- Output Validation and Error Messages
- Two Way Binding
- Grouping
- Radio Button Handling
- Patch Forms Values
- Resetting Templates form Forms
- What is Reactive Forms
- Create Reactive form through code
- Syncing of HTML and Form
- Adding Validation
- Sumit Forms
- Grouping
- Form Control Arrays
- Custom Validators
- Relative Forms
- Async validation
- Value changes and Reacting to status
- What is Pipes in Angular
- How we use pipes
- Chaining Multiple pipes in angular
- parameterizing a pipe
- Filter Pipe
- Impure & Pure Pipe
- async Pipes
- What is NgRx
- Store
- Action
- Reducer
- Selector
- Effect
- What is HTTP Requests
- How it work
- How to send requests
- Adjusting Request Headers
- How to handle Get and Put Request
- Catching HTTP Error
- async with HTTP Requests
- What is Authentication
- How Authentication Work
- Introduction to JSON Web Tokens
- Creating Page and Route
- Firebase SDK
- User Signing UP and In
- Sending Token & Requiring
- Authentication Status
- How to add Logout button
- Protection & Redirection of Route
- What is idea behind Modules
- What is feature Modules and how we create it
- What is App Modules
- Registering Routes in Feature Modules
- What is Shared Module and how we create
- Create the Auth Feature module
- What is Lazy Loading
- How to Modules & Services works
- What is Core Module
- How to Create Basic Core Module
- AoT Compilation with CLI
- What is HttpClient and how we unlock it
- Request Configuration with Response
- Request Events
- Set up Headers
- HTTP Parameters
- Progress
- What is Interceptors
- Modify Request in Interceptors
- Multiple Interceptors
- What is Angular Animations
- Triggers and State
- Switch between States
- Basic and Advanced Transitions
- What is void state
- Key frames in animation
- Grouping
- Animation Callback
- What is Unit Testing
- How to Analyze CLI Testing Setup
- Running Test with CLI
- Components and dependencies
- Async Tasks
- Adding Component with tests
- Difference between Isolated and Non-isolated Tests
- Introduction
- What is Ionic?
- Building your First Ionic App
- Deploying to an android Device
- Deploying to an IOS Device
- Components
- Lists
- Pages
- Navigation
- Modals
- Icons
- Inputs
- Buttons
- Platform Service
- Plugins
- AppVersion
- Contacts
- Camera
- Geolocation
- Google Maps
- Theming Ionic Apps
- Overriding Ionic Variables
- Custom CSS
- Page-specific Styles
- Icon and Splash Screen
- Apply Scrum your projects
- Deliver value to the business with Scrum
- Deliver projects faster with Scrum
- Master the different Scrum concepts
- Master the different Scrum tools
- Master the Scrum Values, Scrum Principles and Scrum Pillars
- Understand the history of Scrum
- Understand the differences between Scrum and traditional Project Management or Waterfall
- How Git Works
- Branching and Commits
- Workspace, Staging, Local, and Remote
- Installing Git on your Machine
Git Setup (Login) - Cloning the Repository
- Useful Git Commands
- git status
- git branch
- git fetch
- git pull
- git checkout
- git add
- git commit
- git push
- git log
- git rebase
- git stash
- git reset
- git merge
- git pull request
Applied Learning Project
In this Project, learners will develop frontend solutions for the given problem statements using Angular. They will build interactive, responsive, and testable Single Page Applications (SPAs) using the skills acquired from the HTML5, CSS3, JavaScript and Angular courses. Learners should follow the design principles and best practices while developing solutions to create products that meet the industry-standard.
Hands-on Project
Every Specialization includes a hands-on project. You’ll need to successfully finish the project(s) to complete the Specialization and earn your certificate. If the Specialization includes a separate course for the hands-on project, you’ll need to finish each of the other courses before you can start it.
Projects 1 :
Interactive Website with Tailwind CSS and AlpineJS
Projects 2 :
Hybrid Mobile App for IOS and Android
Projects 3 :
Full Functional E-Commerce Application
Earn a Certificate
When you finish every course and complete the hands-on project, you’ll earn a Certificate that you can share with prospective employers and your professional network.
Training Features
Shareable Certificate
Earn a Certificate upon completion
Online courses
Start instantly and learn from anywhere.
Flexible Schedule
Set and maintain flexible deadlines.
Beginner Level
No prior experience required.
Approximately 7 months to complete
Suggested pace of 4 hours/week
Quiz
Quiz features includes all the information .