Internship Report 286[1] Ravi

PROBLEM STATEMENT:
In today's digital age, businesses and organizations need robust, scalable, and user-friendly web
applications to stay competitive and meet the needs of their customers. The primary challenge is to
develop a full stack web application that seamlessly integrates front-end and back-end technologies to
provide a cohesive and efficient user experience. This involves designing an intuitive user interface (UI)
that is both aesthetically pleasing and functional, while ensuring that the back-end architecture can handle
data processing, storage, and retrieval efficiently. Additionally, the web application must be responsive,
ensuring compatibility across various devices and screen sizes, which is crucial for reaching a broader
audience.
The development process requires a comprehensive understanding of both front-end and back-end
technologies. On the front end, technologies such as HTML, CSS, and JavaScript, along with frameworks
like React or Angular, are essential for creating dynamic and interactive user interfaces. On the back end,
developers need to be proficient with server-side languages such as Node.js, Python, or Ruby, and
frameworks like Express or Django. Furthermore, the application must integrate with databases such as
MySQL, MongoDB, or PostgreSQL to manage data efficiently. Ensuring secure data transmission,
implementing authentication and authorization mechanisms, and handling API integrations are critical
components of the back-end development process.
Moreover, the project must adhere to best practices in software development, including version control,
testing, and continuous integration/continuous deployment (CI/CD). This involves using tools like Git for
version control, writing unit and integration tests to ensure code reliability, and automating the
deployment process to streamline updates and maintenance. Additionally, the development team must
collaborate effectively, often using project management tools like Jira or Trello to track progress and
manage tasks. Ultimately, the goal is to deliver a high-quality, full stack web application that meets the
client's requirements, provides an excellent user experience, and is maintainable and scalable for future
growth.
N.B.K.R.I.S.T Page | 1
ABSTRACT:
Slashmark IT Startup Company specializes in delivering comprehensive full stack web development
solutions designed to empower businesses in the digital era. Our approach seamlessly integrates frontend
and back-end technologies to create scalable, secure, and user-friendly web applications that meet the
unique needs of our clients. Utilizing modern front-end frameworks such as React, Angular, and Vue.js,
we develop dynamic and responsive user interfaces that ensure a seamless user experience across all
devices. On the back end, we employ powerful server-side languages and frameworks like Node.js,
Python with Django, and Java with Spring Boot to build efficient and robust architectures capable of
handling complex data processing and storage. Our development methodology emphasizes best practices,
including version control with Git, comprehensive testing strategies, and continuous
integration/continuous deployment (CI/CD) pipelines. We prioritize security by implementing measures
to protect against vulnerabilities such as SQL injection and cross-site scripting (XSS), and ensuring
compliance with data protection regulations like GDPR and CCPA. Additionally, our team excels in
integrating third-party services, such as payment gateways and cloud storage solutions, enhancing the
functionality and reach of our applications. At Slashmark, we adopt a collaborative and iterative
development approach, working closely with clients to understand their goals and requirements. This
ensures that the final product not only meets but exceeds expectations. By focusing on user-centric design,
accessibility, and performance optimization, we deliver web applications that provide exceptional user
experiences and drive business success. Our commitment to continuous improvement and innovation
positions Slashmark IT Startup as a leader in full stack web development, ready to tackle the challenges
of the evolving digital landscape and help our clients achieve their digital objectives.
CHAPTER – 1
FULL STACK WEB DEVELOPMENT
1.1 Introduction:
Full-stack development refers to the comprehensive approach of building web applications that
encompass both the front-end and back-end components. It involves the integration of various
technologies and frameworks to create a seamless user experience and robust functionality. The
frontend, also known as the client-side, is the part of the application that users interact with directly. It
includes everything the user sees and interacts with, such as the user interface (UI), design elements,
and user experience (UX) features. Front-end development typically involves languages such as
HTML, CSS, and JavaScript. HTML provides the structure of web pages, CSS controls the
presentation and styling, while JavaScript adds interactivity and dynamic behavior to web pages.
Modern front-end development often utilizes frameworks and libraries like React, Angular, or Vue.js
to streamline the development process and enhance the functionality of web applications. These
frameworks allow developers to build interactive user interfaces efficiently and maintainable
codebases. Responsive web design is also crucial in front-end development, ensuring that web
applications adapt seamlessly to different screen sizes and devices, providing a consistent user
experience across desktops, tablets, and smartphones. On the other hand, the back-end, also known as
the server-side, is responsible for managing data, processing requests, and handling business logic. It
operates behind the scenes, supporting the functionality of the front-end and interacting with databases
and other external systems.
Back-end development involves building server-side applications using languages such as Python,
Ruby, Java, or JavaScript (with Node.js). These languages enable developers to create the logic and
algorithms necessary for the functioning of web applications. Back-end frameworks like Django
(Python), Ruby on Rails (Ruby), Spring (Java), or Express.js (JavaScript) provide developers with
prebuilt tools and libraries to expedite the development process and maintain code consistency.
Database management is a critical aspect of back-end development, as it involves storing, retrieving,
and manipulating data efficiently. Common databases used in web development include SQL databases
like MySQL, PostgreSQL, or NoSQL databases like MongoDB.
APIs (Application Programming Interfaces) play a vital role in back-end development, facilitating
communication between different software applications. RESTful APIs are commonly used to define
the rules for how applications should interact with each other over the web. Security is a paramount
concern in both front-end and back-end development. Front-end developers need to implement
measures to protect against cross-site scripting (XSS) attacks, while back-end developers must
safeguard against SQL injection, authentication vulnerabilities, and other security threats. Full-stack
developers are proficient in both front-end and back-end technologies, allowing them to work on all
aspects of web application development. They possess a comprehensive understanding of web
architecture, databases, server-side scripting, and client-side scripting.
Agile methodologies such as Scrum or Kanban are often employed in full-stack development projects
to promote collaboration, flexibility, and iterative development cycles. This approach allows teams to
adapt to changing requirements and deliver value to stakeholders more efficiently. Continuous
integration and continuous deployment (CI/CD) practices are also prevalent in full-stack development,
enabling teams to automate the build, testing, and deployment processes. This results in faster release
cycles and higher-quality software. Front-end frameworks like React.js have gained widespread
popularity in recent years due to their component-based architecture and virtual DOM rendering, which
enable developers to build highly interactive and dynamic user interfaces with ease. React's ecosystem,
including tools like Redux for state management and React Router for client-side routing, empowers
developers to create sophisticated web applications efficiently.
User experience (UX) design is an integral part of front-end development, focusing on understanding
users' needs and preferences to create intuitive and engaging interfaces. Front-end developers often
collaborate closely with UX designers to implement design prototypes and ensure a seamless user
journey through the application. Accessibility is another crucial consideration in front-end
development, ensuring that web applications are usable by people with disabilities. Front-end
developers need to adhere to accessibility standards such as the Web Content Accessibility Guidelines
(WCAG) and implement features like semantic HTML, ARIA roles, and keyboard navigation to make
their applications accessible to all users. Back-end development involves designing and implementing
server-side architecture to support the functionality of web applications. This includes tasks such as
configuring servers, managing databases, and implementing APIs to handle data exchange between the
front-end and back-end systems.
Microservices architecture has emerged as a popular approach to back-end development, breaking

down monolithic applications into smaller, independent services that can be developed, deployed, and
scaled individually. Microservices promote flexibility, scalability, and resilience, allowing teams to
iterate on specific features or components without affecting the entire application. Cloud computing
platforms like Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP)
have revolutionized back-end development by providing scalable infrastructure and managed services
that streamline deployment and operations. Back-end developers leverage cloud services like AWS
Lambda for serverless computing, Amazon RDS for managed databases, and AWS API Gateway for
building scalable APIs.
In conclusion, full-stack development encompasses both front-end and back-end technologies,

requiring proficiency in a wide range of programming languages, frameworks, and tools. By mastering
both aspects of web development, full-stack developers are capable of building robust, scalable, and
feature-rich web applications that meet the demands of today's digital landscape.
1.2 History:
The history of full stack web development is intertwined with the evolution of the internet and web
technologies. In the early 1990s, the advent of the World Wide Web transformed how information was
shared and accessed. Early websites were simple, static HTML pages, which provided basic text and
images without interactive elements. Web development at this stage was relatively straightforward,
focusing primarily on front-end development using HTML and, later, CSS to enhance the visual
presentation.
The mid to late 1990s marked a significant shift with the introduction of server-side scripting languages
like Perl, PHP, and ASP (Active Server Pages). These technologies enabled the creation of dynamic
web pages that could interact with databases and provide more personalized content to users. This
period saw the rise of the LAMP stack (Linux, Apache, MySQL, PHP), which became a popular
framework for developing dynamic websites. The distinction between front-end and back-end
development began to emerge more clearly, with developers specializing in either client-side scripting
(using JavaScript) or server-side programming.
The early 2000s brought further advancements with the development of more sophisticated web
frameworks and the introduction of AJAX (Asynchronous JavaScript and XML). AJAX allowed web
pages to update asynchronously by exchanging small amounts of data with the server behind the
scenes, leading to more interactive and responsive user interfaces. This era also saw the rise of content
management systems (CMS) like WordPress, which simplified the process of building and managing
websites.
The concept of "full stack" web development gained prominence in the late 2000s and early 2010s as
the complexity of web applications grew. Full stack developers are proficient in both front-end and
back-end technologies, enabling them to handle the entire development process from designing user
interfaces to managing server infrastructure and databases. The emergence of powerful front-end
frameworks like Angular, React, and Vue.js, along with back-end frameworks such as Node.js, Django,
and Ruby on Rails, facilitated the development of highly interactive and scalable web applications.
In recent years, the proliferation of cloud computing and DevOps practices has further transformed full
stack web development. Developers now leverage cloud services for scalable infrastructure,
continuous integration/continuous deployment (CI/CD) pipelines for efficient deployment, and
containerization technologies like Docker for consistent development environments. The modern full
stack developer must be adept at using a wide array of tools and technologies, from front-end design
and user experience (UX) to back-end architecture and security, reflecting the ever-evolving nature of
web development.
CHAPTER - 2
Hypertext Markup Language (HTML)
2.1 Introduction:
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages.
• Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus,
the link available on a webpage is called Hypertext.
• As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in
HTML language.
Basic HTML Document:

In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here ........... </p>
</body>
</html>
Either you can use Try it option available at the top right corner of the code box to check theresult of
this HTML code, or let's save it in an HTML file test.htm using your favorite text editor. Finally open
it using a web browser like Internet Explorer or Google Chrome, or Firefox etc. It must show the
following output:
2.2 HTML Tags:
As told earlier, HTML is a markup language and makes use of various tags to format the content. These
tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their
corresponding closing tags. For example, <html> has its closing tag</html> and <body> tag has its
closing tag </body> tag etc.
Above example of HTML document uses the following tags:
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
This tag encloses the complete HTML document and mainly comprises
<html>
of document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.
This tag represents the document's header which can keep other HTML
<head> tags like <title>, <link> etc.
The <title> tag is used inside the <head> tag to mention the document title.
<title>
This tag represents the document's body which keeps other HTML tags like
<body> <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
To learn HTML, you will need to study various tags and understand how they behave, while formatting
a textual document. Learning HTML is simple as users have to learn the usage of different tags in order
to format the text or images to make a beautiful webpage.
World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.
HTML Document Structure:

A typical HTML document will have the following structure:
Document declaration tag

<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
We will study all the header and body tags in subsequent chapters, but for now let's see what is
document declaration tag.
The <!DOCTYPE> Declaration:

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML
used in the document. Current version of HTML is 5 and it makes use of the following declaration:
<!DOCTYPE html>
There are many other declaration types which can be used in HTML document depending on what
version of HTML is being used. We will see more details on this while discussing
<!DOCTYPE...> tag along with other HTML tags.
Heading Tags:
Any document starts with a heading. You can use different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While
displaying any heading, browser adds one line before and one line after that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
This will produce the following result:
Paragraph Tag:
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph oftext should
go in between an opening <p> and a closing </p> tag as shown below in the example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body> </html>
Here is a first paragraph of text.

Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag:

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an
example of an empty element, where you do not need opening and closing tags, asthere is nothing to
go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space,
older browsers will have trouble rendering the line break, while if you miss the forward slash character
and just use <br> it is not valid in XHTML. Example:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Centering Content:
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

This text is not in the center.
This text is in the center.
Horizontal Lines:
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from
the current position in the document to the right margin and breaks the line accordingly.
For example, you may want to give a line between two paragraphs as in the given example below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p> <hr />
<p>This is paragraph two and should be at bottom</p>
</body> </html>
This is paragraph one and should be on top
This is paragraph two and should be at bottom
Again <hr /> tag is an example of the empty element, where you do not need opening and closing
tags, as there is nothing to go in between them.
The <hr /> element has a space between the characters hr and the forward slash. If you omit this space,
older browsers will have trouble rendering the horizontal line, while if you miss the forward slash
character and just use <hr> it is not valid in XHTML
Preserve Formatting:
Sometimes, you want your text to follow the exact format of how it is written in the HTML document.
In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the
source document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre> function testFunction( strText
){ alert
(strText)
}
</pre>
</body>
</html>

function testFunction( strText ){
alert (strText)
}
Try using the same code without keeping it inside <pre>...</pre> tags
Nonbreaking Spaces:
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the
"12, Angry" and "Men" across two lines:
An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you should use a nonbreaking space
entity instead of a normal space. For example, when coding the "12 Angry Men" in a
paragraph, you should use something similar to the following code:
2.3 HTML Attributes:
We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and
other tags. We used them so far in their simplest form, but most of the HTML tagscan also have
attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside theelement's
opening tag. All attributes are made up of two parts: a name and a value:
• The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicatethe alignment
of paragraph on the page.
• The value is what you want the value of the property to be set and always put within quotations.
The below example shows three possible values of align attribute: left, center and right.
• Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
This will display the following result:
This is left aligned

This is center aligned
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p> </body> </html>
Core Attributes:
The four core attributes that can be used on the majority of HTML elements (although not all)are:
• Id
• Title
• Class
• Style
The Id Attribute:
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.
There are two primary reasons that you might want to use an id attribute on an element:
• If an element carries an id attribute as a unique identifier, it is possible to identify just that
element and its content.
• If you have two elements of the same name within a Web page (or style sheet), you can use the
id attribute to distinguish between elements that have the same name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between
two paragraph elements as shown below.
Example
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
The title Attribute:

The title attribute gives a suggested title for the element. They syntax for the title attributeis similar
as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often displayed
as a tooltip when cursor comes over the element or while the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3> </body>
</html>
Titled Heading Tag Example

Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title
you used in your code is coming out as a tooltip of the cursor.
The class Attribute:

The class attribute is used to associate an element with a style sheet, and specifies the class of element.
You will learn more about the use of the class attribute when you will learn Cascading Style Sheet
(CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example:
class="className1 className2 className3"
The style Attribute:

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
Some text...
At this point of time, we are not learning CSS, so just let's proceed without bothering much about CSS.
Here, you need to understand what are HTML attributes and how they can be used while formatting
content.
2.4 HTML – Formatting:

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or
underlined; these are just three of the ten options available to indicate how text can appear in HTML
and
XHTML.
Bold Text: Anything that appears within <b>...</b> element, is displayed in bold as
shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body> </html>
The following word uses a bold typeface.
Italic Text:
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
The following word uses anitalicized typeface.
Underlined Text:
Anything that appears within <u>...</u> element, is displayed with underline as shownbelow:
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body> </html>
The following word uses an underlined typeface.
CHAPTER - 3
Cascading Style Sheets (CSS)
3.1 Introduction:
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background
images or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides a powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Advantages of CSS:
• CSS saves time - You can write CSS once and then reuse the same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many web pages as you
want.
• Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code
means faster download times.
• Easy maintenance - To make a global change, simply change the style, and all the elements in
all the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can
give a far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be optimized for morethan one
type of device. By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cellphones or for printing.
• Global web standards – Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make
them compatible with future browsers.
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts:
• Selector: A selector is an HTML tag at which a style will be applied. This could be anytag like
<h1> or <table> etc.
• Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could be color, border, etc.
• Value: Values are assigned to properties. For example, color property can have the value either
red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows:
selector { property: value }
Example: You can define a table border as follows:
table{ border :1px solid #C00; }
Here table is a selector and border is a property and the given value 1px solid #C00 is the value of that
property.
You can define selectors in various simple ways based on your comfort. Let me put these selectors one
by one.
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the W3C called the CSS Working
Group. The CSS Working Group creates documents called specifications. When a specification has
been discussed and officially ratified by the W3C members, it becomes a recommendation.
These ratified specifications are called recommendations because the W3C has no control overthe
actual implementation of the language. Independent companies and organizations create that software.
NOTE: The World Wide Web Consortium or W3C is a group that makes recommendations about how
the Internet works and how it should evolve.
CSS Versions
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996.
This version describes the CSS language as well as a simple visual formatting model for all the HTML
tags.
CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support
for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning
and tables.
3.2 CSS – Syntax:

The Type Selectors:
This is the same selector we have seen above. Again, one more example to give a color to all level 1
headings:
h1 { color: #36CFFF;
}
The Universal Selectors: Rather than selecting elements of a specific type, the universal selector
quite simply matchesthe name of any element type:
* { color: #000000;
}
This rule renders the content of every element in our document in black.
The Descendant Selectors:

Suppose you want to apply a style rule to a particular element only when it lies inside a particular
element. As given in the following example, the style rule will apply to <em> element only when it
lies inside the <ul> tag.
ul em { color: #000000;
}
The Class Selectors:

You can define style rules based on the class attribute of the elements. All the elements having that
class will be formatted according to the defined rule.
.black { color:
#000000; }
This rule renders the content in black for every element with class attribute set to black in our
document. You can make it a bit more particular. For example:
h1.black { color:
#000000; }
This rule renders the content in black for only <h1> elements with class attribute set to black.
You can apply more than one class selectors to a given element. Consider the followingexample:
<p class="center bold">

This para will be styled by the classes center and bold.
</p>
The ID Selectors:
You can define style rules based on the id attribute of the elements. All the elements havingthat
id will be formatted according to the defined rule.
#black { color:
#000000; }
This rule renders the content in black for every element with id attribute set to black in ourdocument.
You can make it a bit more particular. For example:
h1#black { color:
#000000; }
This rule renders the content in black for only <h1> elements with id attribute set to black.
The true power of id selectors is when they are used as the foundation for descendantselectors. For
example:
#black h2 { color: #000000;

}
In this example, all level 2 headings will be displayed in black color when those headings will lie
within tags having id attribute set to black.
The Child Selectors:
You have seen the descendant selectors. There is one more type of selector, which is verysimilar to
descendants but have different functionality. Consider the following example:
body > p { color: #000000;

}
This rule will render all the paragraphs in black if they are a direct child of the <body> element. Other
paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.
The Attribute Selectors:

You can also apply styles to HTML elements with particular attributes. The style rule below will match
all the input elements having a type attribute with a value of text:
input[type="text"]{color: #000000;
}
The advantage to this method is that the <input type="submit" /> element is unaffected, and the color
applied only to the desired text fields.
There are following rules applied to attribute selector.
• p[lang] - Selects all paragraph elements with a lang attribute.
• p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value ofexactly
"fr".
• p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains theword
"fr".
• p[lang|="en"] - Selects all paragraph elements whose lang attribute contains
values that are exactly "en", or begin with "en-".
Multiple Style Rules:
You may need to define multiple style rules for a single element. You can define these rules to combine
multiple properties and corresponding values into a single block as defined in the following example:
h1 { color: #36C; font-weight: normal; letter-spacing: .4em;

margin-bottom: 1em; text-transform: lowercase;
}
Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single
line or multiple lines. For better readability, we keep them in separate lines.
For a while, don't bother about the properties mentioned in the above block. These properties will be
explained in the coming chapters and you can find the complete detail about properties in CSS
References.
Grouping Selectors:
You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given
in the following example:
h1, h2, h3 { color: #36C; font-weight: normal; letter-

spacing: .4em; margin-bottom: 1em; text-transform:
lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is
irrelevant. All the elements in the selector will have the corresponding declarations appliedto them.
You can combine the various class selectors together as shown below
#content, #footer, #supplement { position: absolute; left: 510px; width:
200px;
}
3.3 Measurement Units:
Before we start the actual exercise, we would like to give a brief idea about the CSS Measurement
Units. CSS supports a number of measurements including absolute units such as inches, centimeters,
points, and so on, as well as relative measures such as percentages and em units. You need these values
while specifying various measurements in your Style rules e.g. border="1px solid red".
We have listed out all the CSS Measurement Units along with proper Examples:
Unit Description Example
Defines a measurement as a percentage
% p {font-size: 16pt; line-height:
relative to another value, typically an
125%;}
enclosing element.
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
A relative measurement for the height of a

font in em spaces. Because an em unit is
em equivalent to the size of a given font, if you p {letter-spacing: 7em;}
assign a font to 12pt, each "em" unit would
be 12pt; thus, 2em would be 24pt.
This value defines a measurement relative

p {font-size: 24pt; line-height:
to a font's x-height. The x-height is
ex 3ex;}
determined by the height of the font's
lowercase letter x.
in Defines a measurement in inches. p {word-spacing: .15in;}
mm Defines a measurement in millimeters. p {word-spacing: 15mm;}
Defines a measurement in picas. A pica is

pc p {font-size: 20pc;}
equivalent to 12 points; thus, there are 6
picas per inch.
Defines a measurement in points. A point is

Pt body {font-size: 18pt;}
defined as 1/72nd of an inch.
Defines a measurement in screen pixels p {padding: 25px;}
Px
3.4 CSS Colors:

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground
of an element (i.e., its text) or for the background of the element. They can also be used to affect the
color of borders and other decorative effects.
You can specify your color values in various formats. Following table lists all the possible formats:
Format Syntax Example
Hex Code #RRGGBB p{color:#FF0000;}
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
keyword aqua, black, etc. p{color:teal;}
These formats are explained in more detail in the following sections:
3.5 CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent a red value, the
next two are a green value (GG), and the last are the blue value (BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop
Pro, or even using Advanced Paint Brush.
COLOR COLOR HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Each hexadecimal code will be preceded by a pound or hash sign ‘#’. Following are the examples to
use Hexadecimal notation.
CSS Colors - Short Hex Codes:

This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an
equivalent six-digit value. For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop
Pro or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign #. Following are the examples to use
the Hexadecimal notation.
CHAPTER-4
Java Script (JS)
4.1 Introduction:
Javascript is a dynamic computer programming language. It is lightweight and most commonly used
as a part of web pages, whose implementations allow client-side script to interact with the user and
make dynamic pages. It is an interpreted programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in Netscape
2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded
in Netscape, Internet Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.
• JavaScript is a lightweight, interpreted programming language.
• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML. • Open and cross-platform.
Client-Side JavaScript:
Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs that interact with the
user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address
in a form field
The JavaScript code is executed when the user submits the form, and only if all the entries are valid,
they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly.
Advantages of JavaScript:
The merits of using JavaScript are:
• Less server interaction: You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.
• Immediate feedback to the visitors: They don't have to wait for a page reload to see if
they have forgotten to enter something.
• Increased interactivity: You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.
• Richer interfaces: You can use JavaScript to include such items as drag-and- drop
components and sliders to give a Rich Interface to your site visitors.
Limitations of JavaScript:
We cannot treat JavaScript as a full-fledged programming language. It lacks the following important
features:
• Client-side JavaScript does not allow the reading or writing of files. This has been kept
for security reason.
• JavaScript cannot be used for networking applications because there is no such support
available.
• JavaScript doesn't have any multithreading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.
JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within you web page, but it is
normally recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these tags as a
script. A simple syntax of your JavaScript will appear as follows.
<script ...>
JavaScript code
</script>
The script tag takes two important attributes:

• Language: This attribute specifies what scripting language you are using. Typically, its
value will be javascript. Although recent versions of HTML (and XHTML, its successor)
have phased out the use of this attribute.
• Type: This attribute is what is now recommended to indicate the scripting language in
use and its value should be set to "text/javascript".
So your JavaScript syntax will look as follows.
<script language="javascript" type="text/javascript"> JavaScript code

</script>
4.2 First JavaScript

Code:
Let us take a sample example to print out "Hello World". We added an optional HTML comment that
surrounds our JavaScript code. This is to save our code from a browser that does not support JavaScript.
The comment ends with a "//-->". Here "//" signifies a comment in JavaScript, so we add that to prevent
a browser from reading the end of the HTML comment as a piece of JavaScript code. Next, we call a
function document.write which writes a string into our HTML document.
This function can be used to write text, HTML, or both. Take a look at the following code.
<html>
<body>
<script language="javascript" type="text/javascript">

</script>
</body>
</html>
This code will produce the following result:
Hello World!
Whitespace and Line Breaks:

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You can use spaces,
tabs, and newlines freely in your program and you are free to format and indent your programs in a
neat and consistent way that makes the code easy to read and understand.
Semicolons are Optional:

Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C,
C++, and Java. JavaScript, however, allows you to omit this semicolon if each of your statements are
placed on a separate line. For example, the following code could be written without semicolons.
<<!script-- language="javascript" type="text/javascript">
var1 = 10
var2 = 20
//-->
</script>
But when formatted in a single line as follows, you must use semicolons:


</script>
Note: It is a good programming practice to use semicolons.
Case Sensitivity:
JavaScript is a case-sensitive language. This means that the language keywords, variables,
function names, and any other identifiers must always be typed with a consistent capitalization
of letters.
So the identifiers Time and TIME will convey different meanings in JavaScript.
NOTE: Care should be taken while writing variable and function names in JavaScript.
Comments in JavaScript:
JavaScript supports both C-style and C++-style comments. Thus:

• Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
• Any text between the characters /* and */ is treated as a comment. This may span multiple lines
• JavaScript also recognizes the HTML comment opening sequence  is not recognized by JavaScript so it should be
written as //-->.
Example
The following example shows how to use comments in JavaScript.


</script>
4.3 Java Script – Enabling:

All the modern browsers come with built-in support for JavaScript. Frequently, you may need to enable
or disable this support manually. This chapter explains the procedure of enabling and disabling
JavaScript support in your browsers: Internet Explorer, Firefox, chrome, and Opera.
Java Script in Internet

Explorer
Here are the steps to turn on or turn off JavaScript in Internet Explorer:
• Follow Tools -> Internet Options from the menu.
• Select Security tab from the dialog box.
• Click the Custom Level button.
• Scroll down till you find the Scripting option.
• Select Enable radio button under Active scripting.
• Finally click OK and come out.
To disable JavaScript support in your Internet Explorer, you need to select Disable radio
button under Active scripting.
Java Script in
Firefox
Here are the steps to turn on or turn off JavaScript in Firefox:
• Open a new tab -> type about: config in the address bar.
• Then you will find the warning dialog. Select I’ll be careful, I promise!
• Then you will find the list of configure options in the browser.
• In the search bar, type javascript.enabled.
• There you will find the option to enable or disable javascript by right-clicking on the value of
that option -> select toggle.
If javascript.enabled is true; it converts to false upon clicking toogle. If javascript is disabled; it gets
enabled upon clicking toggle.
JavaScript in Chrome
Here are the steps to turn on or turn off JavaScript in Chrome:
• Click the Chrome menu at the top right hand corner of your browser.
• Select Settings.
• Click Show advanced settings at the end of the page.
• Under the Privacy section, click the Content settings button.
• In the "Javascript" section, select "Do not allow any site to run JavaScript" or "Allow all sites
to run JavaScript (recommended)".
JavaScript in Opera
Here are the steps to turn on or turn off JavaScript in Opera:
• Follow Tools-> Preferences from the menu.
• Select Advanced option from the dialog box.
• Select Content from the listed items. • Select Enable JavaScript checkbox.
• Finally click OK and come out.
To disable JavaScript support in Opera, you should not select the Enable JavaScript checkbox.
Warning for Non-JavaScript Browsers

If you have to do something important using JavaScript, then you can display a warning message to
the user using <noscript> tags.
You can add a noscript block immediately after the script block as follows:
<html>
<body>


</script>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>
Now, if the user's browser does not support JavaScript or JavaScript is not enabled, then the message
from </noscript> will be displayed on the screen.
4.4 Java Script – Variables:

JavaScript Datatypes
One of the most fundamental characteristics of a programming language is the set of data types it
supports. These are the type of values that can be represented and manipulated in a programming
language.
JavaScript allows you to work with three primitive data types:
• Numbers, e.g., 123, 120.50 etc.
• Strings of text, e.g. "This text string" etc.
• Boolean, e.g. true or false.
JavaScript also defines two trivial data types, null and undefined, each of which defines only a single
value. In addition to these primitive data types, JavaScript supports a composite data type known as
object. We will cover objects in detail in aseparate chapter.
Note: Java does not make a distinction between integer values and floating-point values. All numbers
in JavaScript are represented as floating-point values. JavaScript represents numbers using the 64-bit
floating-point format defined by the IEEE 754 standard.
JavaScript Variables
Like many other programming languages, JavaScript has variables. Variables can be thought of as
named containers. You can place data into these containers and then refer to the data simply by naming
the container.
Before you use a variable in a JavaScript program, you must declare it. Variables aredeclared with the
var keyword as follows.
<script type="text/javascript">

</script>
You can also declare multiple variables with the same var keyword as follows:
<script type="text/javascript">

</script>
Storing a value in a variable is called variable initialization. You can do variable initialization at the
time of variable creation or at a later point in time when you need that variable. For instance, you might
create a variable named money and assign the value 2000.50 to it later. For another variable, you can
assign a value at the time of initialization as follows.
CHAPTER - 5
REACT JS
5.1 Introduction:
ReactJS, also known as React, is a popular JavaScript library for building user interfaces. It is also
referred to as a front-end JavaScript library. It was developed by Facebook and is widely used for
creating dynamic and interactive web applications. In this article, we’ll explore the key concepts of
React.
What is React ?
React is a JavaScript library for building user interfaces (UIs) on the web. React is a declarative,
component based library that allows developers to build reusable UI components and It follows the
Virtual DOM (Document Object Model) approach, which optimizes rendering performance by
minimizing DOM updates. React is fast and works well with other tools and libraries. Prerequisite
of React.
For learning React first you have a clear understanding of HTML, CSS and JavaScript. As React is a
JavaScript library and uses most of its concept so you really have to understands the major concepts
of it.
HTML and CSS
JavaScript and ES6
JSX (Javascript XML) & Babel
Node+Npm
Git and CLI (Command Line Interface).
History of React
React was invented by Facebook developers who found the traditional DOM slow. By implementing a
virtual DOM, React addressed this issue and gained popularity rapidly.
The current stable version of ReactJS is 18.2.0, released on June 14, 2022. The library continues to
evolve, introducing new features with each update.
5.2 How does React work?

React operates by creating an in-memory virtual DOM rather than directly manipulating the browser’s
DOM. It performs necessary manipulations within this virtual representation before applying changes
to the actual browser DOM. React is efficient, altering only what requires modification.
5.3 Features of React:

React is one of the most demanding JavaScript librarys because it is equipped with a ton of features
which makes it faster and production-ready. Below are the few features of React.
1. Component-Based Architecture
React provides the feature to break down the UI into smaller, self-contained components. Each
component can have its own state and props.
2. JSX (JavaScript Syntax Extension)
JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within their
JavaScript files. It makes React components more readable and expressive.
3. Virtual DOM
React maintains a lightweight representation of the actual DOM in memory. When changes occur,
React efficiently updates only the necessary parts of the DOM
4. One-way Data Binding
One-way data binding, the name itself says that it is a one-direction flow. The data in react flows only
in one direction i.e. the data is transferred from top to bottom i.e. from parent components to child
components. The properties(props) in the child component cannot return the data to its parent
component but it can have communication with the parent components to modify the states according
to the provided inputs.
5. Performance
As we discussed earlier, react uses virtual DOM and updates only the modified parts. So , this makes
the DOM to run faster. DOM executes in memory so we can create separate components which makes
the DOM run faster.
6. Components
React divides the web page into multiple components as it is component-based. Each component is a
part of the UI design which has its own logic and design as shown in the below image. So the
component logic which is written in JavaScript makes it easy and run faster and can be reusable.
5.4 ReactJS Lifecycle:

Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the
series of methods that are invoked in different stages of the component’s existence. React automatically
calls these methods at different points in a component’s life cycle. Understanding these phases helps
manage state, perform side effects, and optimize components effectively.
1. Initialization
This is the stage where the component is constructed with the given Props and default state. This is
done in the constructor of a Component Class.
2. Mounting Phase Constructor: The constructor method initializes the component. It’s where you
set up initial state and bind event handlers.
render(): This method returns the JSX representation of the component. It’s called during initial
rendering and subsequent updates.
componentDidMount(): After the component is inserted into the DOM, this method is invoked. Use it
for side effects like data fetching or setting timers.
3. Updating Phase componentDidUpdate(prevProps, prevState): Called after the component
updates due to new props or state changes. Handle side effects here.
shouldComponentUpdate(nextProps, nextState): Determines if the component should re-render.
Optimize performance by customizing this method.
render(): Again, the render() method reflects changes in state or props during updates.
4. Unmounting Phase componentWillUnmount(): Invoked just before the component is removed
from the DOM. Clean up resources (e.g., event listeners, timers).
5.5 React Components:

Components are independent and reusable bits of code. They serve the same purpose as JavaScript
functions, but work in isolation and return HTML. Components come in two types, Class components
and Function components, in this tutorial we will concentrate on Function components.
Create Your First Component

When creating a React component, the component's name MUST start with an upper case letter.
1. Class Component:
A class component must include the extends React.Component statement. This statement creates an
inheritance to React.Component, and gives your component access to React.Component's functions.
The component also requires a render() method, this method returns HTML.
Example:
Create a Class component called Car
class Car extends React.Component { render()

{
return <h2>Hi, I am a Car!</h2>;
}
2. Function Component:
Here is the same example as above, but created using a Function component instead.
A Function component also returns HTML, and behaves much the same way as a Class component,
but Function components can be written using much less code, are easier to understand, and will be
preferred in this tutorial.
Example:
Create a Function component called Car
function Car() {
return <h2>Hi, I am a Car!</h2>; }

3. Rendering a Component:
Now your React application has a component called Car, which returns an <h2> element. To
use this component in your application, use similar syntax as normal HTML: <Car />
Example:
Display the Car component in the "root" element:
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Car />);
4. Props:
Components can be passed as props, which stands for properties.
Props are like function arguments, and you send them into the component as attributes.
You will learn more about props in the next chapter.
Example:
Use an attribute to pass a color to the Car component, and use it in the render() function:
function Car(props) {
return <h2>I am a {props.color} Car!</h2>; }
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car

color="red"/>);
5.6 React JSX:

JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.
Coding JSX:
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any
createElement() and/or appendChild() methods.
JSX converts HTML tags into react elements.
You are not required to use JSX, but JSX makes it easier to write React applications.
Here are two examples. The first uses JSX and the second does not:
Example 1:
JSX:
const myElement = <h1>I Love JSX!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
Output:
“I Love JSX!”
Example 2:
Without JSX:
const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
Output:
“I do not use JSX!”
As you can see in the first example, JSX allows us to write HTML directly within the JavaScript code.
JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript
at runtime.
5.7 React Render HTML:

React's goal is in many ways to render HTML in a web page.
React renders HTML to the web page by using a function called createRoot() and its method render().
The createRoot Function
The createRoot() function takes one argument, an HTML element.
The purpose of the function is to define the HTML element where a React component should be
displayed.
The render Method:

The render() method is then called to define the React component that should be rendered.
But render where?
There is another folder in the root directory of your React project, named "public". In this folder, there
is an index.html file.
You'll notice a single <div> in the body of this file. This is where our React application will be rendered.
Example:
Display a paragraph inside an element with the id of "root":
const container = document.getElementById('root'); const

root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);
The result is displayed in the <div id="root"> element:
<body>
<div id="root"></div>
</body>
Output:
“Hello”
The HTML Code:
The HTML code in this tutorial uses JSX which allows you to write HTML tags inside the JavaScript
code:
Do not worry if the syntax is unfamiliar, you will learn more about JSX in the next chapter.
Example:
Create a variable that contains HTML code and display it in the "root" node:
const myelement = (
<table>
<tr>
<th>Name</th>
<<tr/tr>>
<td>John</td>
<<tr/tr>>
<td>Elsa</td>
<</table/tr> >
);
const container = document.getElementById('root'); const root =

ReactDOM.createRoot(container); root.render(myelement);
Output:
“Name
John
Elsa”
React JS Sample Code:
import React from 'react'; import

ReactDOM from 'react-dom/client';
function Hello(props) {
return <h1>Hello World!</h1>;
}
const container = document.getElementById("root"); const
root = ReactDOM.createRoot(container);
root.render(<Hello />);
Output: “Hello World!”
CHAPTER - 6
NODE JS
6.1 Introduction:
Node.js is a powerful JavaScript runtime environment, built on Google Chrome's V8 JavaScript
Engine. Node.js is open-source and cross platform, widely used by thousands of developers around the
world to develop I/O intensive web applications like video streaming sites, single-page applications,
and other web applications.
Contrary to a perception, Node.js is not a programming language like Python, Java or C/C++. Node.js
is a runtime, similar to Java virtual machine, that converts JavaScript code into machine code.
With Node.js, it is possible to use JavaScript as a backend. With JavaScript already being a popular
choice for frontend development, application development around MERN (MongoDB, Express, React
and Node.js.) and MEAN (MongoDB, Express, Angular and Node.js) stacks is being increasingly
employed by developers.
Why Learn Node.js?
Node.js is used for server-side programming with JavaScript. Hence, you can use a single programming
language (JavaScript) for both front-end and back-end development.
Node.js implements asynchronous execution of tasks in a single thread with async and await technique.
This makes aNode.js application significantly faster than multi-threaded applications.
Node.js is being used to build command line applications, web applications, real-time chat applications,
REST APIs etc.
6.2 How to Install Node.js?

Installation of Node.js is very easy. For Windows users, the official downloads page of Node.js
(https://nodejs.org/en/download) hosts a installer package. All you need to do it download and run the
installation wizard.
On Ubuntu OS, you can use its package manager and run the following command −
sudo apt update sudo

apt install nodejs
− You may also install Node.js its binary distribution for Linux, available on the official website.
6.3 Applications of Node.js

Node.js is used for building different type of applications. Some of the application types are listed
below
• Streaming applications – Node.js can easily handle real-time data streams, where it is required
to download resources on-demand without overloading the server or the user’s local machine.
Node.js can also provide quick data synchronization between the server and the client, which
improves user experience by minimizing delays using the Node.js event loop.
• Single page apps – Node.js is an excellent choice for SPAs because of its capability to efficiently
handle asynchronous calls and heavy input/output(I/O) workloads. Data driven SPAs built with
Express.js are fast, efficient and robust.
• Realtime applications – Node.js is ideal for building lightweight real-time applications, like
messaging apps interfaces, chatbots etc. Node.js has an event- based architecture, as a result has
an excellent WebSocket support. It facilitates real-time two-way communication between the
server and the client.
• APIs – At the heart of Node.js is JavaScript. Hence, it becomes handling JSON data is easier. You
can therefore build REST based APIs with Node.js
These are some of the use cases of Node.js. However, its usage is not restricted to these types.
Companies are increasingly employing Node.js for variety of applications.
6.4 Node Package Manager(NPM)

NPM stands for Node Package Manager. NPM is a Command line utility to install Node.js packages,
perform version management and dependency management of Node.js packages.
If you install newer version of Node.js (version 0.6.0 or later), the NPM utility is included with it.
Check the version of NPM in the command terminal −
PS C:\Users\mlath> npm -v
10.1.0
To install a new package from the repository, use the command −
npm install <Module Name>
You can also use an online repository for node.js packages/modules which are searchable on
https://www.npmjs.com/.
How to create a basic Node.js Application?
To create a basic Hello World application in Node.js, save the following single line JavaScript as
hello.js file.
console.log("Hello World");
Open a powershell (or command prompt) terminal in the folder in which hello.js file is present, and
enter the following command −
PS D:\nodejs> node hello.js

Hello World
The "Hello World" message is displayed in the terminal.
To create a "Hello, World!" web application using Node.js, save the following code as hello.js:
http = require('node:http'); listener =
function (request, response) {
// Send the HTTP header
// HTTP Status: 200 : OK // Content Type: text/html
response.writeHead(200, {'Content-Type': 'text/html'});
// Send the response body as "Hello World" response.end('<h2

style="text-align: center;">Hello World</h2>');
};
server = http.createServer(listener);
server.listen(3000);
// Console will print the message console.log('Server

running at http://127.0.0.1:3000/');
Run the above script from command line −
C:\nodejs> node hello.js

Server running at http://127.0.0.1:3000/
The program starts the Node.js server on the localhost, and goes in the listen mode at port 3000. Now
open a browser, and enter http://127.0.0.1:3000/ as the URL. The browser displays the Hello World
message as desired.
How to Install Third-Party Packages in Node.js?
Node packages are of three types - Core, Local and Third-Party packages.
Popular third-party modules include: Mongoose, Multer, Body Parser, JSON Web Token etc.
To install a third-party package, we need to use NPM package manager.
The following command installs Mongoose package – a MongoDB object modelling tool −
npm install mongoose
CHAPTER – 7
EXPRESS JS
7.1 Introduction:
ExpressJS is a web application framework that provides you with a simple API to build websites, web
apps and back ends. With ExpressJS, you need not worry about low level protocols, processes, etc.
What is Express?
Express provides a minimal interface to build our applications. It provides us the tools that are required
to build our app. It is flexible as there are numerous modules available on npm, which can be directly
plugged into Express.
Express was developed by TJ Holowaychuk and is maintained by the Node.js foundation and
numerous open source contributors.
Why Express?
Unlike its competitors like Rails and Django, which have an opinionated way of building applications,
Express has no "best way" to do something. It is very flexible and pluggable.
Pug:
Pug (earlier known as Jade) is a terse language for writing HTML templates. It −
• Produces HTML
• Supports dynamic code
• Supports reusability (DRY)
It is one of the most popular template language used with Express.
7.2 Role of MongoDB and Mongoose in Express:
MongoDB is an open-source, document database designed for ease of development and scaling. This
database is also used to store data.
Mongoose is a client API for node.js which makes it easy to access our database from our Express
application.
We will learn how to start developing and using the Express Framework. To start with, you should
have the Node and the npm (node package manager) installed. If you don’t already have these, go to
the Node setup to install node on your local system. Confirm that node and npm are installed by running
the following commands in your terminal.
node --version npm

--version
You should get an output similar to the following.
v5.0.0 3.5.2
Now that we have Node and npm set up, let us understand what npm is and how to use it.
7.3 Node Package Manager(npm):

npm is the package manager for node. The npm Registry is a public collection of packages of
opensource code for Node.js, front-end web apps, mobile apps, robots, routers, and countless other
needs of the JavaScript community. npm allows us to access all these packages and install them locally.
You can browse through the list of packages available on npm at npmJS.
How to use npm?

There are two ways to install a package using npm: globally and locally. • Globally − This method is
generally used to install development tools and CLI based packages. To install a package globally,
use the following code.
npm install -g <package-name>
•
Locally − This method is generally used to install frameworks and libraries. A locally installed
package can be used only within the directory it is installed. To install a package locally, use
the same command as above without the -g flag.
npm install <package-name>
Whenever we create a project using npm, we need to provide a package.json file, which has all the
details about our project. npm makes it easy for us to set up this file. Let us set up our development
project.
Step 1 − Start your terminal/cmd, create a new folder named hello-world and cd (create directory) into
it −
Step 2 − Now to create the package.json file using npm, use the following code.
npm init
It will ask you for the following information.
Just keep pressing enter, and enter your name at the “author name” field.
Step 3 − Now we have our package.json file set up, we will further install Express. To install Express
and add it to our package.json file, use the following command − npm install --save express
To confirm that Express has installed correctly, run the following code.
ls node_modules #(dir node_modules for windows)
Tip − The --save flag can be replaced by the -S flag. This flag ensures that Express is added as a
dependency to our package.json file. This has an advantage, the next time we need to install all the
dependencies of our project we can just run the command npm install and it will find the dependencies
in this file and install them for us.
This is all we need to start development using the Express framework. To make our development
process a lot easier, we will install a tool from npm, nodemon. This tool restarts our server as soon as
we make a change in any of our files, otherwise we need to restart the server manually after each file
modification. To install nodemon, use the following command − npm install -g nodemon
You can now start working on Express.
7.4 Express JS Program:
var express = require('express');

var app = express();
app.get('/', function(req, res){

res.send("Hello world!");
});
app.listen(3000);
Save the file, go to your terminal and type the following.
nodemon index.js
This will start the server. To test this app, open your browser and go to http://localhost:3000 and a
message will be displayed as in the following screenshot.
How the App Works?

The first line imports Express in our file, we have access to it through the variable Express. We use it
to create an application and assign it to var app.
app.get(route, callback)
This function tells what to do when a get request at the given route is called. The callback function has
2 parameters, request(req) and response(res). The request object(req) represents the HTTP request
and has properties for the request query string, parameters, body, HTTP headers, etc. Similarly, the
response object represents the HTTP response that the Express app sends when it receives an HTTP
request.
res.send()
This function takes an object as input and it sends this to the requesting client. Here we are sending the
string "Hello World!".
app.listen(port, [host], [backlog], [callback]])
This function binds and listens for connections on the specified host and port. Port is the only required
parameter here.
S.No. Argument & Description
1 port
A port number on which the server should accept incoming requests.
2 host
Name of the domain. You need to set it when you deploy your apps to the cloud.
3 backlog
The maximum number of queued pending connections. The default is 511.
4 callback
An asynchronous function that is called when the server starts listening for
requests.
Web frameworks provide resources such as HTML pages, scripts, images, etc. at different routes.
The following function is used to define routes in an Express application –
app.method(path, handler)
This METHOD can be applied to any one of the HTTP verbs – get, set, put, delete. An alternate method
also exists, which executes independent of the request type.
Path is the route at which the request will run.
Handler is a callback function that executes when a matching request type is found on the relevant
route. For example,

var app = express();
app.get('/hello', function(req, res){

res.send("Hello World!");
}) ;
app.listen(3000);
If we run our application and go to localhost:3000/hello, the server receives a get request at route
"/hello", our Express app executes the callback function attached to this route and sends "Hello World!"
as the response.
We can also have multiple different methods at the same route. For example,
var express = require('express'); var

app = express();
app.get('/hello', function(req, res){

res.send("Hello World!");
});
app.post('/hello', function(req, res){

res.send("You just called the post method at '/hello'!\n"); });
app.listen(3000);
To test this request, open up your terminal and use cURL to execute the following request −
curl -X POST "http://localhost:3000/hello"
A special method, all, is provided by Express to handle all types of http methods at a particular route
using the same function. To use this method, try the following.
app res.all.send('/test'("HTTP method doesn't have any effect on this route!", function(req, res){
);
});
This method is generally used for defining middleware, which we'll discuss in the middleware chapter.
7.5 Routers:
Defining routes like above is very tedious to maintain. To separate the routes from our main index.js
file, we will use Express.Router. Create a new file called things.js and type the following in it.
var router = express.Router();
router.get('/', function(req, res){
res.send('GET route on things.');
});
router.post('/', function(req, res){
res.send('POST route on things.');
});
//export this router to use in our index.js
module.exports = router;
Now to use this router in our index.js, type in the following before the app.listen function call.
var express = require('Express'); var
app = express();
var things = require('./things.js');
//both index.js and things.js should be in same directory app.use('/things',

things);
app.listen(3000);
The app.use function call on route '/things' attaches the things router with this route. Now whatever
requests our app gets at the '/things', will be handled by our things.js router. The '/' route in things.js is
actually a subroute of '/things'. Visit localhost:3000/things/ and you will see the following output.
Routers are very helpful in separating concerns and keep relevant portions of our code together. They
help in building maintainable code. You should define your routes relating to an entity in a single file
and include it using the above method in your index.js file.
7.6 HTTP Methods:
S.No. Method & Description

1 GET
The GET method requests a representation of the specified resource. Requests using GET
should only retrieve data and should have no other effect.
2 POST
The POST method requests that the server accept the data enclosed in the request as a new
object/entity of the resource identified by the URI.
3 PUT
The PUT method requests that the server accept the data enclosed in the request as a
modification to existing object identified by the URI. If it does not exist then the PUT
method should create one.
4 DELETE
The DELETE method requests that the server delete the specified resource.
These are the most common HTTP methods. To learn more about the methods, visit
http://www.tutorialspoint.com/http/http_methods.htm.
CHAPTER-8
MongoDB
8.1 Introduction:
MongoDB is a cross-platform, document oriented database that provides, high performance, high
availability, and easy scalability. MongoDB works on concept of collection and document.
MongoDB and Node.js have a long history of working well together and are paired in many popular
tech stacks, including the MEAN stack (MongoDB, Express.js, AngularJS, and Node.js) and and, more
recently, the MERN stack (MongoDB, Express.js, React.js, and Node.js).
The MongoDB Node.js driver makes working with MongoDB from inside a Node.js script simple and
intuitive for developers—saving time and increasing productivity.
8.2 Set Up Node.js and MongoDB:

In this section, we'll walk through how to set up a Node.js script that connects to a MongoDB database.
Prerequisites:
Before you begin, you'll need to ensure you've completed a few prerequisite steps.
1. If you haven't already, install Node.js and create a new Node.js project.
2. Create a MongoDB database. The easiest way to get started with MongoDB is to create a free
cluster in MongoDB Atlas, MongoDB's fully-managed, multi-cloud document database
service. 3. Then load the sample dataset.
4. Add the MongoDB Node.js Driver to your Node project dependencies using the following
command:
npm ins tall mangodb
Now that you have completed the prerequisites, you're ready to begin coding!
Get Connected:
You can use the MongoClient to connect to a MongoDB database. Import the MongoClient in a new
Node.js script:
const { MongoClient } = require('mongodb');

Then create an instance of MongoClient by passing your connection URI to it. For more information
on how to find your connection URI and ensure your Atlas database is ready for connection, see the
official MongoDB documentation on connecting to a cluster.
const client = new MongoClient(yourConnectionURI);
Now you're ready to get connected:

await client.connect();
These are the basics of getting connected. For more detailed information on how to get connected to a
MongoDB database from a Node.js script, see Connect to a MongoDB Database Using Node.js.
What You Need to Know:

To begin working with MongoDB from a Node.js script, you should understand how MongoDB stores
data as well as the basic methods you can use to query your data. We'll cover both topics below.
8.3 How MongoDB Stores Data:

MongoDB stores data as BSON documents. BSON is a binary representation of JSON (JavaScript
Object Notation). Documents are similar in structure to JavaScript objects and store information in
field-value pairs. Every document is required to have an _id field. The value stored in _id must be
unique for every document in the collection.
Documents typically contain information about one object and any information that will be queried
with that object. Related documents are grouped together in collections. Related collections are stored
together in databases.
8.4 CRUD Operations:

The MongoDB Node.js driver provides a variety of methods to help you query your data. These
methods are known as CRUD (create, read, update, and delete) operations.
Create:
Use insertOne() to create a new document. insertOne() has only one required parameter: the document
to insert. If the document does not include a field named _id, the MongoDB Node.js driver will add
one automatically. To create multiple documents, use insertMany(). The only argument you are
required to pass to insertMany() is an array of documents to insert.
Both insertOne() and insertMany() allow you to pass optional settings. One optional setting to note for
insertMany() is the boolean ordered. If an insert fails when ordered is to true, the remaining inserts will
not be executed. If an insert fails when ordered is to false, the remaining inserts will be executed. See
the official documentation for more information.
Read:
To retrieve a single document from your database, use findOne(). findOne() requires that you pass a
query object. The query can contain zero to many properties. To retrieve multiple documents from your
database, use find(). Like findOne(), find() requires you to pass a query object that contains zero to
many properties. find() returns a cursor that you can use to iterate over the results.
Both findOne() and find() allow you to pass optional settings when you call them. One handy option
is projection, which allows you to explicitly exclude or include the fields that are returned in the query.
Update:
Use updateOne() when you want to update a single document. updateOne() has two required
parameters: a filter object that indicates which document should be updated and an update object that
indicates the update operations that should be applied to the document. To update multiple documents,
you can use updateMany(). updateMany() has the same required parameters as updateOne(): a filter
object and an update object.
Both updateOne() and updateMany() allow you to pass optional settings to them when you call them.
upsert is one of the options you can pass. When upsert is set to true, a new document will be created if
no document matches the query. upsert can be really helpful as it allows you to combine multiple
operations into one: checking to see if a document exists and then updating the document if it exists or
creating a new document if it does not.
Delete:
To delete a single document, use deleteOne(). A filter object that indicates the document to be deleted
is the only required parameter. Use deleteMany() when you want to delete multiple documents. Like
deleteOne(), the only required parameter is the filter object.
Both deleteOne() and deleteMany() allow you to pass optional settings as well. See the official
documentation for more information. Now you know the basics of querying data stored in a MongoDB
database from a Node.js script. For more detailed information on how to execute the CRUD operations
in a Node.js script, see MongoDB and Node.js Tutorial - CRUD Operations.
How to Use MongoDB with Node.js:

The MongoDB Node.js driver makes using MongoDB with Node.js a seamless experience. The driver
automatically maps JavaScript objects to JSON documents, meaning that developers can easily work
with their data. To use MongoDB with Node.js, you'll first need to install the MongoDB Node.js driver.
You can do this using npm, the Node.js package manager, by running npm install mongodb. Once
installed, you can create a connection to your MongoDB database using the MongoClient class
provided by the MongoDB Node.js driver. This connection will allow you to interact with your
MongoDB database from your Node.js application. Here's a basic example:
8.5 Sample CODE:
const { MongoClient } = require('mongodb');
// Connection URI const uri =
'mongodb://localhost:27017';
// Create a new MongoClient const
client = new MongoClient(uri); //
Connect to the MongoDB server
client.connect((err) => {
if (err) { console.error('Error connecting to
MongoDB:', err); return;
console.log('Connected to MongoDB');
// You can now perform database operations here const
db = client.db('myDatabase');
// For example, insert documents into a collection db.collection('myCollection').insertOne({
name: 'John', age: 30 }, (err, result) => {
if (err) { console.error('Error inserting
document:', err); return;
console.log('Document inserted successfully:', result.insertedId);
// Don't forget to close the connection when done
client.close();
});
});
OUTPUT:
“Connected to MongoDB
Document inserted successfully:”
In this example, we first create a MongoClient instance and then connect to the MongoDB server using
the connect() method. Once connected, we can perform database operations such as inserting
documents into a collection using the insertOne() method. Finally, we close the connection to the
MongoDB server using the close() method. This is a basic example to get you started, but you can
perform more complex operations such as querying, updating, and deleting documents as needed.
Projects:
1. URL SHORTENER
A URL shortener service using backend technology is a web application that converts long URLs into
shorter, more manageable links. It typically involves a backend system that receives the long URL
from the user, generates a unique short code or identifier for it, stores the mapping between the short
code and the original URL in a database, and redirects users to the original URL when they access the
shortened link. This backend infrastructure ensures efficient storage and retrieval of URLs, as well as
robust link management capabilities.
Code:
Running Code:
Enter “npm start” in Vs code Terminal.
Open Chrome, In address bar enter “Localhost:8000” You will get output of your code…
Result:
Conclusion:
In conclusion, the URL Shrinker project successfully achieved its objectives by creating a functional
and visually appealing web application for shortening long URLs. Despite the code snippet provided
only covering the frontend aspect, the application effectively utilizes HTML and Bootstrap to deliver
an intuitive user interface. Further development involving server-side technologies is required to
implement URL shortening logic and click tracking functionalities.
2. Product Landing Page

A product landing page is a crucial element in web development, designed to captivate and convert
visitors into customers. It showcases a product's features, benefits, and unique selling points in a
visually appealing and persuasive manner, ultimately driving sales and engagement.
Code:
Result:
Conclusion:
In conclusion, the Product Landing Page project successfully achieved its objectives by creating a
visually appealing and interactive web page for showcasing the "Yami Zuss" product. Despite the
challenges faced during development, the landing page effectively utilizes HTML, CSS, and JavaScript
to deliver a compelling user experience.
3. Weather Forecast
Creating a weather forecast feature in web development involves integrating APIs like
OpenWeatherMap, fetching data based on location, and rendering it dynamically on the frontend
using HTML, CSS, and JavaScript. This requires understanding asynchronous programming for
fetching data, handling JSON responses, and designing user interfaces for displaying weather
information. Additionally, implementing error handling for API requests and ensuring
crossbrowser compatibility are essential for a robust solution.
Features Implemented:
• Current Weather Display: Displays the current weather conditions, including temperature,
weather icon, and description.
• Location Search: Allows users to search for weather information of different locations by
entering the city name.
• Weather Forecast: Provides a 5-day weather forecast for the selected location, including
temperature and weather conditions for each day.
Code:
Result:
Conclusion:
In conclusion, the Weather Application project successfully achieved its objectives by creating a
functional and visually appealing web application for checking weather information. Despite the
challenges faced during development, the application effectively utilizes HTML, CSS, an9d JavaScript
to deliver a seamless user experience.
Conclusion:
Full stack web development encapsulates the entire spectrum of creating dynamic web applications,
from designing user interfaces to managing databases and servers. It demands proficiency in a myriad
of technologies such as HTML, CSS, and JavaScript for frontend development, alongside frameworks
like React or Angular for building interactive user experiences. On the backend, expertise in languages
like Python, JavaScript (Node.js), or Ruby, combined with frameworks like Django, Express.js, or
Ruby on Rails, is essential for crafting robust server-side logic and handling data storage efficiently.
Additionally, knowledge of databases such as MySQL, MongoDB, or PostgreSQL is indispensable for
storing and retrieving data effectively. Moreover, proficiency in deploying and maintaining
applications using cloud services like AWS, Azure, or Google Cloud Platform ensures scalability and
reliability. Overall, full stack web development demands a versatile skill set and a deep understanding
of both frontend and backend technologies, enabling developers to create seamless and scalable web
solutions to meet diverse user needs.
In conclusion, mastering full stack web development empowers developers to create dynamic and
feature-rich web applications capable of handling complex functionalities and delivering exceptional
user experiences. By bridging the gap between frontend and backend development, full stack
developers possess the versatility to tackle various aspects of application development, from designing
intuitive interfaces to optimizing server performance. This holistic approach not only fosters greater
collaboration within development teams but also allows developers to understand the entire web
development process comprehensively, leading to more efficient problem-solving and innovation. As
the digital landscape continues to evolve, the demand for skilled full stack developers remains high,
making it a rewarding and promising career path for those passionate about creating impactful web
solutions.
Future Scope:
The future scope for full-stack web development looks promising, driven by ongoing technological
advancements and the increasing demand for digital solutions. Here are some key trends and
opportunities:
1. Increasing Demand for Web Applications

E-commerce Growth: With more businesses moving online, the demand for robust, scalable, and
secure web applications continues to grow. Full-stack developers are essential for building and
maintaining these platforms.
Remote Work and Collaboration Tools: The shift towards remote work has increased the need for web-
based collaboration tools, which full-stack developers are crucial in developing and improving.
2. Emergence of Progressive Web Apps (PWAs)

Cross-Platform Development: PWAs offer the best of both web and mobile apps, providing offline
capabilities, fast loading times, and a native app-like experience. Full-stack developers play a key
role in creating and optimizing PWAs (MDN Web Docs).
3. Advancements in Artificial Intelligence and Machine Learning

AI Integration: Full-stack developers are increasingly integrating AI and machine learning into web
applications to enhance user experiences through personalized content, chatbots, and predictive
analytics (Noble Desktop).
4. Cloud Computing and Serverless Architecture
Scalability and Cost Efficiency: Full-stack developers are leveraging cloud platforms like AWS,
Azure, and Google Cloud to build scalable applications without managing server infrastructure,
utilizing serverless computing to improve efficiency and reduce costs.
5. Microservices Architecture
Modular Development: The shift towards microservices architecture allows for building applications
as a suite of small, independent services. Full-stack developers benefit from this approach by
developing and deploying individual components that are easier to manage and scale (Noble
Desktop).
6. Internet of Things (IoT)

Connected Devices: The growth of IoT devices requires full-stack developers to create web
applications that can interact with and manage these devices, providing real-time data and control
functionalities.
7. Focus on Cybersecurity
Secure Development Practices: With the increasing number of cyber threats, there is a heightened
emphasis on security in web development. Full-stack developers need to be well-versed in secure
coding practices, data protection, and compliance with security standards (MDN Web Docs) (Noble
Desktop).
8. Rise of No-Code/Low-Code Platforms

Efficiency and Accessibility: No-code and low-code platforms enable rapid application development
and are becoming more popular. Full-stack developers can use these tools to speed up development
processes and focus on more complex tasks that require custom coding.
9. Enhanced User Experience (UX)

Focus on UI/UX: There is a growing emphasis on creating intuitive and engaging user experiences.
Full-stack developers must balance functionality with user-friendly interfaces, often working closely
with designers to achieve this.
10. Continued Evolution of JavaScript Frameworks

Framework Proliferation: JavaScript frameworks like React, Angular, and Vue.js continue to evolve,
offering new features and improvements. Full-stack developers need to stay updated with these
changes to build modern, efficient web applications (Noble Desktop).
References:
MDN Web Docs (Mozilla Developer Network): MDN provides an extensive learning area for web
development, covering everything from HTML, CSS, and JavaScript to more advanced topics like
server-side programming with Node.js and Express. It is a great resource for beginners to get
comfortable with web technologies before advancing to more complex frameworks (MDN Web Docs)
Coursera: For structured learning, Coursera offers various full-stack development courses. Notable
ones include the IBM Full Stack Software Developer Professional Certificate, which covers front-end,
back-end, and cloud-based application development. These courses are beginner-friendly and often
come with certificates upon completion (Coursera).
FreeCodeCamp: This platform offers a comprehensive full-stack web development curriculum that
includes interactive coding challenges and projects. It covers HTML, CSS, JavaScript, React, Node.js,
and more. The hands-on projects help solidify theoretical knowledge with practical experience.
Noble Desktop: This site provides free tutorials and articles on full-stack web development, covering
key technologies such as HTML/CSS, JavaScript, SQL, Python, and Ruby on Rails. It's a valuable
resource for both beginners and those looking to deepen their understanding of web development
(Noble Desktop).
CodeBurst.io: This site lists over 100 free resources for learning full-stack development, including
tutorials on popular stacks like MERN (MongoDB, Express, React, Node.js) and guides on deploying
applications using tools like Heroku (Codeburst).
W3Schools:
W3Schools is one of the most popular and accessible platforms for learning web development. It
provides tutorials and references on web development languages such as HTML, CSS, JavaScript,
PHP, SQL, and more.
Tutorial Point:
Tutorialspoint is another widely-used educational website that offers tutorials on a variety of subjects,
including web development, programming languages, data science, and more.
Appendix:
A. Technology Stack Frontend:
HTML5: For structuring the web content.
CSS3: For styling the web content.
JavaScript (ES6+): For client-side scripting.
React.js: For building the user interface.
Backend:
Node.js: For server-side scripting.
Express.js: For handling HTTP requests and middleware.
MongoDB: For database management.
Development Tools:
Git: For version control.
Webpack: For module bundling.
Babel: For JavaScript transpiling.
ESLint: For code linting.
B. Code Repositories:
Frontend Repository: GitHub - Frontend
Backend Repository: GitHub - Backend
Documentation Repository: GitHub – Documentation.
C. API Endpoints:
User Authentication:
POST /api/auth/register: Register a new user.
POST /api/auth/login: Login a user.
POST /api/auth/logout: Logout a user.
User Management:
GET /api/users: Retrieve a list of users.
GET /api/users/:id: Retrieve user details by ID.
PUT /api/users/:id: Update user information.
DELETE /api/users/:id: Delete a user.
D. Database Schema
User Collection – JSON:
{
"id": "ObjectId",
"username": "String",
"email": "String",
"password": "String",
"createdAt": "Date",
"updatedAt": "Date"
}
Post Collection – JSON:
{
"id": "ObjectId",
"title": "String",
"content": "String",
"authorId": "ObjectId",
"createdAt": "Date",
"updatedAt": "Date"
}
E. Configuration Files
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
.eslintrc.json:
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}
F. Testing:
Frontend Testing:
Jest: For unit testing JavaScript code.
Enzyme: For testing React components.
Backend Testing:
Mocha: For testing Node.js code.

Chai: For assertions.
G. Deployment:
Hosting Providers:
Frontend: Netlify
Backend: Heroku
CI/CD:
GitHub Actions: For continuous integration and deployment.
H. Additional Resources Books:
Eloquent JavaScript by Marijn Haverbeke

JavaScript: The Good Parts by Douglas Crockford
You Don't Know JS by Kyle Simpson
Online Courses:
FreeCodeCamp
Codecademy
Udemy - The Complete JavaScript Course
…THE END…

Internship Report 286[1] Ravi

Uploaded by

Document Information

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

Internship Report 286[1] Ravi

Uploaded by

Copyright:

Available Formats

PROBLEM STATEMENT:

Microservices architecture has emerged as a popular approach to back-end development, breaking

In conclusion, full-stack development encompasses both front-end and back-end technologies,

Basic HTML Document:

<h1> This tag represents the heading.

HTML Document Structure:

Document declaration tag

The <!DOCTYPE> Declaration:

<!DOCTYPE...> tag along with other HTML tags.

This will produce the following result:

This will produce the following result:

Here is a first paragraph of text.

Line Break Tag:

This will produce the following result:

This will produce the following result:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

This will produce the following result:

An example of this technique appears in the movie "12 Angry Men."

This will display the following result:

This is left aligned

The title Attribute:

This will produce the following result:

Titled Heading Tag Example

The class Attribute:

class="className1 className2 className3"

The style Attribute:

2.4 HTML – Formatting:

This will produce the following result:

The following word uses a bold typeface.

The following word uses anitalicized typeface.

This will produce the following result:

The following word uses an underlined typeface.

selector { property: value }

table{ border :1px solid #C00; }

3.2 CSS – Syntax:

The Descendant Selectors:

The Class Selectors:

<p class="center bold">

#black h2 { color: #000000;

body > p { color: #000000;

The Attribute Selectors:

Multiple Style Rules:

h1 { color: #36C; font-weight: normal; letter-spacing: .4em;

h1, h2, h3 { color: #36C; font-weight: normal; letter-

Unit Description Example

cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}

A relative measurement for the height of a

This value defines a measurement relative

mm Defines a measurement in millimeters. p {word-spacing: 15mm;}

Defines a measurement in picas. A pica is

Defines a measurement in points. A point is

3.4 CSS Colors:

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}

These formats are explained in more detail in the following sections:

3.5 CSS Colors - Hex Codes

CSS Colors - Short Hex Codes:

The script tag takes two important attributes:

<script language="javascript" type="text/javascript"> JavaScript code

4.2 First JavaScript