Web Designing with Angular


  • Batch Timings :
  • Starting Date :

Course Overview

Complete Web Designer Training is a complete package for those who are crazy about designs. Bill Gate said once “If you can’t make it godd, at least make it look good”. All those websites which attract you at very first look, this training helps you how to make it. Everything from HTML,CSS,JavaScript,JQuery covered to its atmost depth. Complete Web Design Training make sure that you get professional in designing the awesome looking web pages and yes, we make sure that your pages are responsive(renders according to your mobile phone screen size).

Angular is an advanced client-side framework based on the MVC pattern that allows developers to extend the HTML vocabulary and make the written code much more expressive and readable.

COURSE FEATURES

  • Resume & Interviews Preparation Support
  • Hands on Experience on One Live Project.
  • 100 % Placement Assistance
  • Resume Preparation
  • Interview Preparation
  • Multiple Flexible Batches

At the end of Web Designing with Angular Training Course, Participants will be able to:

  • Make real time projects in Angular.
  • Learn how to build production-ready Angular 6  applications through a number of hands-on application.
  • Develop modern, complex, responsive and scalable web applications with Angular
  • Understand the importance of the web as a medium of communication.

Course Duration

  • Weekdays: 2 Months(40-50 hours)
  • Weekends: 8 weekends

Prerequisites :

  • Basic Knowledge of Programming would be a Plus point but it is not necessary for this course.
  • Basic of Front End Designing tools such as HTML, CSS and JavaScript is desirable, however not mandatory.

Course

1.1 Understanding of HTML

  • What is HTML ?
  • Why we use HTML?
  • Structure of HTML
  • Head Tag and Elements inside the Head Tag
  • Meta Tags & What are they used for?

1.2 Contents of HTML

  • Working with Basic Tags and Font Formatting Tags
  • Heading Tags
  • Paragraph Tags & Multiple Columns
  • HTML Styles
  • Working with Links & Link Attributes / Link States using Pseudo Classes

1.3  Images

  • Inserting Images & Image Attributes
  • Image Embedding in Web Page

1.4 HTML Lists

  • List Attributes & Types of Lists
  • Working with UNOrdered List
  • Working with Ordered List
  • Working with Nesting List
  • Working with Defination List

1.5 HTML Tables

  • Inserting & Updating Tables

1.6 HTML Block Elements

  • Understanding Blocks – Div Block
  • Understanding Box Model – Margins / Paddings / Borders / Border-Radius / Outlines
  • Positioning Div Blocks & HTML Elements

1.7 iFrames and Media Tags

  • Embedding Google Maps
  • Audio / Video Elements
  • Audio & Video Attributes

1.8 HTML Forms

  • HTML5 Form Attributes
  • HTML5 Form Validation Attributes
  • HTML Input attributes

1.9 HTML5

  • HTML 5?
  • Why HTML 5?
  • Power of HTML 5

1.10 HTML5 Elements

  • Understanding Document Outline in HTML5
  • HTML5 Structural Elements
  • Section,Article,Aside
  • Header,Hgroup
  • Footer,Nav
  • Figure,Video,Figcaption
  • Audio,Embed,Canvas, SVG

1.11 Input Types

  • Color
  • Time, Date, Week, Month
  • Range, Search
  • Email, Contact
  • URL

2.1 Introduction to CSS

  • What is CSS
  • What is New in CSS3

2.2 Types of CSS and Significance

  • Internal Style. External Style. Inline Style
  • Adding styles to web page and websites.

2.3 CSS Syntax and Selecters

  • Use of Class and ID’s with selectors
  • Defining Class to create TAG
  • Defining ID to identify an object

2.4 CSS Fonts & Texts

  • Understanding CSS font families
  • Setting Font Style
  • Defining font properties
  • Text formatting
  • Aligining Text
  • Text Decoration and transformation
  • Text Direction
  • Letter Spacing and word Spacing

2.5 CSS Background & Color properties

  • Adding Background Colors / Gradients / Background Images

2.6 CSS Box Model

  • Borders and Outline
  • Margin and Padding
  • Height and Width

2.7 CSS Border and Tables

  • Border
  • Width and Height
  • Color and Style

2.8 CSS Lists

  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

2.9 Floating and Positioning

  • Normal Flow
  • Floating
  • Positioning Basics
  • Relative Positioning
  • Absolute Positioning
  • Fixed Positioning

2.10 CSS3

  • Rounded Corners
  • Borders
  • CSS3 Backgrounds
  • CSS3 Gradients
  • CSS3 Shadows
  • CSS3 TextEffects
  • CSS3 Fonts
  • CSS3 2D/3D Transforms
  • CSS3 Animations
  • CSS3 Transition
  • CSS3 Paginations
  • CSS3 Tooltips
  • CSS3 Multiple Columns
  • CSS3 FlexBox
  • CSS3 Media Queries

3.1 Overview of JavaScript

  • What is JavaScript?
  • Statements, Syntax and Comments
  • Using Variables in Javascript
  • Operators and Data types
  • Looping and conditional statement
  • How to use Events in JavaScript

3.2 Window Event Attributes

  • Onload and Onunload

3.3 Form Events

  • onblur
  • onchange
  • onfocus
  • oninput
  • onselect
  • onsubmit

3.4 Keyboard Events

  • onkeyup
  • onkeydown
  • onkeypress

3.5 Mouse Events

  • onclick
  • ondblclick
  • onmouseover
  • onmouseout
  • onmousedown
  • onmouseup

3.6 JS Form Validations

4.1 Basic of Javascript

  • Arrays in JavaScript
  • Defining and Invoking Functions

4.2 JS Object

  • Date and Math
  • JS String Objects

4.3 JS DOM Objects

  • Access and Modify HTML through DOM
  • Event Listeners
  • Collections

5.1 JQuery Basics
5.2 JQuery Syntax
5.3 How to use Selectors?

  • jQuery – CSS Element Selector and ID Selector
  • jQuery – CSS Element Class Selector and Universal Selector
  • jQuery – CSS Multiple Elements E, F, G Selector
  • jQuery Callback Functions

5.4 JQuery – DOM Attributes

  • Get Attribute Value
  • Set Attribute Value

5.5 JQuery – DOM Traversing

  • Find Elements by index
  • Filtering out Elements
  • Locating Descendent Elements

5.6 jQuery – CSS Methods

  • Apply CSS Properties and Multiple CSS Properties
  • Setting Element Width & Height
  • JQuery CSS Methods

5.7 jQuery –DOM Manipulation Methods

  • DOM Element Replacement
  • Inserting & Removing DOM Elements
  • Event Handling
  •  Triggering
  • Helpers

5.8 jQuery – Effects

  • JQuery Effect Methods, Hide and Show
  • jQuery Toggle
  • jQuery Slide – slideDown, slideUp, slideToggle
  • jQuery Fade – fadeIn, fadeOut, fadeTo
  • jQuery Custom Animations

5.9 jQuery –The noConflict() Method

6.1 What is AJAX and how it works
6.2 Syntax of AJAX
6.3 AJAX Operations
6.4 AJAX – XMLHttpRequest

  • XHR Create Object
  • XHR Request
  • XHR Response
  • XHR readyState

6.5 Jquery AJAX Methods

  • jQuery load() Method
  • jQuery – AJAX get() and post() Methods

7.1 Introduction of Bootstrap
7.2 Download and Install Bootstrap and jQuery
7.3 Bootstrap Basics

  • jQuery load() Method
  • jQuery – AJAX get() and post() Methods

7.4 Bootstrap Basics

  • Bootstrap Grid System
  • Fixed Layout vs. Fluid Layout
  • Bootstrap Code Lookup
  • Tables in Bootstrap
  • Forms in Bootstrap
  • Bootstrap Buttons
  • Image Handling in Bootstrap

7.5 BOOTSTRAP ─ NAVBAR

  • Default Navbar
  • Responsive Navbar
  • Forms in Navbar
  • Buttons in Navbar
  • Text in Navbar
  • Non-nav Link

7.6 BOOTSTRAP ─ DROPDOWNS
7.7 BOOTSTRAP ─ PAGINATION
7.8 BOOTSTRAP ─ LABELS
7.9 BOOTSTRAP ─ JUMBOTRON
7.10 BOOTSTRAP ─ PAGE HEADER
7.11 BOOTSTRAP ─ THUMBNAILS
7.12 BOOTSTRAP ─ PROGRESS BARS

  • Default Progress Bar
  • Alternate Progress Bar
  • Striped Progress Bar
  • Animated Progress Bar
  • Bootstrap Stacked Progress Bar

8.1 Getting Started

  • Introduction
  • What is Angular 2 and How it Works?
  • How does Angular get started?
  • First Angular App
  • Angular 5 v/s 4 v/s 2 v/s AngularJS

8.2 Typescript

  • Introduction
  • Working with tsc.
  • Basic Data Types & Variables
  • Using Types
  • Type Assertion
  • Operators & their types
  • Decision making constructs
  • Loops
  • Constructor Method
  • Inheritance of Classes
  • Type Assertion
  • Typescript Object
  • Working with Class and Abstract Class
  • Working with Interfaces
  • Working with Function

8.3 Installation and Configuration

  • Installing Angular JS
  • Configuration of Angular JS
  • Creating an Angular 2 project using CLI
  • Installing Git and Node
  • Setup for local environment

8.4 Architecture

  • Architecture of angularjs2
  • Component
  • Modules
  • Services
  • Dependency Injection
  • Directive
    • Attribute Directive
    • Structural Directive

8.5 Nodejs

  • What is node js
  • How to setup up NodeJS.
  • Working with NPM packages

8.6 Components

  • What are components?
  • Understanding Components life cycle hooks
  • Creating and using components
  • Dynamic components using ngComponentOutlet

8.7 Communicating Between Components

  • Passing Data into a Child Component
  • Passing Data out of a Child Component

8.8 Directives

  • What are directives?
  • Directive types
  • About Directive Scope
  • Creating Directives
  • Structural directives (ngIF, ngFor, ngSwitch)
  • Style and Class Directives ( ngClass, ngStyle)

8.9 Databinding

  • One-way databinding and Two-way databinding.
  • Property binding and Interpolation
  • Event binding
  • Attribute binding
  • Class binding
  • Style binding
  • Ng-Model
  • Use of @Input and @Output

8.10 Pipes

  • Why pipes are useful?
  • Parameterizing pipes
  • Custom pipes
  • Pure and Impure pipes
  • Async pipes

8.11 Template Driven Forms

  • Introduction
  • Create the component that controls the form
  • Create a template with the initial form layout
  • Bind data properties to each form input control with the ngModel two-way data binding syntax
  • Add the name attribute to each form input control
  • Add custom CSS to provide visual feedback
  • Show and hide validation error messages
  • Handle form submission with ngSubmit
  • Disable the form’s submit button until the form is valid
  • Resetting the form
  • Form with @ViewChild

8.12 Reactive Forms

  • Introduction
  • More Form Controls
  • Form Control Properties
  • setValue and patchValue
  • Validating Form Elements
  • Submitting and Resetting forms
  • Observing and Reacting to Form Changes
  • Using FormBuilder

8.13 Communicating with the Server Using HTTP, Observables, and Rx

  • Moving Data Storage to the Server
  • Listening to Resolved Data Changes
  • Using Querystring Parameters
  • Using POST and PUT
  • Using DELETE
  • Integrating Authentication with the Server
  • Persisting Authentication Status Across Page Refreshes
  • Saving User Data to the Server
  • Implementing Logout

8.14 Services & Dependency injection

  • Introduction to Services and Dependency Injection
  • Why do we need Services?
  • Creating a Logging Service
  • Injecting the Logging Service into Components
  • Creating a Data Service
  • Understanding Hierarchical Injector
  • How many Instances of Service?
  • Injecting Services into Services
  • Using Service for Cross-Component Communication

8.15 Authentication, Routing and Navigation.

  • Introduction
  • Configuring
  • Navigating
  • Parameterized routes
  • Adding Multiple Pages to Your App
  • Adding Your First Route
  • Accessing Route Parameters
  • Linking to Routes
  • Navigating from Code

8.16 Unit Testing in Angular Apps

  • Introduction
  • Why Unit Tests?
  • Analysing the CLI Testing Setup
  • Running Tests with CLI
  • Adding Components and Some Tests
  • Testing Dependencies: Components & Services
  • Simulating Async Tasks
  • Isolated v/s Non-isolated Tests

9.1 Angular 4

  • Major differences between Angular 1 vs Angular 2 vs Angular 4
  • Why not Angular 3?
  • What has Changed?
  • Features and Performance
  • Inbuilt many Animation Packages
  • NgIf and ngFor coding Improvements
  • Introduced ngTemplate
  • NgIf with Else for better UI handling
  • New Pipes

9.2 Angular 5

  • What is new in Angular 5?
  • Installing Angular 5
  • Components
  • Templating & Styling with HTML & CSS
  • Property & Event Binding
  • Angular 5 Animation
  • Angular 5 Services
  • Angular 5 Router
  • Deployment

FAQ

Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. While the terms web design and web development are often used interchangeably, web design is technically a subset of the broader category of web development.

Classes are held on weekdays and weekends. You can check available schedules and choose the batch timings which are convenient for you.

Towards the end of the course, all participants will be required to work on a project to get hands on familiarity with the concepts learnt. This Project will be reviewed by our instructors and industry experts. On successful completion, you will be awarded a certificate.

Quick Enquiry