TopITacademy

TOPITACADEMY
Frontend Technology
User Avatar By admin
Full stack Development

Frontend Technology

  • 0

    (0)
  • meta-icon 0 Lessons
  • meta-icon 2 Students
User Avatar

Frontend Technology

12 weeks
Beginner
0 lessons
0 quizzes
2 students

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

Write a comment

Your email address will not be published. Required fields are marked *

Free

  • 0
  • 0
  • 2 students
  • 12 weeks
  • Beginner
  • English
Share Now :

This will close in 20 seconds

Main Content