WEB APPLICATION DEVELOPMENT

Brief Profile About Company: Infynow Business Solutions LLP is a leading IT

service providing company based in belagavi India. We offer a complete range of services
that incorporates Website design and Development, Software Solutions, Application
development, Digital Marketing, Video Production, and Internship and Project Training.
Right skills and opportunities are the 2 main essential requirements to urge on the road of
success that ultimately results in a path of constant learning. Our Internship provides
students hands-on experience to work in their desired field to get many opportunities. We
train students to implement their theoretical knowledge gained from institutions within
real-time projects and gain valuable experience which will help them to be qualified for
the desired job. Infynow Business Solutions LLP will provide students a chance to work
with the team of Software Developers, Our core focus is to prepare the students technically
& interpersonally by carrying out live projects and effectively mentor candidates for taking
challenges and resolving them successfully within our Live projects & Internship
Programs.Being an intern means quite getting involved within the day-to-day running of
the corporate. As an intern, students will get exposure to real time projects and challenges
during a vibrant environment and gain world experience.
Organization along with saliaent features of intrenship program:
Name: Infynow Software Solutions LLP
Industry: Software
Location: F4 First floor, Star Tower, Khanapur Rd, opp. Canara Bank, near RPD Cross,
Tilakwadi, Belagavi, Karnataka 590006.
Program Overview:
The internship program in web application development offered by [Infynow Software
Solutions LLP] aims to provide aspiring developers with hands-on experience in designing,
building, and deploying web applications. This program is designed to bridge the gap
between academic learning and practical application, equipping interns with the skills and
knowledge required in the dynamic field of web development.
Salient Features:
1. Comprohensive learning path:
 Structured curriculum covering frontend development.
 In-depth sessions on industry-standard technologies and frameworks.
2. Real-world project:
 Collaborative development in a simulated team environment.
3. Mentorship:
 Assigned mentors with industry experience for personalized guidance
 Regular feedback and one-on-one sessions to track progress.
4. Technology stack:
 Exposure to a modern and relevant technology stack used in the industry
 Hands-on experience with popular frameworks and tools.
5. Work place integration:
 Integration into the organizational culture and work environment.
 Opportunities to attend team meetings and participate in relevant discussions.
6. Industry insights:
 Insightful discussions on current trends and best practices in web development.
7. Career guidance:
 Sessions on resume building, interview preparation,
 Assistance in identifying potential career paths within the web development field.

DEPT,OF EEE, SGBIT,BELAGAVI Page 1

 WEB APPLICATION DEVELOPMENT

8. Softskill development:
 Emphasis on communication, teamwork, and problem-solving skills.
 Project management and effective collaboration.
9. Certification:
 Interns receive a certification upon successful completion of the program.
 Recognition of skills acquired during the internship.

INTRODUCTION:
Program organization in web application development frontend refers to the
systematic and structured arrangement of code, files, and components that make up
the user interface and functionality of a web application. A well-organized frontend
is crucial for maintaining code readability, scalability, and ease of maintenance.
Here's an introduction to key aspects of program organization in frontend
development:
1) File Structure:
Establishing a clear and organized file structure is fundamental. Commonly, frontend
projects adopt a modular approach, grouping related files together.
This can include directories for styles (CSS or SCSS), scripts (JavaScript or
TypeScript), images, and other assets
2) Seperation of concerns:
Emphasizing the separation of concerns involves dividing the application into distinct
sections, each responsible for a specific aspect of functionality. For example,
separate files for HTML, CSS, and JavaScript ensure that the code is modular and
easy to manage.
3) Component-Based Architecture:
Many modern frontend frameworks, such as React, Vue.js, and Angular, advocate
for a component-based architecture. Components are self-contained, reusable units
of code that encapsulate a specific piece of functionality or UI. This approach
promotes code reusability and maintainability.
4) Responsive design:
As users access web applications on various devices, creating a responsive design is
crucial. This involves organizing the layout and stylesheets to adapt seamlessly to
different screen sizes, ensuring a consistent and user-friendly experience across
devices.
5) Code Modularity:
Breaking down the code into smaller, manageable modules or functions enhances
maintainability. Each module should have a specific purpose and be independent of
other parts of the application. This facilitates easier debugging, testing, and updates.
6) Version control:
Utilizing version control systems (e.g., Git) helps track changes to the codebase,
collaborate with a team, and roll back to previous versions if needed. Branching and
merging strategies contribute to a more organized development workflow.
7) Build tools and task runners:
Integrating build tools like Webpack, Gulp, or Parcel streamlines the development
process by automating tasks such as code bundling, minification, and transpilation.
This improves performance and ensures a clean, optimized codebase forproduction.
8) Code documentation: Thorough and well-maintained documentation is essential for
understanding the purpose and usage of different components and functions.

DEPT,OF EEE, SGBIT,BELAGAVI Page 2

 WEB APPLICATION DEVELOPMENT

Inline comments and documentation tools help developers, especially when working
collaboratively.
9) Code style and linting:
Enforcing a consistent code style through the use of linters (e.g., ESLint, Stylelint)
ensures that the codebase adheres to predefined guidelines. This promotes readability
and reduces the likelihood of introducing bugs.By focusing on these principles;
developers can create frontend applications that are not only visually.

NARROATION:
About Intrenship details:
Web application development involves creating software applications that are
accessed through web browsers over a network. It encompasses both frontend
(client-side) and backend (server-side) development, aiming to provide users with a
seamless and interactive experience.

Here's a detailed overview of key aspects in web application development:

Frontend Development:
 HTML(Hypertext Markup Language):
HTML is the standard markup language used to structure content on the web. It
defines the elements on a web page, such as headings, paragraphs, images, links,
forms, etc. HTML, or HyperText Markup Language, is the standard markup
language for creating and structuring content on the web. It forms the backbone of
virtually every web page, providing a standardized way to define and organize
elements on a website. HTML is essential for creating the structure and layout of
web pages, and it works in conjunction with CSS (Cascading Style Sheets) and
JavaScript to deliver a complete and interactive user experience.

Here are some key aspects of HTML:

I. Basic Structure:
An HTML document is typically structured with an opening <! DOCTYPE
html>eclaration, followed by an<html> element
containing<head>and<body>sections.
<! DOCTYPE html>
<html>
<head>
<! -- Metadata, title, linked stylesheets, and scripts go here -->
</head>
<body>
<!-- Content of the web page goes here -->
</body>
</html>

DEPT,OF EEE, SGBIT,BELAGAVI Page 3

 WEB APPLICATION DEVELOPMENT

II. HTML Elements:

HTML uses various elements to define different parts of a web page, such as
headings, paragraphs, lists, links, images, forms, and more.
<h1>this is a Heading</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Description of the image">

III. Attributes:
HTML elements can have attributes that provide additional information about the
element. Attributes are always included in the opening tag.
<a href="https://example.com" target="_blank" title="Open link in a new
tab">Visit Example</a>

IV. Document Structure:

HTML organizes content hierarchically using elements. For example, a document
might have sections<section>, articles<article>, headers<header>, footers<footer>,
and more
<body>
<header>
<h1>Main Header</h1>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Content of the article.</p>
</article>
</section>
<Footer>
<p>Copyright © 2024</p>
</footer>
</body>
V. Forms:
HTML provides elements for creating forms, which are essential for user input.
Common form elements include<input>,<select>,<textarea>, and<button>.
<form action="/submit" method="post">
<label for="username">Username :< /label>
<input type="text" id="username" name="username" required>
<button type="submit">Submit</button>
</form>
VI. Semantics:
HTML5 introduced semantic elements that provide more meaning to the structure of
a web page. Examples include<header>,<nav>,<section>,<article>,<aside>,
and<footer>
<header>

DEPT,OF EEE, SGBIT,BELAGAVI Page 4

 WEB APPLICATION DEVELOPMENT

<h1>Website Title</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>

VII. Comments:
Developers can add comments to HTML code using the<!_ _ . . . _ _>syntax.
Comments are ignored by browsers and are useful for providing explanations or
temporarily removing code.
<!-- This is a comment -->
<p>This is a paragraph.</p>
HTML is a foundational technology for web development, providing the structure
and semantics necessary for creating a wide range of web application
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hello</title>
</head>
<body>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
</body>
</html>
Output:

DEPT,OF EEE, SGBIT,BELAGAVI Page 5

 WEB APPLICATION DEVELOPMENT

 CSS(Cascading Style Sheet):

CSS is responsible for styling and formatting HTML elements. It controls the layout,
colors, fonts, and overall visual presentation of the web page.
CSS, or Cascading Style Sheets, is a stylesheet language used to describe the
presentation of a document written in HTML or XML. In web development, CSS
plays a crucial role in styling and formatting the visual appearance of a webpage. It
allows developers to control the layout, colors, fonts, and other design aspects of a
site.
VIII. Selectors:
Selectors are patterns that target HTML elements for styling. Common selectors
include element selectors (e.g.,p,h1) class selectors (e.g.,.class-Name), and ID
selectors (e.g.,#id-name).
p{
Color: blue;
}
.highlight {
Background-color: yellow;
}
#header {
Font-size: 24px;
}
IX. Properties and values:
CSS properties define the style aspects, and values specify the settings for those
properties. Properties and values are grouped into declaration blocks within curly
braces.
Body {
Font-family: 'Arial', sans-serif;
Background-color: #f0f0f0;
}
.container {
Width: 80%;
Margin: 0 auto;
}

X. Box model:
The box model describes how elements are represented as rectangular boxes with
content, padding, borders, and margins. Properties like width, height, padding,
border, and margin control the box model.
.box {
Width: 200px;
Height: 100px;
Padding: 20px;
Border: 2px solid #333;
Margin: 10px;
}

DEPT,OF EEE, SGBIT,BELAGAVI Page 6

 WEB APPLICATION DEVELOPMENT

XI. Layout:
CSS allows developers to control the layout of a webpage using properties like
display, position, float, and flexbox. Flexbox and Grid are modern layout models that
simplify the creation of complex and responsive layouts.
.flex-container {
Display: flex;
Justify-content: space-between;
}
.grid-container {
Display: grid;
Grid-template-columns: 1fr 2fr;
}
XII. Color and Gradient:
CSS provides various ways to specify colors, including named colors, hexadecimal,
RGB, and HSL values. Gradients allow for smooth transitions between colors.
.background-color {
Background-color: #3498db;
}
.gradient {
Background: linear-gradient (to right, #ff8a00, #da1b60);
}

XIII. Fonts and Text:

CSS controls the typography and text styling, including font size, family, weight, and
alignment. Pseudo-classes and pseudo-elements can be used to style specific states
or parts of an element.
Body {
Font-family: 'Open Sans', sans-serif;
}
h1::before {
Content: "Chapter: “
Font-weight: bold;
}
Example:
Code:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width, initial-scale=1">
<Title>hello</title>
</head>
<Body>
<! DOCTYPE html>
<Html>
<Head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width, initial-scale=1">
<Title>hello</title>

DEPT,OF EEE, SGBIT,BELAGAVI Page 7

 WEB APPLICATION DEVELOPMENT

</head>
<Body>
<table border="3px" cell cellspacing="5px" cellpadding="5px">
<TR>
<Th>sl.no</Th>
<Th>name</Th>
<Th>ph.no</Th>
<Th>email</Th>
</TR>
<TR>
<Td>1</td>
<Td>aandy</td>
<Td>123456</td>
<td>@123.com</td>
</TR>
<TR>
<Td>2</td>
<Td>sandy</td>
<Td>1234567</td>
<td>@1234.com</td>
</TR>
<TR>
<Td>3</td>
<Td>candy</td>
<Td>12345678</td>
<td>@12345.com</td>
</TR>
</body>
</html>
</body>
</html>

Output:

DEPT,OF EEE, SGBIT,BELAGAVI Page 8

 WEB APPLICATION DEVELOPMENT

 Java Script:
JavaScript is a versatile scripting language that enables interactive and dynamic
frontend behavior. It allows for client-side validation, handling events, and updating
the DOM (Document Object Model) dynamically.JavaScript is a versatile
programming language primarily used for building dynamic and interactive web
applications. It is a core technology for web development and runs in web browsers,
enabling developers to create a wide range of features and functionalities.

XIV. Client-side scripting:

JavaScript is primarily known for client-side scripting, where it runs in the browser
and enables interaction with the Document Object Model (DOM). It allows
developers to manipulate HTML elements, handle user events, and dynamically
update the content of a webpage.
XV. Variable and Data types:
JavaScript uses dynamic typing, allowing variables to hold values of any data type.
Common data types include strings, numbers, booleans, objects, arrays, and
functions
Let greeting = "Hello, ";
Let count = 10;
Let isTrue = true;
Let myArray = [1, 2, 3];
XVI. Fuctions:
Functions are fundamental in JavaScript, allowing developers to encapsulate and
reuse code. Functions can be declared or expressed and can take parameters and
return values.
Functions add (a, b) {
Return a + b;
}
Const result = add (3, 4);
Example:
Code:
<! Doctype html>
<html Lang="en">
<Head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Bootstrap demo</title>
<linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"integrity="sha384T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1M
XxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<Body>
<!--navigation starts < -->
<Section>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a><button class="navbar-toggler"
type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">

DEPT,OF EEE, SGBIT,BELAGAVI Page 9

 WEB APPLICATION DEVELOPMENT

<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-
toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu">
<Li><a class="dropdown-item" href="#">Action</a></li>
<Li><a class="dropdown-item" href="#">another action</a></li>
<Li><hr class="dropdown-divider"></li>
<Li><a class="dropdown-item" href="#">something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link” aria-disabled="true">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link” aria-disabled="true">Contact us</a>
</li>
</ul>
<form class="d-flex" role="search">
<! -- <input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search"> -->
<button class="btn btn-outline-success" type="submit">Submit</button>
</form>
</div>
</div>
</nav>
</section>
<!--navigation ends < -->
<! -- Slider starts -->
<Section>
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-
to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-
to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-
to="2" aria-label="Slide 3"></button>
</div>

DEPT,OF EEE, SGBIT,BELAGAVI Page 10

 WEB APPLICATION DEVELOPMENT

<div class="carousel-inner">
<div class="carousel-item active">
<img src="image/img3.jfif" class="d-block w-100" alt=" " height="300px">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>some representative placeholder content for the first slide. </p>
</div>
</div>
<div class="carousel-item">
<img src="image/img3.jfif" class="d-block w-100" alt="..."height="300px ">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>some representative placeholder content for the second slide. </p>
</div>
</div>
<div class="carousel-item">
<img src="image/img3.jfif" class="d-block w-100" alt="..."height="300px">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>some representative placeholder content for the third slide. </p>
</div>
</div>
</div>
<buttonclass="carousel-control-prev"type="button"data-bs-
target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<buttonclass="carousel-control-next"type="button"data-bs-
target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<! -- Slider ends -->
<! -- About us starts -->
<Section>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>about us</h2>
<p> Lorem ipsum dolor sits amet, consectetur adipisicing elit, sed do eiusmod
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat none
Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="col-md-6">
<img src="image/img3.jfif" class="d-block w-100" alt="..."height="300px">

DEPT,OF EEE, SGBIT,BELAGAVI Page 11

 WEB APPLICATION DEVELOPMENT

</div>
</div>
</div>
</section>
<! -- About us ends -->
<! -- Services starts -->
<Section>
<h1 class="text-center">Services</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem ;">
<img src="image/img3.jfif" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">some quick example text to build on the card title and
make up the bulk of the card's content. </p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="image/img3.jfif" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 18rem ;">
<img src="image/img3.jfif" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">some quick example text to build on the card title and make
up the bulk of the card's content. </p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</section>
<! -- Service ends -->
<! -- Gallary starts -->
<Section>
<h1 class="text-center">Gallery</h1>

DEPT,OF EEE, SGBIT,BELAGAVI Page 12

 WEB APPLICATION DEVELOPMENT

<div class="container">
<div class="row">
<div class="col-md-3">
<img src="image/img3.jfif" class="card-img-top" alt="...">
</div>
<div class="col-md-3">
<img src="image/img3.jfif" class="card-img-top" alt="...">
</div>
<div class="col-md-3">
<img src="image/img3.jfif" class="card-img-top" alt="...">
</div>
<div class="col-md-3">
<img src="image/img3.jfif" class="card-img-top" alt="...">
</div>
<div class="col-md-3">
<img class="rounded-circle" src="image/img3.jfif" class="card-img-top" alt="..."
>
</div>
<div class="col-md-3">
<img class="rounded-circle" src="image/img3.jfif" class="card-img-top" alt="...">
</div>
<div class="col-md-3">
<img class="rounded-circle" src="image/img3.jfif" class="card-img-top"
alt="...">
</div>
<div class="col-md-3">
<img class="rounded-circle" src="image/img3.jfif" class="card-img-top"
alt="...">
</div>
</div>
</div>
</section>
<! -- Gallary Ends -->
<! -- Contact us starts -->
<section class="text-center">
<h1 class="text-center">contact us</h1>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<Form>
<label class="label-control">name</label>
<input type="text" name="name" Val="" placeholder="plz enter your name”
class="Form-control" ><br><br>
<label class="label-control" >phone number</label>
<input type="phone number" name="phone number" Val="" placeholder="plz
enter your phone number" class="Form-control"><br><br>
<label class="label-control">email</label>
<input type="email" name="email" Val="" placeholder="plz enter your email"
class="Form-control"><br><br>
<label class="label-control"> comment</label>

DEPT,OF EEE, SGBIT,BELAGAVI Page 13

 WEB APPLICATION DEVELOPMENT

<textarea class="Form-control" cols="10" rows="10" class="Form-control">

</textarea>
</form>
</div>
</div>
</div>
</section>
<! -- Contact us ends -->
<! -- Footer starts -->
<Section>
<div class="container">
<div class="row">
<h3 class="text-center" >copyright@cynthia</h3>
</div>
</div>
</section>
<! -- Footer ends -->
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.m
in.js"integrity="sha384C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7Ru
BCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Output:

DEPT,OF EEE, SGBIT,BELAGAVI Page 14

 WEB APPLICATION DEVELOPMENT

 Responsive web design:

Responsive design ensures that web applications adapt to various screen sizes and
devicesTechniques like media queries and flexible grid layouts are used to create a
consistent user experience across different platforms.Responsive web design is an
approach to web development that aims to create web pages that provide an optimal
viewing and interaction experience across a wide range of devices and screen sizes.
The goal is to ensure that websites look and function well on desktops, laptops,
tablets, and smartphones.
 Browser developer tools:
Developers use browser developer tools for debugging, profiling, and optimizing
frontend code. Tools like Chrome DevTools and Firefox Developer Tools provide
insights into network requests, DOM manipulation, and performance metrics.
Browser Developer Tools are built-in features in web browsers that allow developers
to inspect, debug, and analyze web pages. These tools provide a powerful set of
functionalities for web developers to diagnose and troubleshoot issues, optimize
performance, and improve the overall quality of web applications

Bootstrap:
It seems like there might be a slight typo in your question. If you are referring to
"Bootstrap," it is a popular open-source front-end framework for designing
responsive and mobile-first websites. Bootstrap is based on HTML, CSS, and
JavaScript and provides a set of pre-designed components, styles, and utilities to help
developers quickly build modern and visually appealing web interfaces.

 Responsive Design:
Bootstrap makes it easy to create responsive web pages that adapt to different screen
sizes and devices. This is achieved through a fluid grid system and responsive utility
classes.
 Pre designed component:
Bootstrap includes a variety of ready-to-use UI components like navigation bars,
modals, carousels, forms, buttons, and more. These components can be customized
and extended according to your project's requirements.
 Grid system:
Bootstrap uses a responsive, 12-column grid layout, which helps in creating flexible
and consistent page structures. Developers can easily create different layouts for
various screen sizes.
 Css style:
Bootstrap comes with a set of CSS styles that provide a consistent look and feel
across different browsers. It also includes a variety of color schemes and typography
styles.
 Java script components:
Bootstrap includes a range of JavaScript plugins for common UI functionalities, such
as tooltips, popovers, modals, and more. These components enhance the interactivity
and user experience of your website.
 Costomization:
While Bootstrap provides a default theme, it is highly customizable. Developers can
customize the framework using the provided Sass variables or use the online
customization tool to tailor it to their specific needs.

DEPT,OF EEE, SGBIT,BELAGAVI Page 15

 WEB APPLICATION DEVELOPMENT

Task assigned:

Problem Statement:

By using HTML, CSS and BOOTSTRAP desinging of Facebook Login page.

Code:
<! DOCTYPE html>
<! -- Coding By CodingNepal - www.codingnepalweb.com -->
<html Lang="en">
<Head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial- scale=1.0">
<Title>Facebook Login Page | CodingNepal</title>
<link rel="stylesheet" href="login.css">
</head>
<Body>
<div class="container flex">
<div class="facebook-page flex">
<div class="text">
<h1>facebook</h1>
<p>Connect with friends and the world </p>
<p> around you on Facebook. </p>
</div>
<form action="#">
<input type="email" placeholder="Email or phone number" required>
<input type="password" placeholder="Password" required>
<div class="link">
<button type="submit" class="login">Login</button>
<a href="#" class="forgot">Forgot password?</a>
</div>
<Hr>
<div class="button">
<a href="#">Create new account</a>
</div>
</form>
</div>
</div>
</body>
</html>

 Login.css:
@import URL ('https: //fonts.googleapis.com/css2?family=Roboto:wght@300;
400; 500; 700&display=swap');
*{
Margin: 0;
Padding: 0;
Box-sizing: border-box;
Font-family: 'Roboto', sans-serif;
}
DEPT,OF EEE, SGBIT,BELAGAVI Page 16
 WEB APPLICATION DEVELOPMENT

.flex {
Display: flex;
Align-items: center;
}
.container {
Padding: 0 15px;
Min-height: 100vh;
Justify-content: center;
Background: #f0f2f5;
}
.facebook-page {
Justify-content: space-between;
Max-width: 1000px;
Width: 100%;
}
.facebook-page .text {
Margin-bottom: 90px;
}
.facebook-page h1 {
Color: #1877f2;
Font-size: 4rem;
Margin-bottom: 10px;
}
.facebook-page p {
Font-size: 1.75rem;
White-space: nowrap;
}
Form {
Display: flex;
Flex-direction: column;
Background: #fff;
Border-radius: 8px;
Padding: 20px;
Box-shadow: 0 2px 4px rgba (0, 0, 0, 0.1),
0 8px 16px rgba (0, 0, 0, 0.1);
Max-width: 400px;
Width: 100%;
}
Form input {
Height: 55px;
Width: 100%;
Border: 1px solid #CCC;
Border-radius: 6px;
Margin-bottom: 15px;
Font-size: 1rem;
Padding: 0 14px;
}
Form input: focus {
Outline: none;
Border-color: #1877f2 ;}

DEPT,OF EEE, SGBIT,BELAGAVI Page 17

 WEB APPLICATION DEVELOPMENT

:: Placeholder {
Color: #777;
Font-size: 1.063rem;
}
.link {
Display: flex;
Flex-direction: column;
Text-align: center;
Gap: 15px;
}
.link .login {
Border: none;
Outline: none;
Cursor: pointer;
Background: #1877f2;
Padding: 15px 0;
Border-radius: 6px;
Color: #fff;
Font-size: 1.25rem;
Font-weight: 600;
Transition: 0.2s ease;
}
.link .login: hover {
Background: #0d65d9;
}
Form a {
Text-decoration: none;
}
.link .forgot {
Color: #1877f2;
Font-size: 0.875rem;
}
.link .forgot: hover {
Text-decoration: underline;
}
Hr {
Border: none;
Height: 1px;
Background-color: #CCC;
Margin-bottom: 20px;
Margin-top: 20px;
}
.button {
Margin-top: 25px;
Text-align: center;
Margin-bottom: 20px;
}
.button a {
Padding: 15px 20px;
Background: #42b72a;

DEPT,OF EEE, SGBIT,BELAGAVI Page 18

 WEB APPLICATION DEVELOPMENT

Border-radius: 6px;
Color: #fff;
Font-size: 1.063rem;
Font-weight: 600;
Transition: 0.2s ease;
}
.button a: hover {
Background: #3ba626;
}
@media (max-width: 900px) {
.facebook-page {
Flex-direction: column;
Text-align: center;
}
.facebook-page .text {
Margin-bottom: 30px;
}
}
@media (max-width: 460px) {
.facebook-page h1 {
Font-size: 3.5rem;
}
.facebook-page p {
Font-size: 1.3rem;
}
Form
Padding: 15px;
}
}

Output:

DEPT,OF EEE, SGBIT,BELAGAVI Page 19

 WEB APPLICATION DEVELOPMENT

Overall experience about intrenship:

Undertaking an internship in web application development has been a transformative
and enlightening experience, shaping my understanding of both the technical and
professional realms of software engineering. Over one months, I was immersed in
the dynamic and fast-paced environment of web development, where I honed my
skills, collaborated with seasoned professionals, and contributed to meaningful
projects. This detailed narrative encapsulates the multifaceted nature of my
internship, highlighting the key aspects that made it an invaluable learning journey.I
was able to successfully participate in and accomplish all of the tasks required for
the project entitled “Web Application Development” through which I was able to
showcase my great work and team player skills.

One of the most significant aspects of my internship was the extensive skill
development it facilitated. Entering the internship with a foundational knowledge of
HTML, CSS, and JavaScript, I quickly found myself diving deeper into these
languages, mastering advanced concepts, and exploring new technologies. The
internship provided me with hands-on experience in modern frameworks These tools
enabled me to build dynamic and responsive user interfaces, as well as robust server-
side applications. The practical experience gained during the internship was
instrumental in bridging the gap between theoretical knowledge and real-world
application. I had the opportunity to work on several projects, each presenting unique
challenges and learning opportunities. From designing user interfaces to
implementing backend logic, I was involved in every stage of the development
lifecycle. Beyond the technical and practical skills, the internship was a significant
period of personal growth and professional development. One of the most valuable
lessons I learned was the importance of effective time management. Balancing
multiple tasks, meeting deadlines, and prioritizing responsibilities required a
disciplined and organized approach. This skill has proven to be indispensable, both
in my professional and personal life.

My internship in web application development has been an incredibly rewarding and

transformative experience. The technical skills I have acquired, the practical
experience I have gained, and the personal growth I have undergone have all
contributed to shaping me into a more competent and confident developer. The
journey has reinforced my passion for web development and my commitment to
continuous learning and improvement. Overall, the internship has provided a solid
foundation for my career in web application development, equipping me with the
tools, knowledge, and confidence to navigate the complexities of the tech industry.
I am grateful for the opportunity and look forward to the exciting journey ahead, as
I continue to grow both personally and professionally in this ever-evolving field.

DEPT,OF EEE, SGBIT,BELAGAVI Page 20

 WEB APPLICATION DEVELOPMENT

DEPT,OF EEE, SGBIT,BELAGAVI Page 21