Front End UI Foundation Online Training From India

Be expertise on Foundation UI

Front End UI Foundation Online Training From India

UI Foundation

This Front End Foundation course starts with HTML 4, HTML5, CSS 2, CSS3, JavaScript, Object Oriented JavaScript, JavaScript Design Patterns, CSS frameworks like SASS and LESS, MVC frameworks such as Angular JS, React JS, and finally Node JS web pack. During training, our trainers cover 75% practical and 25% theory. Each concept will give an example of the real time. After completion of this foundation UI course, you will be mastering in front end technologies

UI Foundation = HTML 4/5, CSS 2/3, SASS, LESS, Advanced JavaScript, Angular JS, React JS, Node JS, Express JS, Gulp, Bower
  • Duration

    20-25 Hours

  • Marterial

    Yes - PDF, PPT, and Folders

  • Hands-on Projects
    Mobile Project, Web Project
  • Video/Audio

    High

  • Assignments

    Yes

  • Placement Assistance

    Yes

Overview

HTML 4/5 - This section covers complete features of HTML4, XHTML, and HTML5. Initially, session starts with Website fundamentals, tags, elements, tables, forms, lists in HTML4. In HTML5 topics come up with semantic tags, APIs like Geolocation Web Storage, Web Workers, Web SQL, Web Sockets, and Drag & Drop and much more.

CSS 2/3, SASS, LESS - This section covers CSS2 features, CSS3 for Mobile, CSS frameworks such as SASS, LESS. CSS is very important for front end developers. During training, we explain how to write semantic CSS, Modular CSS, Object Oriented CSS.

JavaScript - This section covers advanced concepts of JavaScript such as Constructor, Inheritance, Polymorphism, types of function declarations, how to control DOM, dynamic event handlers, closures, scope, hoisting, and much more.

Angular JS - This section covers how to write custom directives, services, filters, add new dependencies to a module, optimizing angular js, scopes, routes, and jqlite.

React JS - This section covers how to write reusable components in React JS. It also includes RedUx, Flux, and Node JS.

Web Pack - This section covers how to create a server using Node JS. Create RESTFul API's using Express JS, How to add bower components to applications, running gulp tasks.

Hands-on

  • PSD to Pixel perfect template conversion
  • JavaScript Modular component create
  • Preparing Style Guide for JavaScript, CSS, Angular JS, React JS
  • Preparing HTML prototyping or wireframing
  • Responsive Web Applications using HTML5, CSS3, and SASS
  • Build Single Page Application using Angular JS
  • Build Single Page Application using React JS, Node JS
  • Set up Node JS environment for Single Page Apps

Requirements

  • Browsers: Internet Explorer, FireFox, Chrome, Safari, Opera
  • Apache Server (PHP, JAVA, ASP) Optional
  • Any GUI Editor : NotePad++, Edit++ or Sublime
  • Node JS
  • Ruby Installer
  • Downloaded Angular JS File

Audience

  • Any Software Engineer, Graphic Designers, Web Designers, Web Developers, Mobile Developers, UI Developers

Course Content

HTML 4/5

  • Website Fundamentals
  • Overview, Syntax, Doctypes
  • Elements, Attributes, Tags
  • Validations, Comments, Dimensions
  • Links, Images, List
  • Tables, Forms, Entities
  • Meta tags, Media, Colors
  • XHTML, tips & tricks
  • HTML 5 - Difference HTML4 vs HTML5
  • HTML 5 - Features
  • HTML 5 - Events, Attributes, Tags
  • HTML 5 - Forms
  • HTML 5 - Media, Audio, Video
  • HTML 5 - Geolocation, WebStorage, WebSQL, WebWorkers
  • HTML 5 - WebSockets, ServerSideEvents
  • HTML 5 - Drag & Drop, SVG, Canvas
  • HTML 5 - Browser Hacks

JavaScript

  • Overview, Syntax, Declarations
  • Variables, Data Types, Operators, Statements, Reserved Words, Arrays, Functions, Objects, Events, Dialogs, Window Objects
  • DOM, BOM, Browser Detection
  • DOM manipulation
  • Regular Expressions, Validations
  • Debugging Tools
  • Functions in depth
  • Object Oriented JS: Object Oriented JS, IIFE, Hoisting, Scope, Closures, Prototypes, Constructors, Inheritance, Encaptulation, Polymorphism
  • Design Patterns Command, Decorator, Facade, Factory, Iterator, Signleton, Namespace, Module, Mixin, MVC, MVVM
  • JavaScript best practises

React JS

  • Overview, Features, Architecture
  • Installation
  • JSX
  • Components
  • State
  • Props
  • API
  • Forms
  • Events
  • RedUx
  • Routes
  • Examples

CSS 2/3

  • Overview, Syntax, Comments
  • Selectors
  • Floats, List, Background, Font
  • Box Model
  • Positions, Tables, Sprite
  • Text, Font, Transforms, Transitions
  • Animations, User Interface
  • Box Sizing, Flex Box, Shadow, Gradient
  • Media Queries
  • Style Guide
  • Reset, Specificity, Semantic UI, Module UI

SASS / LESS

  • SASS Overview, Syntax, Installation
  • Variables, Mixins, Includes, Extend, Nested,Important
  • LESS Overview, Syntax, Installation
  • Variables, Mixins, Includes, Extend, Nested,Important
  • SASS vs LESS
  • Preparing Style Guide using SASS or LESS

Angular JS

  • Overview, Features, Architecture
  • MV* Frameworks
  • Scopes, Controllers, Modules
  • Events, Directives
  • Filters, Templates, Routing, CSS, Validations, JQLite
  • Customizing components
  • $http, Deferred, Promises, JSON / XML
  • Angular JS 2 Overview
  • Angular 2 vs Angular 1
  • Angular CLI
  • Type Script
  • Features & Examples

Web Pack

  • Overview, Features
  • Installation
  • Callback, Event Loop, Event Emitter, File System, Global Objects
  • Node JS with Gulp
  • Node JS with Grunt
  • Node JS with Express
  • Node JS with Bower
  • Node JS with Yeoman
  • Node JS important commands
  • Package.json
  • bower.json
  • Project set up

Want be and expertise in Front End Web Developement? Explore our packages HERE

Placements
Placements
Placements
Placements