What is Full Stack?

- Full Stack developers are now trending in software

industry.
- Software developer who can handle end-to-end
application development.
- Developer can manage database, server-side
application, middleware, client-side tools, web server.
[Full Stack Developer]
- Front-end to Back-end.
What we are going learn in Full Stack?
- Complete front end development. [HTML, CSS,
Bootstrap, JS, JQ, Angular JS]
- Server-Side Technologies. [Node JS]
- Database. [MongoDB, MySql]
- Middleware. [Express.js]
- Web Servers. [IIS, Tomcat]
- Cross platform framework for Mobile apps. [Ionic],
- Angular JS
- React.js
What we can build by using Full Stack?
- Web Application
- Distributed Application
- Mobile Native Application
Duration of this course?
- 100 days 1:15, 1:30
Who can learn Full Stack?
- Anyone, no technical knowledge required: Full Stack
- Java, .NET, PHP, Python, Mobile

Full Stack developer is perfect up to: front end, server side

and database.
Full Stack developer can’t handle support projects until or
unless you have knowledge in Java, .NET, PHP, Python.
FAQ: What is difference between Full Stack, MEAN, MERN
and UI?
- UI is all about “Front End Development”
o HTML
o CSS
o Bootstrap
o JavaScript
o jQuery
o Angular JS etc.
o No database , middleware and server side
- MEAN Stack
o M MongoDB Database
oE Express Middleware
o A Angular Client Side
o N Node.js Server Side
o No Front end tools or language
- MERN Stack
o M MongoDB Database
oE Express Middleware
o R React Client Side
o N Node.js Server Side
o No Front end tools or language
- Full Stack
o Front End
o Back End
Different Types of Applications we are going to learn in Full
Stack
- Web Application
- Distributed Application
- Mobile Native Application
What is Single Page Application [SPA] and Progressive Web
Application?
- SPA
- In SPA user will stay on one page and get access to
everything from the page.
- User will not Navigate from one page to another.
- In Web Applications, Distributed Applications and
Mobile Native applications we are using SPA
environment.
- We will do that by using “Angular JS, React.js and Ionic”
for SPA
- PWA [Progressive Web Applications]
- In PWA web site will have app like behaviour in browser.
- A web site looks like an “app” not like a page.
- We can do that by using “React.js and Ionic”
What is UI, UX?
- Front End development
- UI [User Interface]
- UX [User Experience]
- UX is part of UI.
- Web started in early 1990’s
- Tim Berners Lee introduced the concept of Web.
- For Early web development UI is enough.
o HTML, CSS, JavaScript, jQuery etc.
- Modern web development has several challenges
o 80% to 90% of internet users are using web from
smart devices.
o Our traditional websites are too large and can’t
reach low bandwidth devices easily.
o Client wants an
 Unified UX
 Our application must provide same
features and functionality across any
device.
 Fluid UX
 User will stay on one page and get access
to everything.
 Easy Extensibility
 Simplified Deployment.
o Solution
 Angular JS, React.js etc.

Front-end Development
What is front-end?
- Software applications follow tier and layer architecture.
- Applications are built in layers.
- Applications run in tiers.
Tier : run application
Layer : build application
- Developers work in 3 layers
o UI Layer
o Business Layer
o Database Layer
- Application will run in tiers
o Database Tier
o Application Tier
o Presentation Tier
- Front End development is all about designing the UI.
- In full stack we will learn building UI for 3 types of
applications
o Web Application
o Distributed Application
o Mobile Native Application
What we need to learn for developing UI?
- HTML
- CSS
- LESS
- SASS
- Bootstrap
- JavaScript
- jQuery
- Angular JS
- React
- Ionic
Why? Description
HTML It is a presentation language used for
preparing presentation for web, distributed
and mobile.
CSS It makes the presentation more attractive,
interactive and responsive.
LESS It is a CSS pre-processor. Make your CSS
better, simplified, reusable, and compact.
SASS It is also a CSS pre-processor. Make your
CSS better, simplified, reusable, and
compact.
JavaScript To reduce burden on server.
It manages several interactions client-side.
Security Issues, Blocked by Browsers
JavaScript is language used client-side,
server-side, database.
jQuery It is a JavaScript library.
Write less and do more.
It contains set of pre-defined functions.
Functions are build with JavaScript.
Angular JS It is a Front-end Framework.
It can build and control the application
flow.
Google
React It is a JavaScript library.
It is used with front-end framework like
Cordova, Ionic, NativeScript.
Facebook
More work is on UI
Ionic Framework for building cross platform
mobile application with React or Angular.

Front End Web Development

- Install Node JS on your computer
- We are installing node.js for “Package Manager”.
- Package Manager is a software tool used to install
various libraries required for your development.
- Library like bootstrap, jQuery, Angular JS etc.
- There are several package managers like: yarn, npm,
NuGet, bower, RubyGems
- We are installing Node JS for “npm”.
- You can download from official node.js website
https://nodejs.org/en/download/
- Install on your PC
- Test its version from command prompt.
C:\> node -v
C:\> npm -v [Node Package Manager]
Download and Install Editor
- It is an IDE [Integrated Development Environment]
- It provides an environment from where you can build,
debug, test and deploy applications.
- We will use “Visual Studio Code”
- Open Source
- Cross Platform
- Free
- Lot of plugin for developers
- Microsoft
- Java, .NET, PHP, Python etc.
https://code.visualstudio.com/

Creating a Project for Front End Development:

- Open your File Explorer
- Create a new folder for project in any location
“C:\FullStackWeb”
- Open in Visual Studio Code
o Go to File Menu  Open Folder  C:\
FullStackWeb
- Your project is ready to use HTML, CSS and JavaScript.

How to install library for various languages and

technologies?
- HTML, CSS, JavaScript doesn’t require any library to
install on your PC.
- You can start developing directly. Every OS have support
for HTML, CSS and JavaScript if it is installed with any
browser like: IE, Chrome, Firefox, Safari, Edge etc.
- Package Manager is required for various libraries like
jQuery, Angular JS, React etc.
- Open “Terminal” in Visual Studio Code
o Terminal Menu -> New Terminal [Ctrl + `]
C:\FullStackWeb> npm install packageName
C:\FullStackWeb> npm install
jquery/bootstrap/angular/mongodb
Web Application
- What is a network?
o It is a group of computers connecting with each
other for sharing of information and resources.
o ARPANET [Advanced Research Projects Agency
Network] is the first computer network introduced
in 1960’s by US-DOD.
- What are types of networks?
o LAN
o MAN
o WAN
- What is internet?
o It is a Wide Area Network connecting computers
across the globe.
o International Network
- What is Web?
o 1990’s “Tim Berners Lee” introduced “Web”.
o Web is a portion of Internet with restricted access.
- Who maintains the standards of Web?
o W3C
o WHATWG
- Web Terminology

Web Server
- Web server resembles both software and hardware.
- It is responsible for managing requests from client and
send a customized response to every client request.
- Web Server is the location where we host our website
and application, we debug, we test, and deploy.
- The popular web server tools you can use on your
computer
o Apache tomcat
o IIS [Internet Information Services]
o NGINX
o Node.js
o Lighttpd etc.

Windows OS – Internet Information Services Manager [IIS]

Web Server
- Look for IIS on your Windows PC
o Open windows control panel
o Switch to “Large Icons”
o Go to “Administrative Tools”
o Look for IIS [Internet Information Services
Manager]
- You can add IIS to your windows PC
o Open Control Panel
o Go to “Programs and Features”
o Click on “Turn Windows Features ON or OFF”
o Select “Internet Information Services” from list
o Click OK
- Test the webserver
o Open any browser: Chrome, IE, Edge etc.
o Type the following URL in address bar
http://localhost
http://127.0.0.1
- Setup Live Server [local] from your Visual Studio Code
o Open VS Code
o Go to “Extensions”
o Search for “Live Server”
o Install for your VS Code.

Web Site
- Web site is a virtual directory on Web Server.
- Site refers to location on server.
- Location on any computing device is actually Drive and
directory reference.
Creating a new Website Locally:
- Open your web server “IIS” [Run-> inetmgr]
- Expand “local computer”
- Expand “Sites” folder
- Right Click on “Default Website”
- Select “Add Virtual Directory” [Adding a website]
- http://localhost/fullstackweb
- Go to physical path
- Add “Images” folder
- Keep any image in folder
- Now try access from browser
http://localhost/fullstackweb/images/yourpic.jpg

\ - back slash – for physical path

/ - forward slash – for virtual path

Web Page
- It is a hypertext document that provides an UI for your
website, so that users can interact with the resources in
website.
- The term “hyper” refers to a Greek term, which means
“beyond”.
- Hypertext document is a special type of document used
in network for presentation.
- It comprises of content to display and also the content
beyond the display.
- The UI for website is designed by using Web Pages.
- The web pages are classified into 2 types
o Static Page
o Dynamic Page
Static:
- The term static refers to static memory.
- Static is continuous memory. [Connected in access]
- Memory allocated for first request will continue for
other requests.
- Static occupies more memory.
- Static Page contains same information to display across
multiple requests.
- Static Page have the extension
o .htm
o .html
Dynamic
- The term dynamic refers to dynamic memory or non-
static memory.
- Dynamic is discrete memory. [Disconnected in access]
- Memory is newly allocated for every request.
- Save the memory.
- Dynamic page contains same content to display initially
for every request but it can change and customize the
response according to the request.
- It generates a response customized for every client
request.
- Dynamic page has extension
o .jsp
o .php
o .asp
o .aspx etc
- To design UI for static and dynamic page you need
HTML.

FAQ: What is difference between a Website and Web

Application?
- Website comprises all static content.
- Web Application comprises of both static and dynamic
content.

FAQ: What is a blog?

- Web-log [Blog]
- Blogs are like journals on internet.
- Blogging is Free
Ex: blogger.com
- Video Logs are trending [Vlog]
Ex: YouTube Channels are Vlog [Blog]
FAQ: What is a Wiki?
- The term Wiki mean “Quick”
- Wiki allows any user to edit its content.
Ex:
WikiPedi [Quick Reference for Encyclopaedia]
IMDB
Google Maps

FAQ: What is Podcasting?

- Podcasting allows to upload media (Audio/Video)
content on to server and broad cast onto any device
connected in network.
Ex: YouTube, iTunes, Windows Media Player
iPOD
FAQ: What is Widget?
- It is gadget for your website or application.
- It is an application running in your site or
application.
- jQuery is very popular for designing widgets.

Build a WebSite
HTML