Full stack by CCBP 4.

 Introduction to Tech 4.0

• Software vs Hardware:
- Soft (Easily changeable) and Ware (functionality)
- Hard (Not easily changeable) and Ware (functionality)
• Software is a set of instructions given to the hardware and to run these types of software’s
in the hardware we need main software called "OS" operating system. Simply OS is an
interface between software and hardware.
• Network is used to connect one device to another, it may be private or public network.
Example internet is a public network and VPN is a private network.
• Understanding network with an analogy example:
CARGO NETWORK
Warehouse Device
Cargo Data
Trucks Packets
Entire cargo can’t be sent on single truck Entire data can’t be sent on single packet
Roads Routes
Junctions Routers
Multiple paths Multiple routes
Traffic Congestion
• Clients and Servers both are devices but their workings are different. Clients is one that sends
request and server is one that responds to the client’s request. The exchange of these
information between client and server happens over the network. To send a request by the
client to the server we need a software called browser, like Google chrome, Firefox etc.
• Application refers to a software developed for specific purpose (Example WhatsApp, Gmail,
amazon etc.) and building that application is known as application development.
• Web application development involves frontend and backend development. Those who
works only for frontend development are known as frontend developers, who works only for
backend development known as backend developers and those who work in both the
developments are known as full stack developers.
• Mobile applications, it is a software developed for mobile devices for specific purpose. Some
of the programming languages for android app development are Java, Kotlin etc. and for iOS
app development Objective-C, Swift etc.
 Introduction to Frontend
• Frontend is what we see on the display after requesting to the server. Suppose if we request
www.amazon.in to the server through our browser then the browser will open the webpage
for us in a neat way. But, in reality there are lots of codes that are helping us to see the
webpage in a smooth and neat way. So, for this frontend technology is used.

1
 What we see. What browser see.

• Parsing and rendering, Parsing helps in understanding and separating out different contents
in the data received by the browser from server. The bowser gives set off instructions to the
operating system for rendering the separated data to create and display what we are
supposed to see on the screen.
• Frontend technology is nothing but a programming language which is used to represent the
received data over the internet on the display in a neat and clear way. Some of the
programming languages used for frontend development are HTML, CSS, JS, React, Flutter etc.
• HTML (Hypertext Markup Language), here Hypertext is embedding links to a text, when we
click on that text it shows another page. Markup is highlighting a text on a webpage for better
understanding and Language, to communicate with a human we have so many languages,
likewise to communicate with computer we require programming languages.

• CSS (Cascading Style Sheets) is used for styling the content in the browser. Example fonts,
colors, sizes, shapes and positions etc.

GREEN COLOUR

SHAPE BIG FONTS

BLUE COLOUR

• JS (Java Script) is used to change the contents of the website dynamically without reloading
the entire site and also adds interactive experience to the website. In the below example,
when we selected 1 quantity it shows 39,990 rupees and when we selected 4 quantity it
changed to 1,59,960 rupees instantly without reloading the website.

2
 • Responsive web design technology is used to build an automatic fit of website or application
in any device whether it is mobile, tablet or computer without the need of developing for
each device separately.

• Cross platform, earlier we have discussed that for android app development we use Java or
Kotlin and for iOS we use Objective-C or Swift programming languages. So, to build a
responsive application which can work in both android and iOS, we can use React native
(developed by Facebook) or Flutter (developed by Google).
• The purpose of both React and Flutter are same without the need of building app for android
and iOS separately. Example, if we develop an app in Flutter for android, the app will also
work in iOS without the need to separately develop for iOS.
 Introduction to Backend
• Data and Space, data means information such as Text, Images, Audios and Videos etc. Like
cargo has size which occupies some space in the warehouse, the data also has size which also
occupies some space in the storage device. Space occupied by data is measured in the units
of Bits and Bytes.
1 Byte 8 Bits
1 Kilobyte 1024 Bytes
1 Megabyte 1024 Kilobytes
1 Gigabyte 1024 Megabytes
1 Terabyte 1024 Gigabytes

3
• Server and Database

BIG FONTS

4
• In backend development, some of the programming languages used to interact with server
are Python, Go, Java, C, Php etc. and languages used for database are MySQL, SQLite,
PostgreSQL, DynamoDB, MariaDB, MangoDB, ArangoDB, OrinetDB, Elastic, Cassandra, Redis,
Neo4j, Amazon Neptune etc.

• User Interface (UI) and Application Programming Interface (API), a user interacts with the
software with the help of UI and two software’s interact with each other with the help of API
(Example- Client interacting with server with help of API).

BIG
FONT
• Cloud and Cloud Computing, Cloud is nothing but having number of servers
S in which no of
software’s are running in the server and also it is connected to the internet. Cloud Computing
is availability of server system of any size on demand at the click of a button from your
computer, it is affordable and can be scaled as per requirement.

5
 • Some of the cloud service providers are:

 Introduction to HTML and CSS

• Key things to learn:
- Static website
- Responsive website
- Dynamic website
• Browser and URL, A browser is must to open any website, because it understands the
language of HTML, CSS, JS etc. and URL (Uniform Resource Locator) simply address of the
website.
• Syntax, there is a rule of grammar to write a sentence and likewise there is rule for writing
programming language called Syntax, simply syntax is rules of programming language.
• Bug is nothing but an error in the software. If the desired behaviour and current behaviour is
different then there is a Bug (error) in the software.

• Debugging, the fixing of the bug (error) is called debugging. Debugging is the important part
of programming. There is a checklist for debugging:
- HTML elements tag name.
- HTML elements properly closed or not.
- HTML attribute names and values.
- CSS property names and values.
•