Summer Training Report Self
Summer Training Report Self
Submitted By
SUBMITTED TO:
I hereby declare that the Summer Training Report - 1 is an authentic record of my own work as requirements of
Summer Training during the period from 24/07/23 to 24/09/23 for the award of degree of B.Tech. (Information
Technology and Engineering), Maharaja Agrasen Institute of Technology, New Delhi under the guidance of Ms.
Anjela Yu
RAJAT KUMAR
03314813121
(I)
Certificate
(II)
ACKNOWLEDGEMENT
I would like to express my sincere gratitude to CODING NINJAS, Mr.Ankush Singla (Instructor of
DSA) for providing their invaluable guidance, comments and suggestions
throughout the course. I would specially thank Mr.Ankush Singla my training mentor for
constantly motivating me to work harder and for encouragementand invaluable assistance.
Also, I would like to thanks to my parent for giving encouragementand support. Without
their constant support, I might not be able to complete this training properly. I would also
like to say thanks tomy friends for being there for me when I needed their help.
(III)
Table content
S. No. TITLE
1 Declaration
2 Acknowledgement
3 Certification
4 Flowchart
5.2 Arrays
5.8 Hashmap
6 DP and Graph
6.3 Output
Web development is the work involved in developing a web sitefor the Internet. Web
development can range from developing asimple single static page of plain text to
complex web-based internet applications, electronic businesses, and social network
services.
There are two broad divisions of web development –
Front-end development refers to constructing what a user sees when they load a web
application – the content, design and how
you interact with it. This is done with three codes – HTML, CSS andJavaScript.
HTML, short for Hyper Text Mark-up Language, is a special code for‘marking up’ text in
order to turn it into a web page. Every web page on the net is written in HTML, and it
will form the backbone of any web application. CSS, short for Cascading Style Sheets, is
a code for setting style rules for the appearance of web pages. CSS handles the cosmetic
side of the web. Finally, JavaScript is a scripting language that’s widely used to add
functionality and
interactivity to web pages.
• Firebase
• Node js
• Express Js
• Mongodb
But, I have learnt Firebase as the Back-end script in my summertraining. Because Firebase is the
Easy scripting language on theweb. Currently, it is one of the most loved languages used for
dynamic web pages. It is widely used open source general-purposescripting
language which is best for web development. I also learned Structured Query language in Wampp server
for handling Relationaldatabase Management sys
1
Technology Learnt
I learnt web Development from Udemy summer training . I learntthese technologies during the
2 months training period:
• HTML
• CSS
• Bootstrap
• Tailwind
• Javascript
• React
• Firebase
• Nodejs +Express
• Mongodb
Operating System:
• Windows 7, Windows 8 or Windows 10
2
There is a lot more to say about it. Web site is actually laid out inthree fundamental layers, namely:
1. Structure Layer: We use HTML to give structure and semantic meaning to the
content.
2. Presentation Layer: Use CSS to give a layout and visualpresentation to
the content.
3. Behaviour Layer: Use JavaScript to give additional interactionto the website.
3
HTML:
HTML is an acronym which stands for “Hyper Text MarkupLanguage” which is used for creating web pages and
web applications.
In the late 1980’s, a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system
for CERN researchers. In1989, he wrote a memo proposing an internet based hypertextsystem.
Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a
document called "HTML Tags"proposed by Tim in late 1991. The latest version of HTML is
HTML5. Let's see what is meant by Hypertext Markup Language, and Web page.
Hyper Text: Hypertext simply means "Text within Text." A text hasa link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
Hypertext is a way to link two or more web pages.
Markup language: A markup language is a computer languagethat is used to apply layout and
formatting conventions to a text.
document. Markup language makes text more interactive anddynamic. It can turn text into images,
tables, links, etc.
Web Page: A web page is a document which is commonly writtenin HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or
dynamic type.
Hence, HTML is a markup language which is used for creating attractive web pages with the help of
styling, and which looks in anice format on a web browser. An HTML document is made of
many HTML tags and each HTML tag contains different content.
4
CODE:
5
6
Output:
7
8
CSS:
CSS stands for Cascading Style Sheet. CSS is used to design HTML tags.CSS is a widely
used language on the web. HTML, CSS and JavaScript are used for web designing. It
helps the web designers to apply style on HTML tags. CSS is used to define styles for
your web pages, including the design, layout and variations in display for different
devices and screen sizes. SGML (Standard GeneralizedMarkup Language) is the origin of
CSS. It is a language that definesmarkup languages.
CSS handles the look and feel part of a web page. Using CSS, you can control the colour
of the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colours are used, layout designs, and variations in
display for different devices and screen sizes as well asa variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSSis combined with the markup languages HTML
or XHTML.There aremany advantages of web development.
You can write CSS once and then reuse 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. To
make a global change, simply change the style, and all elements in all the web pages will
be updated automatically.
CSS can be used to style HTML elements in three ways:
1. Inline: CSS rule applied as an attribute to the HTML element.Has the most
precedence.
2. Internal: Many CSS rules can be written inside the same HTMLfile for elements.It
has less precedence than the above one.
3. External: CSS rules are written in a separate file and then linked to the
respective HTML file. Has the less precedence.
Advantages of CSS
CSS saves time − you can write CSS once and then reuse samesheet 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 writeHTML 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 meansfaster download times.
Easy maintenance − To make a global change, simply change thestyle, and all 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 yourHTML page in comparison to HTML attributes.
9
Multiple Device Compatibility − Style sheets allow content to beoptimized for more than
one type of device. By using the same HTML document, different versions of a website
can be presentedfor handheld devices such as PDAs and cell phones or for printing.
idea to start using CSS in all the HTML pages to make themcompatible to future browsers.
Limitations of CSS:
CSS frameworks are the pre-planned libraries which make easyand more standard
compliant web page styling. The frequentlyused CSS framework is Bootstrap which I
have learned in this training.
10
Code:
Basic:
11
Basics output:
12
ADVANCED:
Flex:
Html:
CSS:
13
Output:
14
Bootstrap:
Advantages of Bootstrap
The biggest advantage of using Bootstrap is that it comes with freeset of tools for creating
flexible and responsive web layouts as wellas common interface components. Here are
some more advantages, why one should opt for Bootstrap:
• Save lots of time — you can save lots of time and efforts using the Bootstrap
predefined design templates and classesand concentrate on other
development work.
• Responsive features — Using Bootstrap you can easily
15
• Consistent design — All Bootstrap components share the same design
templates and styles through a central library,
so that the designs and layouts of your web pages areconsistent throughout your
development.
• Easy to use — Bootstrap is very easy to use. Anybody withthe basic working
knowledge of HTML and CSS can start development with Bootstrap.
Future Scope
One thing we can all agree on is that we need to understand whatwill happen in the future
to
Bootstrap, for the sake of web development’s future. Bootstrap’sGithub states that as of
now (insert date) they’re almost done
with V4.1 which is concerned with a constant grid system, utilities, and small new
features. They’re also working on V4.2 that promises to bring enhancements to forms
and components.
The conclusion we can draw from this is that the people behind Bootstrap are very invested in it,
super hard working and definitelycontinuously. That’s the first good sign. Having Twitter behind
is the other. Let’s face it, any framework backed by a huge company does well. And it makes all the
sense in the world.
16
PROJECT BY USING BOOSTRAP:
Source Code-
17
18
19
Output:
20
21
Tailwind Css:
Tailwind CSS can be used to style websites in the fastest and easiest way. Tailwind
CSS is basically a utility-first CSS framework for rapidlybuilding custom user
interfaces. It is a highly customizable, low-
level CSS framework that gives you all of the building blocks you need to build bespoke
designs without any annoying opinionated styles you have tofight to override.
The beauty of this thing called tailwind is it doesn’t impose design specifications or
how your site should look, you simply bring tiny components together to construct a user
interface that is unique. WhatTailwind simply does is take a ‘raw’ CSS file, process this
CSS file over aconfiguration file, and produce an output.
CSS is global in nature and if make changes in the file the propertyis changed in all
the HTML files linked to it. But with the help of Tailwind CSS, we can use utility
classes and make localchanges.
Installation: There are two ways to use the CSS we can install them on ourserver or
we can use the CDN link as well.
22
Javascript:
This section is dedicated to the JavaScript language itself, and not the parts that arespecific
to Web pages or other host environments. For information about APIs that are specific to
Web pages, please see Web APIs and DOM.
The standards for JavaScript are the ECMAScript Language Specification (ECMA-262)and
the ECMAScript Internationalization API specification (ECMA-402). As soon as one
browser implements a feature, we try to document it. This means that cases where some
proposals for new ECMAScript features have already been implementedin browsers,
documentation and examples in MDN articles may use some of those new features. Most of
the time, this happens between the stages 3 and 4, and is usually before the spec is officially
published.
23
List Of topics cover in Javascript:
Project:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Type your t
24
<title>Calculator</title>
</head>
<body>
<div class="calculator-container">
<div class="calculator">
<input type="text" disabled id="number-input" />
<input placeholder="ANS" type="text" disabled id="result" />
<div class="buttons">
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
-
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
*
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
/
</div>
</div>
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
7
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
8
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
9
</div>
</div>
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons">
4
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
5
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
6
</div>
</div>
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
1
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
2
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
3
</div>
</div>
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-4 cal-buttons"
>
0
</div>
<div onclick="reset()" class="col col-8 cal-buttons">Clear</div>
26
</div>
</div>
</div>
</div>
<script src="script.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
Javascript:
function handleClickButton(el) {
console.log(el.innerText);
const exp = `${input.value}${el.innerText}`;
input.value = exp;
if (["+", "-", "*", "/"].includes(el.innerText)) return;
result.value = eval(exp);
}
function reset() {
input.value = "";
result.value = "";
}
Output:
27
React JS:
React offers various extensions for entire application architectural support, such as Flux and
React Native, beyond mere UI.
ReactJS History:
When compared to other technologies on the market, React is a new technology. Jordan
Walke, a software engineer at Facebook, founded the library in 2011, giving itlife. the likes
of XHP, a straightforward HTML component framework for PHP, have an influence on
React. Reacts newsfeed was its debut application in 2011. Later, Instagram picks it up and
incorporates it into their platform.
Why React?
React’s popularity today has eclipsed that of all other front-end developmentframeworks.
Here is why:
Easy creation of dynamic applications: React makes it is easy to create dynamic web
applications because it requires less coding and offers more functionality, as opposed to
JavaScript, where coding often gets complex very quickly.
Improved performance: React uses Virtual DOM, thereby creating web applications faster.
Virtual DOM companies the components’ previous states and updates only the items in the
Real DOM that were changed, instead of updating all of the components again, as conventional
28
It can be used for the development of both web and mobile apps: We already know that
React is used foí the development of web applications, but that’s not all it can do. here is a
framework called React Native, derived from React itself, that is hugely popular and is used
for creating beautiful mobile applications. So, in reality, React can be used for making both
web and mobile applications.
Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be
used to debug React applications. this makes the process of
debugging React web applications faster and easier.
the above reasons more than justify the popularity of the React library and why it is
being adopted by a large number of organizations and businesses. Now let’sfamiliarize
ourselves with Reacts features.
29
Firebase:
What is Google Firebase? It is a mobile application development platform from Google with
powerful features for developing, handling, and enhancingapplications. Firebase is a backend
platform for building web and mobile applications. (1)
30
Node + Express JS:
Node (or more formally Node.js) is an open-source, cross-platform runtime environment that
allows developers to create all kinds of server-side tools and applications in JavaScript. The
runtime is intended for use outside of a browser context (i.e. running directly on a computer
or server OS). As such, the environment omits browser-specific JavaScript APIs and adds
support for more traditional OS APIs including HTTP and file system libraries.
• Great performance! Node was designed to optimize throughput and scalability in web
applications and is a good solution for many common web-development problems (e.g. real-
time web applications).
• Code is written in "plain old JavaScript", which means that less time is spent dealing with
"context shift" between languages when you're writing both client-side and server-side code.
• JavaScript is a relatively new programming language and benefits from improvements in
language design when compared to other traditional web-server languages (e.g. Python,
PHP, etc.) Many other new and popular languages compile/convert into JavaScript so you can
also use TypeScript, CoffeeScript, ClojureScript, Scala, LiveScript, etc.
• The node package manager (npm) provides access to hundreds of thousands of reusable
packages. It also has best-in-class dependency resolution and can also be used to automate
most of the build toolchain.
• Node.js is portable. It is available on Microsoft Windows, macOS, Linux, Solaris, FreeBSD,
OpenBSD, WebOS, and NonStop OS. Furthermore, it is well-supported by many web hosting
providers, that often provide specific infrastructure and documentation for hosting Node
sites.
• It has a very active third party ecosystem and developer community, with lots of people who
are willing to help.
You can use Node.js to create a simple web server using the Node HTTP package.
Hello Node.js
The following example creates a web server that listens for any kind of HTTP request on the
URL http://127.0.0.1:8000/ — when a request is received, the script will respond with the
string: "Hello World". If you have already installed node, you can follow these steps to try
out the example:
31
const http = require("http");
const hostname =
"127.0.0.1"; const port =
8000;
BASHCopy to Clipboard
node hello.js
Finally, navigate to http://localhost:8000 in your web browser; you should see the text "Hello
World" in the upper left of an otherwise empty web page.
Web Frameworks
Other common web-development tasks are not directly supported by Node itself. If you want
to add specific handling for different HTTP verbs (e.g. GET, POST, DELETE, etc.),
separately handle requests at different URL paths ("routes"), serve static files, or use
templates to dynamically create the response, Node won't be of much use on its own. You
will either needto write the code yourself, or you can avoid reinventing the wheel and use a
web framework!
32
Introducing Express
Express is the most popular Node web framework, and is the underlying library for a number
of other popular Node web frameworks. It provides mechanisms to:
Write handlers for requests with different HTTP verbs at different URL paths (routes).
Integrate with "view" rendering engines in order to generate responses by inserting
data into templates.
Set common web application settings like the port to use for connecting, and the
location of templates that are used for rendering the response.
Add additional request processing "middleware" at any point within the request
handling pipeline.
While Express itself is fairly minimalist, developers have created compatible middleware
packages to address almost any web development problem. There are libraries to work with
cookies, sessions, user logins, URL parameters, POST data, security headers, and many
more.
You can find a list of middleware packages maintained by the Express team at Express
Middleware (along with a list of some popular 3rd party packages).
There isn't any readily-available and definitive measure of the popularity of server-side
frameworks (although you can estimate popularity using mechanisms like counting the
number of GitHub projects and StackOverflow questions for each platform). A better
question is whether Node and Express are "popular enough" to avoid the problems of
unpopular platforms. Are they continuing to evolve? Can you get help if you need it? Is there
an opportunity for you to get paid work if you learn Express?
Based on the number of high profile companies that use Express, the number of people
contributing to the codebase, and the number of people providing both free and paid for
support, then yes, Express is a popular framework!
33
What does Express code look like?
In a traditional data-driven website, a web application waits for HTTP requests from the web
browser (or other client). When a request is received the application works out what action is
needed based on the URL pattern and possibly associated information contained in POST
dataor GET data. Depending on what is required it may then read or write information from
a database or perform other tasks required to satisfy the request. The application will then
return a response to the web browser, often dynamically creating an HTML page for the
browser to display by inserting the retrieved data into placeholders in an HTML template.
Express provides methods to specify what function is called for a particular HTTP verb
(GET, POST, SET, etc.) and URL pattern ("Route"), and methods to specify what
template
("view") engine is used, where template files are located, and what template to use to render a
response. You can use Express middleware to add support for cookies, sessions, and users,
getting POST/GET parameters, etc. You can use any database mechanism supported by Node
(Express does not define any database-related behavior).
The following sections explain some of the common things you'll see when working
with Express and Node code.
34