Ui Full Stack Course Structure

Technology Stack for Full Stack Web Developer (3+)
----------------------------------------------------
UI Technologies
----------------
HTML -> for structuring of the webpage
CSS -> for presentation of the webpage
JavaScript -> for producing Dynamic content using DOM Manipulation
JQuery -> Library of JavaScript for dynamic data like JS
AJAX -> for Asyncronous calls with server
Bootstrap -> for Responsiveness and Mobile friendly applications
TypeScript -> a superset of JavaScript with fully Object oriented
Angular JS / Angular -> for MVC architecture and two way data binding.
Serverside Technologies
------------------------
Node JS -> for serverside JavaScript for serverside processing
Express JS -> Library of Node JS for serverside processing
Databases
---------
Mongo DB -> for No-SQL database
Fire Base -> cloud based No-SQL database
MySQL -> Relational Database
Testing Frameworks
------------------
Mocha -> for Unit Testing
Sinon -> for Unit Testing
Jasmine -> for Unit Testing

Karma -> for Unit Testing
Protractor -> for Integration Testing
Code Coverage Tools
-------------------
Istanbul -> for code coverage
Build Tools
-----------
Git / Gulp -> for building the application
Live Reload of Code
------------------
Editors integrated live reload
live-server
live-reload
Code Editors
-------------
Sublime Text -> Sublime
Visual Studio Code -> Microsoft
Brackets -> Adobe Systems
Atom -> Github
Webstorm -> JetBrains
Dreamweaver -> Adobe Systems
Code Repositories
-----------------
CVS / SVN
Github Enterprise
IBM Clear Case
Graphs & Charts
---------------
D3.js
C3.js
Optional Technologies
----------------------
React JS
Ember JS
BackBone JS
Vue JS
Ext JS
Photoshop skills
Development Methodology
-----------------------
Agile Methodology
-> Scrum Model
Project / Task Updates
----------------------
JIRA website
Daily Standup meetings

HTML -> 10 days
CSS -> 7 days
JavaScript -> 10days
BS -> 7 days
JQuery -> 7 days
Node JS -> 7 days
React JS -> 7 days
Installation of Notepad++
--------------------------
-> goto "google" -> type " notepad++"
-> goto "https://notepad-plus-plus.org/"
-> click on "download" button
-> select the download options like (32 bit / 64 bit)
-> Click on the "installer" link
-> it downloads a '.exe' file
-> double click on the downloaded file
-> proceed with default installation.
Installation of Node JS
-----------------------
-> Goto "Google" -> type 'node js"
-> goto "https://nodejs.org/en/"
-> click on "10.15.1" green button
-> it downloads a '.msi' file
-> double click on '.msi' file
-> proceed with the default installation.
Verification of Node Js Installation

------------------------------------
-> goto "command prompt"
-> type 'node -v' to get the version of Node JS

-> once you get the version, it is installed successfully
-> type 'npm -v' to get version of NPM
-> once you get the version, it is installed successfully
-> Now you can install 'live server'
Installation of Live Server

---------------------------
-> go to "Command Prompt"
-> type 'npm install -g live-server" (with internet connection)
-> Once it is installed, we can check the version of it by using
'live-server -v'
-> here we get the version as 'live-server 1.2.1'
WebStorm IDE Installation

---------------------------
-> Double Click on 'WebStorm.2018.1.4'
-> Click on Next , Click Next
-> Select the '64Bit' / '32bit'
-> Select Associations for HTML , CSS , JavaScript
-> Check the 'Download JRE' If exists
-> Click on Next
-> Click on Install.
Once installation is done , click on 'run webstorm' and click on finish.
-> Do not import Settings => Ok

-> Close the Activation licence window.
Step 2:
-------
copy the jar file (JetbrainsCrack-3.1.jar) to the below folder
"C:\Program Files\JetBrains\WebStorm 2018.1.4\bin"
Step 3:
-------
Select the file '.VMOPTIONS' and change the permissions.
in the 'bin' folder.
-> Select 'webstorm64.exe.vmoptions' => right click

-> click on 'properties' -> Click on 'security'
-> Select the 'users' => Click 'Edit'
-> Select 'Users' => check all 'Allow' options.
-> Click on 'Apply' -> CLick on OK -> Click on OK.
-> Open the '.VMOPTIONS' file in notepad and add the following line,
--------------------------------------------------------
-javaagent:C:/Program Files/JetBrains/WebStorm 2018.1.4/bin/JetbrainsCrack-3.1-
release-enc.jar
--------------------------------------------------------
Step 4:
--------
> Open the 'licence' in notepad and copy it.
-> Open the WebStorm IDE -> Select Activation ->
-> Enter the Licence -> Click on OK.
-> Now the Activation is successful.
-> Click on 'Create New Project' -> Click on 'Create'
Download Source for the HTML Developemnt

-----------------------------------------
-> go to "google"
-> type "naveen saggam"
-> go to "https://github.com/thenaveensaggam"
-> click on "HTML_Template"
-> Click on "Clone or Download" green color button
-> it downloads a '.zip' file
-> Extract the zip file
-> Open the webstorm IDE
-> click on file -> Open -> Paste the URL of the folder
-> Click OK.
1. Web Architecture
2. JavaScript Introduction
3. CSS Introduction
4. Angular Js Framework
5. MVC Architecture
6. Directives
7. Data Binding
8. Events
9. Services
10. Modules
11. Controllers
12. Filters
13. Ajax Calls
14. Using JSON in Angular JS
15. Single Page Applications (Angular JS Routing)
16. Dependency Injection
17. Cookies
18. Angular Bootstrap
19. CRUD Operations
20. Animations
21. AngularJS Communication with Node JS
22. Custom Services
23. Custom Directives
24. Factory Methods
25. Angular JS Validation States
26. One Time Data Binding
27. Angular JS Promises
28. $http Service
29. $q and $q.all
30. $broadcast and $emit
31. $digest and $apply
32. REST API
33. $watch and $watchGroup
34. $inject
35. MEAN STACK Introduction with ANGULAR JS
36. $ sanitize
37. Interceptors , $http Provider
38. MINI PROJECT with Angular JS

Angular - 2, 4 & 5
------------------------
1. Typescript
2. Introduction of Angular
3. Differences between 1, 2, 4 & 5
4. Node Modules
5. Angular Framework Architecture
6. Components, Modules
7. Decorators
8. Organize Routes using Modules
9. Injectable Service Classes
10. Directives
11. Providers
12. Component Life Cycle
13. Creating Reactive form and Template Driven Forms
14. Bind form controls to a model
15. Custom Pipe
16. Routing (Single Page Application)
17. Integration with Serverside Script
18. Express JS API Services
19. Mongo DB (with Amazon Cloud)
20. NPM Commands
21. Observable
22. Node Server
23. Angular Animations
24. Microsoft Visual Studio Code IDE
25. Angular CLI
26. MEAN Stack Programming

(DELETE, INSERT, SELECT, UPDATE with Mongo DB)
27. BootStrap with Angular

28. Jquery Integration with Angular
29. Search Plugin
30. Pagination with Data Grid
31. Sorting Data Using Angular
32. Mini Project with Angular
33. InterView Questions.

Ui Full Stack Course Structure

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ui Full Stack Course Structure

Uploaded by

Copyright:

Available Formats

Technology Stack for Full Stack Web Developer (3+)

HTML -> for structuring of the webpage

CSS -> for presentation of the webpage

JavaScript -> for producing Dynamic content using DOM Manipulation

JQuery -> Library of JavaScript for dynamic data like JS

AJAX -> for Asyncronous calls with server

Bootstrap -> for Responsiveness and Mobile friendly applications

TypeScript -> a superset of JavaScript with fully Object oriented

Node JS -> for serverside JavaScript for serverside processing

Express JS -> Library of Node JS for serverside processing

Mongo DB -> for No-SQL database

Fire Base -> cloud based No-SQL database

MySQL -> Relational Database

Mocha -> for Unit Testing

Sinon -> for Unit Testing

Jasmine -> for Unit Testing

Protractor -> for Integration Testing

Code Coverage Tools

Istanbul -> for code coverage

Git / Gulp -> for building the application

Live Reload of Code

Editors integrated live reload

Sublime Text -> Sublime

Visual Studio Code -> Microsoft

Brackets -> Adobe Systems

Atom -> Github

Webstorm -> JetBrains

Dreamweaver -> Adobe Systems

IBM Clear Case

Graphs & Charts

-> Scrum Model

Project / Task Updates

Daily Standup meetings

-> goto "https://notepad-plus-plus.org/"

-> click on "download" button

-> select the download options like (32 bit / 64 bit)

-> Click on the "installer" link

-> it downloads a '.exe' file

-> double click on the downloaded file

-> proceed with default installation.

-> Goto "Google" -> type 'node js"

-> goto "https://nodejs.org/en/"

-> click on "10.15.1" green button

-> it downloads a '.msi' file

-> double click on '.msi' file

-> proceed with the default installation.

Verification of Node Js Installation

-> type 'node -v' to get the version of Node JS

-> type 'npm -v' to get version of NPM

-> once you get the version, it is installed successfully

-> Now you can install 'live server'

Installation of Live Server

-> type 'npm install -g live-server" (with internet connection)

-> Once it is installed, we can check the version of it by using

-> here we get the version as 'live-server 1.2.1'

WebStorm IDE Installation

-> Double Click on 'WebStorm.2018.1.4'

-> Click on Next , Click Next

-> Select the '64Bit' / '32bit'

-> Select Associations for HTML , CSS , JavaScript

-> Check the 'Download JRE' If exists

-> Click on Next

-> Click on Install.