Acknowledgement

First and foremost, I would like to express my deepest

gratitude to my class teacher Mr. Anees Alam Sir, for
invaluable guidance, feedback, and constant encouragement
throughout the duration of this project. Her/his passion for
physics was contagious and his insights greatly facilitated the
progress of my work.
I am extremely grateful to the school principal Mr. Devendra
Kumar Singh, for granting me access to the physics lab and
permitting me to use the necessary equipment and resources.
Having access to quality infrastructure was vital for the
experimental aspect of my project.
In addition, I would like to acknowledge my classmates for
their camaraderie and assistance during the project. Their
help, advice and company made this journey enjoyable.
Finally, I must thank my parents for their unwavering support
and encouragement needed to take on this challenging but
enriching project. Their practical assistance at every step was
invaluable.
I could not have completed this project successfully without
everyone who has contributed. I will forever remain grateful
to them.

1
 Index
S.No. Topic Page Teacher
Signature
1. What is Full Stack Development 3-7
2. History of JavaScript 7
3. What is Web Development 8-12
4. Bootstrap 13-15
5. Node JS 15-16
6. React JS 17-19
PROJECTS
1. Slider 21-22
2. Bootstrap Menu 23
3. BMI Calculator 24-25
4. To Do List 25-27
5. Random Image Generator 27-28
6. 3 Chance win game 28-30
7. Notification Panel 31-32
8. QR Code Generator 33
9. Dynamic Adding Content 34-35
10. HTTP Server in NodeJS 35

2
 What is Full Stack Development

Full Stack Development refers to the development of

both front end (client side) and back end (server side)
portions of web applications. If you want to learn in full
structure form then you should enrol in our Full stack
devloper course! You’ll learn to create powerful web
applications from scratch, mastering both front-end and back-
end skills. Join us to transform your coding abilities and open
doors to exciting career opportunities!

Full Stack Web Developers –

Full Stack web developers have the ability to design
complete web applications and websites. They work on
the frontend, backend, database, and debugging of web
applications or websites.

3
Technology Related to Full Stack Development
Front-end Development –
It is the visible part of website or web application which is
responsible for user experience. The user directly interacts
with the front end portion of the web application or website.

Frontend Technologies –
 HTML : HTML stands for Hyper Text Markup
Language. It is used to design the front end portion of
web pages using markup language. HTML is the
combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. The
markup language is used to define the text
documentation within tag which defines the structure of
web pages.
 CSS : Cascading Style Sheets, fondly referred to as
CSS, is a simply designed language intended to simplify
the process of making web pages presentable. CSS
allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of
the HTML that makes up each web page.
 JavaScript : JavaScript is a famous scripting language
used to create the magic on the sites to make the site
interactive for the user. It is used to enhancing the
functionality of a website to running cool games and
web-based software.

4
Front End Libraries and Frameworks
 AngularJS : AngularJs is a JavaScript open source
front-end framework that is mainly used to develop
single page web applications(SPAs). It is a continuously
growing and expanding framework which provides better
ways for developing web applications. It changes the
static HTML to dynamic HTML. It is an open source
project which can be freely used and changed by anyone.
It extends HTML attributes with Directives, and data is
bound with HTML.
 React.JS : React is a declarative, efficient, and flexible
JavaScript library for building user interfaces. ReactJS is
an open-source, component-based front end library
responsible only for the view layer of the application. It
is maintained by Facebook.
 Bootstrap : Bootstrap is a free and open-source tool
collection for creating responsive websites and web
applications. It is the most popular HTML, CSS, and
JavaScript framework for developing responsive, mobile-
first web sites.
 JQuery : jQuery is an open source JavaScript library
that simplifies the interactions between an HTML/CSS
document, or more precisely the Document Object
Model (DOM), and JavaScript. Elaborating the terms,
jQuery simplifies HTML document traversing and
manipulation, browser event handling, DOM animations.

5
 Back-end Technologies

It refers to the server-side development of web

application or website with a primary focus on how the
website works. It is responsible for managing the
database through queries and APIs by client-side
commands. This type of website mainly consists of three
parts front end, back end, and database. The back end
portion is built by using some libraries, frameworks, and
languages which are discussed below:

 PHP : PHP is a server-side scripting language

designed specifically for web development. Since,
PHP code executed on server side so it is called
server side scripting language.
 C++ : It is a general purpose programming
language and widely used now a days for
competitive programming. It is also used as backend
language.
 Java : Java is one of the most popular and widely
used programming language and platform. It is
highly scalable. Java components are easily
available.
 Python : Python is a programming language that
lets you work quickly and integrate systems more
efficiently.

6
  Node.js : Node.js is an open source and cross-
platform runtime environment for executing
JavaScript code outside of a browser. You need to
remember that NodeJS is not a framework and it’s
not a programming language. Most of the people are
confused and understand it’s a framework or a
programming language.

History of JavaScript

JavaScript was first implemented in Netscape Navigator, the

most popular browser at the time. Microsoft quickly adopted
it for Internet Explorer. Its ease of use and unique position as
the only client-side scripting language made JavaScript
popular among web developers.
Over the years, JavaScript’s popularity grew, and it was used
to create a variety of web applications, including online
games, dynamic menus, and form validation. A new version,
ECMAScript 4, was planned in 2002 but was abandoned due
to disagreements among browser vendors.
Today, JavaScript is one of the most popular programming
languages, used by about 95% of websites. It is not only
crucial for web development but also for creating server-side
applications, desktop and mobile apps, and even programming
robots and hardware.
7
 What is Web Development

Web development refers to the creating, building, and

maintaining of websites. It includes aspects such as web
design, web publishing, web programming, and database
management. It is the creation of an application that works
over the internet i.e. websites.

The word Web Development is made up of two words, that is:

 Web : It refers to websites, web pages or anything that

works over the internet.
 Development : It refers to building the application
from scratch.

Web Development can be classified into two ways :

 Frontend Development
 Backend Development

Frontend Development :
The part of a website where the user interacts directly is
termed as front end. It is also referred to as the ‘client side’ of
the application.

8
Frontend Roadmap :

Popular Frontend Technologies :

 HTML : HTML stands for HyperText Markup
Language. It is used to design the front end portion of
web pages using markup language. It acts as a skeleton
for a website since it is used to make the structure of a
website.
 CSS : Cascading Style Sheets fondly referred to as CSS
is a simply designed language intended to simplify the
process of making web pages presentable. It is used to
style our website.
 JavaScript : JavaScript is a scripting language used
to provide a dynamic behavior to our website.
9
  Bootstrap : Bootstrap is a free and open-source tool
collection for creating responsive websites and web
applications. It is the most popular CSS framework for
developing responsive, mobile-first websites. Nowadays,
the websites are perfect for all browsers (IE, Firefox, and
Chrome) and for all sizes of screens (Desktop, Tablets,
Phablets, and Phones).

Backend Development :
Backend is the server side of a website. It is part of the
website that users cannot see and interact with. It is the
portion of software that does not come in direct contact
with the users. It is used to store and arrange data.

Backend Roadmap :

10
 Popular Backend Technologies :

 PHP : PHP is a server-side scripting language

designed specifically for web development.
 Java : Java is one of the most popular and widely
used programming languages. It is highly scalable.
 Python : Python is a programming language that lets
you work quickly and integrate systems more
efficiently.
 Node.js : Node.js is an open source and cross-
platform runtime environment for executing
JavaScript code outside a browser.

Databases
In web technology, a database is a structured collection of data
that is stored electronically and accessed via a web
application. It serves as the backend component where data is
stored, managed, and retrieved. Databases can be relational
(like MySQL, PostgreSQL) using structured tables and SQL
for queries, or non-relational (like MongoDB, CouchDB)
which store data in flexible, document-oriented formats. They
enable web applications to handle dynamic content, user data,
transactions, and more by providing efficient storage,
retrieval, and manipulation capabilities. Database
management systems (DBMS) are used to interact with the
database, ensuring data integrity, security, and performance.
11
Relational Database
A relational database stores data in tables, similar to a
spreadsheet, where each table has rows and columns. The
rows hold individual records, and the columns define the data
attributes. Tables can be linked to each other through special
keys, allowing related data to be connected.

NoSQL Database
A NoSQL database stores data in a flexible, non-tabular
format, unlike traditional relational databases. Instead
of using tables with rows and columns, NoSQL
databases might use documents, key-value pairs, wide-
columns, or graphs to store data. This allows them to
handle large amounts of unstructured or semi-structured
data efficiently. They are designed to scale easily and
manage big data applications.NoSQL databases are
often used in applications where there is a high volume
of data that needs to be processed and analyzed in real-
time, such as social media analytics, e-commerce, and
gaming. They can also be used for other applications,
such as content management systems, document
management, and customer relationship management.
NoSQL originally referring to non SQL or non
relational is a database that provides a mechanism for
storage and retrieval of data.

12
Bootstrap – A CSS Framework
Bootstrap is a free and open-source toolkit designed for
building responsive websites and web applications. It is one of
the most popular CSS frameworks. Bootstrap help developers
to create mobile-first, adaptive web designs that work
seamlessly across all devices and screen sizes. Originally
developed by Mark Otto and Jacob Thornton at Twitter.
Bootstrap has evolved into a widely-used framework,
ensuring compatibility with major browsers like Internet
Explorer, Firefox, and Chrome.

CSS frameworks are pre-designed libraries that simplify web

development by providing ready-to-use CSS components and
styles. It enable faster, consistent, and responsive web design
across various devices and browsers. It enhance the efficiency
and ensures a uniform look without repetitive coding. Popular
examples include Bootstrap and Tailwind CSS.

13
Why Use Bootstrap?
Bootstrap simplifies web development by offering a
responsive, mobile-first framework with pre-designed
components. It streamlines the creation of modern,
professional websites with its easy-to-use grid system and
built-in JavaScript plugins. With extensive browser
compatibility and a strong community, Bootstrap accelerates
development time, ensuring consistent and visually appealing
designs across all devices.

Getting Started with Bootstrap

1. Setting Up Your Environment

To start using Bootstrap, ensure you have a basic

development environment set up. Install a code editor
like VSCode or Sublime Text, and ensure you have a
local server environment or are comfortable with live
server options in your code editor. Bootstrap works with
any web server setup, so you can choose the one that best
fits your workflow.

2. Including Bootstrap in your Project

Bootstrap can be included in your project either via a

Content Delivery Network (CDN) or by downloading it
directly.

14
CDN Links
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/b
ootstrap.min.css" rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjX
h0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boot
strap.bundle.min.js" integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9Gkc
IdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Node.JS

Node.js is an open-source server environment that

uses JavaScript on the server. A Node.js application runs
within a single process, without generating a new thread for
each request. Node.js includes asynchronous I/O primitives as
a part of its standard library, which prevents JavaScript code
from blocking and, in general, libraries in Node.js are
developed using non-blocking paradigms. This makes
blocking behaviour the exception instead of the rule.
It is developed by Ryan Dahl in the year 2009 and v22.4.1 is
the latest version of Node.js. Because it is cross-platform

15
one can easily run on Windows, Linux, Unix, macOS and
more.
Node.js is the backbone of modern web development,
providing a powerful environment for server-side scripting. To
take your skills further and become proficient in building full-
stack applications, the Full Stack Development with React &
Node JS course offers a complete guide to mastering Node.js
in real-world projects.
Node.js has a unique advantage because millions of frontend
developers who write JavaScript for the browser can now
write server-side code without needing to learn a completely
new language. Node.js is one of the popular choices for
developing RESTful APIs, microservices and web application.

Installing Node.js
To begin using Node.js, you need to install it on your system.

Installing on Windows/macOS :
1. Visit the official Node.js website.
2. Download the latest suitable for your OS.
3. Run the installer and follow the instructions.
4. Verify the installation by running the following command
in your terminal or command prompt.
node -v

16
 React.JS
React is a JavaScript Library used to build user interfaces. It
is developed by Facebook. It simplifies creating dynamic
and interactive web apps with the help of component-based
architecture, reusability, and efficient rendering with
the JSX and virtualDOM.
React JS is used to create single-page applications (SPAs).
It is known for its component-based architecture which
allows you to create reusable UI components, making
complex web applications easier to manage and maintain.

Getting Started with React: Installation and

Environment Setup

1. Node.js and npm : Download and install Node.js

(https://nodejs.org/en/download/package-
manager/current) as it provides the runtime
environment for JavaScript code execution. npm (Node
Package Manager) is bundled with Node.js and is used to
manage project dependencies.
2. Create React App : Using Create React App (CRA) to
establish a new React project with minimal
configuration. Run npx create-react-app my-react-
app in your terminal, replacing my-react-app with your
desired project name.
17
Characteristics of React :

1. JSX(JavaScript Syntax Extension) :

JSX combines HTML and Javascript, allowing you to
embed JavaScript objects within HTML elements. It
enhances code readability and simplifies the UI
Development.

Example :

const name = "GeekforGeeks";

const ele = <h1>Welcome to {name}</h1>;

2. Virtual DOM(Document Object Model) :

React uses a virtual DOM, which is an exact copy of the
real DOM. When there are modifications in the web
application, React updates the virtual DOM first and then
computes the differences between the real DOM and the
virtual DOM. This approach minimizes unnecessary re-
rendering and improves performance.

3. One Way Data Binding :

React follows one-way data binding, where data flows

from parent components to child components.
18
 Child components cannot directly return data to their
parent components, but they can communicate with
parents to modify states based on provided inputs.

4. Performance : React’s virtual DOM and component-

based architecture contribute to better performance.
Separate components allow efficient rendering and faster
execution.

5. Extension : React has a rich ecosystem and supports

various extensions. Explore tools like Flux, Redux, and
React Native for mobile app development and server-
side rendering.

19
 PROJECTS

1. Slider
2. Bootstrap Menu
3. BMI Calculator
4. To Do List Using JavaScript
5. Random Image Generator
6. 3 Chance Win Game
7. PDF Upload
8. Notification Panel
9. QR Generator App
10. HTTP server in Node JS
11. Typing App
12. Dynamic Adding Content

20
 1. Slider Using HTML, CSS, JavaScript
Index.html :

Style.css :

21
 Script.Js :

Output :

22
 2. Bootstrap Menu
Index.html :

Output :

23
 3. BMI Calculator

Index.js :

24
 Output :

4.To do list using JavaScript

Index.html

25
26
Output:

5. Random Image Generator :

Index.html :

27
 Output :

28
 5. 3 Chance Win Game :
Index.html :

29
Output :

30
 6. Notification Panel in JavaScript
Index.html :

31
 Output :

32
 7.QR Code Generator
Index.html

Output :

33
 8. Dynamic Adding Content Using JavaScript
Index.html :

34
 Output :

9. HTTP Server in NodeJs

server.js :

Output :

35
 10. Upload PDF using HTML and CSS
Index.html :

Output :

36
37
11. Typing Test App using React
App.js :

TypingTest.js :

38
39
 Output :

12. Youtube Video Upload

Index.html :

40
 Output :

41