Front-End Technology
HTML: Hyper Text Markup Language
1. HTML Basic
- What is Markup Language
- Basic Structure of HTML
- Meta Tags
- External Link Tags
2. HTML Elements
- Basics, Elements
- Paragraphs and Formatting
- HTML Skeleton,
- Creating an HTML Document
- Basic Content Structure
- Headings
- Horizontal Rules
- Line Breaks
3. Images
- Optimizing web graphics – JPEG, GIF &NG
- Getting images from Photoshop
- Embedding Images in a Web Page
- Using Graphics
- Using Background Images
- Setting image properties via HTML
4. Hyperlinks
- Href, Name, Title, Target
5. Lists
- Creating Unordered & Ordered Lists
- Creating Nesting Lists
- Creating Definition List
6. Div & Tables
- Creating of Div Tag
- Creating and Modifying Tables
- Formatting Tables
- Table Headers and Captions
7. Form
- Name, Action, Method
- Â Text, Hidden, Password
- Â Radio Button, Checkbox
- Â Select, Textarea
- Â Submit, Reset, Button
8. HTML5
- HTML5 Structural Elements
- Section, Article, Aside
- Header, Hgroup
- Footer, Nav
- HTML5 Content Elements
- Figure, Figcaption, Video Horizontal Rules
- Audio, Embed, Canvas
- HTML5 New Application Focused
- Â Elements
- Meter, Details, Summary
- NG
- Progress, Time
- HTML5 Input Types
- Color, date, datetime
- email, month, number
- range, search, tel
- time, url, week
- HTML5 Form Attributes
- autocomplete
- nonvalidate
- form/form-action
- autofocus
- multiple
- pattern
- placeholder
- required
CSS: Cascading Style Sheet
1. Understanding CSS:
- Versions of CSS
- Types of CSS Rules
- CSS and Markup Languages
2. CSS Basics
- Adding Styles to an HTML Tag
- Adding Styles to a Web Page and Web Site
- Redefining an HTML Tag
- Defining Classes to Create Your Own Tags
- Defining IDs to Identify an Object
- Defining Styles with the Same Rules
- Adding Comments to CSS
- Style Sheet Strategies
3. Font Properties:
- Understanding Typography on the Web
- Setting the Font Size
- Making Text Italic and Setting Bold, Bolder, Boldest
- Creating Small Caps
- Setting Multiple Font Values
4. Text Properties
- Adjusting Text Spacing
- Setting Text Case
- Aligning Text Horizontally and Vertically
- Indenting Paragraphs
- Setting Text and Foreground Color
- Decorating Text
- Setting Text Direction
- Setting Page Breaks for Printing
5. Color and Background Properties
- Choosing Color Palettes
- Setting Text and Foreground Color
- Setting a Background Color
- Setting a Background Image
- Setting Multiple Background Values
6. Box Properties
- Setting an Element’s Margins
- Setting an Element’s Border
- Setting an Element’s Outline
- Setting an Element’s Padding
- Setting the Width and Height of an Element
7. CSS Border
- Border, width, color, style
8. Positioning
- Static, relative, absolute
-
Fixed, z-index
9. Floating
- None, left, right
- Initial, inherit
10. Pseudo – elements and CSSclasses
11. CSS List
- list-style
- list-style-image
- list-style-position
- list-style-type
12. CSS3
- Borders
- CSS3Backgrounds
- CSS3 Gradients
- CSS3 Shadows
- CSS3 Text Effects
- CSS3 Fonts
- CSS3 2D/3D Transforms
- CSS3 Transitions
- CSS3 Animations
- CSS3 Multiple Columns
13. Create a Layout Using CSS Property
JavaScript
1. IntroductionÂ
2. Statements & CommentsÂ
3. Variables Keyboard Events
4. Data typesÂ
5. OperatorsÂ
6. Conditional Statements and LoopsÂ
7. User Defined FunctionsÂ
8. HTML Events
- Window Event Attributes
- onload
- onunload
- Form Events
- onblur
- onchange
- onfocus
- oninput
- onselect
- onsubmit
- onkeypress
- onkeyup
- onclick
- ondblclick
- onmouseover
- onmouseout
- onmousedown
- onmouseup
Advanced JavaScript
1. JavaScript BasicsÂ
- Refreshing Basic JavaScript Concepts
- Defining Functions
- Arrays & Objects in JS
- Date & Math Object
- String Methods
- Set timeout & Set Interval Function
2. The DOM Objects
- Introduction to DOM object
- DOM Methods
- Access & Modify HTML through DOM
- Event Listners
3. Advance JavaScript Overview
- Functions in depth
- JS Prototype
- This Keyword in JS
4. Getting Into Advance JS
- OOJS concept
- Classes & Instances
- Exception Handling in JS
- Constructors & Inheritance
Bootstrap
1. How to Create a Layout in Bootstrap
- Grid Classes
2. Basic Tags in Bootstrap
- Contextual colors and backgrounds
3. Table in Bootstrap
- Bootstrap Basic Tables
- Striped Rows o Bordered Table o Hover Rows
- Condensed Table o Contextual Classes o Responsive Table
4. Navigation barin Bootstrap
- Inverted Navigation Bar
- Fixed Navigation Bar
- Navigation Bar with Dropdown
- Right-aligned Navigation Bar o Collapsing the Navigation Bar
5. Form in Bootstrap
- Vertical Form
- Horizontal Form
- Inline Form
6. Buttons in Bootstrap
- Button Styles
- Button Sizes
- Block Level Buttons
- Active/Disabled Buttons
7. Images in Bootstrap
- Rounded Corners Image
- Circle Image
- Thumbnail Image
Angular
1 Getting Started
- Introduction
- What is Angular?
- How Angular Works?
- Difference between Angular and Other Framework
- Advantages of Angular
2. Typescript
- Â What is typescript?
- Compare typescript with Javascript
- Data Types & Variables
- Variable & Operators
- Control Structure and Decision making & loops
- Typescript Functions & Strings
- Typescript Object
- Class, Abstract Class
- Constructor Method
- Type of Assertion
- Interfaces
3. Application setup
- Installing Angular JS
- Configuration of Angular JS
- Creating an Angular 2 project
- Creating an Angular 2 project using CLI
4. Node package manager
- Setup
- Commands
- What is NPM
- Install Nom for Angular.
5. Architecture
- Module
- Component
- Template
- Metadata
- Data binding
- Directive
- Attribute Directive
- Structural Directive,
- Services
- Dependency Injection
6. Angular UI design patterns
- Material Design
- What is material design
- How to use and setup material environment
- Material components and layouts:
- Bootstrap
- How to install Bootstrap in angular environment
- Bootstrap layout and components
7. Directives
- Understanding Directives
- Directives Overview
- Different kinds of directives
- Build attribute directive
- Apply the attribute directive to an element in a template
- Respond to user-initiated events
- Pass value into the directive with an @Input data binding
- Custom Attribute Directive
8. Structural and Attribute Directive
- What is a structural directive?
- NgIf case study
- NgFor, NgSwitch
- What is attribute Directives
- Using the NgStyle Directive
- Using the NgClass Directive
- The element
9. Service
- What is service?
- Create a service
- Understanding Services Injecting Concepts
- Async service and promise
- Introduction to Observable
- What is web service
- Â how to create a web service
- posting data to client-server architecture
- Introduction to Material Design
- Introduction to card Material Design.
- What is JSON Server?
10. Dependency Injection
- Why dependency injection?
- Angular dependency injection
- Injector provider
11. Data Binding
- Interpolation
- Property binding
- Event binding
- Attribute binding
- Class binding
- Style binding
- Multiple components & passing data
12. Display data
- Class Binding
- Style Binding
- Event Binding
- Two-way Binding
- Component Data Binding
- Component Events
- Ng-Model
13. User input
- Binding to user input events
- Get user input from the $event object
- Get user input from a template reference variable
- Key event filtering (with key. enter)
14. Form
- Types of Forms in Angular4
- Introduction to Template Driven Forms.
- Validation of Template Driven Forms.
- Introduction Model Driven Forms.
- Validation of Model Driven Forms.
- Two-way data binding using ngModel.
- Model Driven Forms With Form Builder
- How to post data via an angular form with rest service.
15. Pipes
- Introduction to Pipes
- Why pipes are useful.
- Type of pipes
- Built-in pipes
- parametrized pipes
16. Router
- Setting Up Router
- Imperative Routing
- Route Parameter
- Child Routing
17. What is the change in every version of angular
- Differences and changes in various angular versions.
- Latest angular version and its features
The curriculum is empty