1

An Internship Report
On
Web Development

Submitted in partial fulfillment of the requirement for the

Degree of Bachelor of Technology

(SESSON 2023-24)
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE

Submitted by:
Sanskar Chouksey (0832CS221181)

Submitted To:
Ms. Amrita Jain

RAJIV GANDHI PROUDYOGIKI

VISHWAVIDYALAYA BHOPAL (M.P)

CHAMELI DEVI GROUP OF INSTITUTIONS,

INDORE
 2

CERTIFICATE OF ORIGINALITY OF WORK

I Sanskar Chouksey Enrollment No. 0832CS221181 Student of Computer Science

& Engineering Branch IV Semester, have undergone the 30 days (duration of 4
week) internship at Bharat Intern. I have worked on Web Development during my
internship period.

Sanskar Chouksey
0832CS221181
IV Semester

CHAMELI DEVI GROUP OF INSTITUTIONS,

INDORE
 3

CERTIFICATE
This is to certify that Mr. Sanskar Chouksey of B.Tech (Computer Science &
Engineering) Enrollment No. 0832CS221181 has completed his Internship of 4
weeks from date 10/05/2024 to 10/06/2024 at Bharat Intern during the Academic
Year 2023-2024 as partial fulfillment of the B.Tech (Computer Science &
Engineering) course.

Coordinator Head of the Department

 4

Table of Content

CONTENTS PAGE NO.

Introduction of the Project 5
Description of the Project 6
Technical Details of the Project 7-11
Certificate of Internship 12
 5

Introduction of the Project

Project Overview
During my internship at Bharat Intern, I was tasked with developing a web-based chat
application resembling the popular messaging platform, LinkedIn. This project aimed to
enhance my understanding and proficiency in front-end web development using HTML, CSS,
and JavaScript. The objective was to create a fully functional, user-friendly chat application that
mimics the core features of LinkedIn, including real-time messaging, user authentication, and a
responsive user interface.
Objectives
The primary objectives of this project were:
1. To develop a functional chat application: Implement essential features such as user
registration, login, real-time messaging, and user profile management.
2. To improve technical skills: Gain hands-on experience with HTML, CSS, and
JavaScript, and understand how these technologies interact to create dynamic web
applications.
3. To understand web development best practices: Learn about responsive design, cross-
browser compatibility, and efficient coding techniques.
Scope of the Project
The scope of the project included the following key components:
 User Interface (UI) Design: Crafting a visually appealing and intuitive interface
inspired by LinkedIn's design. This included creating layouts for the chat window,
contact list, and user profile sections.
 User Authentication: Implementing a secure user registration and login system.
 Real-time Messaging: Developing a system to support real-time text messaging
between users.
 Responsive Design: Ensuring that the application works seamlessly on different devices
and screen sizes.
 6

Description of the Project

Requirement Analysis
This phase involved understanding the needs and expectations of the users. Key activities
included:
 Stakeholder Interviews: Discussing with the project supervisor and team to gather
requirements.
 Requirement Documentation: Creating detailed documentation of the user stories and
use case diagrams.

System Design
This phase transformed the requirements into a blueprint for the web application.
 High-Level Design: Creating architecture design, defining the main components and
their interactions.
 Low-Level Design: Detailing the design for each component, including data structures,
algorithms, and interfaces.

Development (Coding)
The actual coding of the web application took place in this phase.
 Code Implementation: Writing the code using HTML, CSS, and JavaScript according
to the design specifications.
 Version Control: Managing changes in the codebase using Git.
 Peer Reviews: Conducting code reviews to ensure code quality and adherence to
standards.

Testing
Testing was an integral part of the development process to identify and fix bugs.
 Unit Testing: Testing individual components for correctness.
 Integration Testing: Ensuring that different modules work together as expected.
 System Testing: Verifying that the complete system meets the specified requirements.
 User Acceptance Testing (UAT): Ensuring the software meets the users' needs.
 7

Technical Details of the Project

HTML
HTML (Hypertext Markup Language) is the standard language for creating web pages. It
provides the structure of a webpage, allowing developers to organize content into headings,
paragraphs, links, and other elements.

CSS
CSS (Cascading Style Sheets) is used to control the presentation and layout of the webpage. It
allows for the separation of content from design, enabling developers to create visually
appealing and responsive layouts.

JavaScript
JavaScript is a versatile scripting language used to create dynamic and interactive web content.
It allows developers to implement complex features like real-time messaging, user
authentication, and responsive design.

User Interface Design

The UI design focused on creating an intuitive and user-friendly experience. Key components
included:
 Chat Window: A responsive layout that adapts to different screen sizes.
 Contact List: A scrollable list of contacts with search functionality.
 User Profile: A section for users to manage their profile information and settings.

User Authentication
The authentication system ensured secure user registration and login. It included:
 Registration: Users could create an account by providing necessary details.
 Login: Users could log in using their credentials.
 Password Management: Functionality for password recovery and updates.
3.4 Real-time Messaging
Real-time messaging was implemented using JavaScript and WebSockets. Key features
included:
 Message Sending and Receiving: Users could send and receive messages in real-time.
 Notification System: Users were notified of new messages.
 Message History: Users could view their chat history.

Responsive Design
 8

The application was designed to be fully responsive, ensuring a seamless experience across
different devices. Techniques included:
 Media Queries: CSS media queries were used to adjust layouts for different screen
sizes.
 Flexible Grids and Layouts: A flexible grid system ensured that elements adapted to
various screen widths.
 Responsive Images: Images were optimized for different resolutions to enhance
performance.
Testing Frameworks and Tools
Several testing frameworks and tools were used to ensure software quality:
 Mocha: A JavaScript test framework for unit and integration testing.
 Chai: An assertion library for node and the browser, used with Mocha.
 Selenium: A tool for automating web applications for testing purposes.

HTML
 9

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkedIn Clone</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="LinkedIn Logo">
</div>
<div class="search-bar">
<input type="text" placeholder="Search">
<button class="bx bx-search"></button>
</div>
<nav>
<ul>
<li><a href="#"><i class='bx bxs-home'></i>Home</a></li>
<li><a href="#"><i class='bx bxs-user'></i>My Network</a></li>
<li><a href="#"><i class='bx bxs-briefcase'></i>Jobs</a></li>
<li><a href="#"><i class='bx bxs-message'></i>Messaging</a></li>
<li><a href="#"><i class='bx bxs-bell'></i>Notifications</a></li>
<li><a href="#"><i class='bx bxs-user-circle'></i>Me</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<div class="left-column">
<!-- Profile section -->
<div class="profile-card">
<img src="profile-pic.jpg" alt="Profile Picture">
<h2>John Doe</h2>
<p>Software Engineer at XYZ Company</p>
</div>
<!-- Other sections like recent activities -->
</div>
<div class="middle-column">
<!-- Post section -->
<div class="post-box">
<textarea placeholder="Start a post"></textarea>
<button>Post</button>
</div>
<!-- Feed section -->

<div class="feed">
 10

<!-- Individual post -->

<div class="post">
<div class="post-header">
<img src="user1.jpg" alt="User 1">
<div>
<h3>User 1</h3>
<p>Position at Company</p>
</div>
</div>
<div class="post-content">
<p>This is a sample post.</p>
</div>
<div class="post-actions">
<button><i class='bx bx-like'></i>Like</button>
<button><i class='bx bx-comment'></i>Comment</button>
<button><i class='bx bx-share'></i>Share</button>
</div>
</div>
</div>
</div>
<div class="right-column">
<!-- Other sections like ads or suggestions -->
</div>
</div>
</main>
<script src="index.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
background-color: #f3f2ef;
color: #000;
}

header {
background-color: #283e4a;
padding: 10px 0;
}

.container {

width: 80%;
 11

margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo img {
width: 120px;
}

.search-bar {
display: flex;
align-items: center;
width: 50%;
}

.search-bar input {
width: 100%;
padding: 10px;
border-radius: 4px;
border: none;
}

.search-bar button {
background-color: #0073b1;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 4px;
}

nav ul {
list-style: none;
display: flex;
gap: 20px;
}

nav ul li a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
}
 12

Certificate of Internship