INTERNSHIP REPORT

ON

WEB DEVELOPMENT
Submitted in partial fulfilment for the award of the degree of

Bachelor of Engineering

in

COMPUTER SCIENCE AND ENGINEERING of

Visvesvaraya Technological University Belgavi

During the year 2023-24

Carried out by

HARSHA P H

1SB20CS039

Under the Guidance of

Mr.Lalitdas Vaishnav

MOTION CUT

Department Of Computer Science And Engineering

SRI SAIRAM COLLEGE OF

ENGINEERING
Anekal, Bengaluru - 562106
 SRI SAIRAM COLLEGE OF ENGINEERING
Department of Computer Science & Eng.
Anekal, Bangalore – 562106

CERTIFICATE
This is to certify that HARSHA P H bearing the USN 1SB20CS039 has carried out the
internship work entitled “Web development” in Motion Cut for the partial fulfilment
for the award of Bachelor of Engineering in Department of Computer Science and Engineering
in Sri Sairam College of Engineering, Bengaluru under Visvesvaraya Technological
University, Belagavi during the year 2023 - 2024.

Signature of the Signature of the Signature of the

Guide Prof Shoba HOD Dr. Smitha J. Principal Dr. B.
V Associate Professor A HOD, Shadaksharappa
Dept. of CSE Dept. of CSE Principal

External Viva:

Name of the Signature with Date

Examiner
1)

2)
 ACKNOWLEDGEMENT

This Internship is a result of accumulated guidance, direction and support of several

important persons. We take this opportunity to express our gratitude to all who have helped
us to complete the Internship.

I am very much thankful to our beloved Chairman and CEO Dr. Sai Prakash LeoMuthu and
to our Management Representative Dr. Arun Kumar R for their kind encouragement.

We express our sincere thanks to our Principal Dr. B Shadakshrappa, for providing us
adequate facilities to undertake this Internship.

We would like to thank our Head of Dept, CSE – Dr. Smitha J. A for providing us an
opportunity to carry out Internship and for his valuable guidance and support.

We would like to thank our mentors of Motion cut for guiding us during the period of
internship.

We express our deep and profound gratitude to our guide, Prof Shoba V , Associate
Professor for her keen interest and encouragement at every step in completing the Internship.

Additionally, we extend our heartfelt thanks to our internship coordinator, Prof. Amsa
Lakshmi M, Assistant Professor in the Department of Computer Science and Engineering,
for her invaluable support and guidance throughout the internship journey.

We would like to thank all the faculty members of our department for the support extended
during the course of Internship.

We would like to thank the non-teaching members of our dept, for helping us during the
Internship. Last but not the least, we would like to thank our parents and friends without
whose constant help, the completion of Internship would have not been possible.
 ABSTRACT

During my internship at Motion Cut, I immersed myself in front-end web development,

leveraging HTML, CSS, and JavaScript to create functional and engaging user interfaces. This
report details the specific projects I worked on, outlining the technical methodologies and tools
utilized.

It examines the challenges faced during the development process and the innovative solutions
implemented to overcome them, highlighting the growth of my problem-solving and technical
abilities. Additionally, the report reflects on the invaluable experience gained from collaborating
with team members and communicating effectively in a professional environment.

This internship at Motion Cut has significantly enhanced my technical skills and soft skills,
reinforcing my career aspirations in web development and preparing me for future opportunities.

One of the key projects, the Portfolio Website Development project, focused on creating an
elegant and visually appealing online portfolio designed to showcase the skills, accomplishments,
and work of an individual or organization. The primary goal was to develop an interactive and
user-friendly platform to present a wide range of projects, achievements, and experiences. This
digital portfolio acts as a dynamic space where the owner can display both past and ongoing
projects while demonstrating their growth and progress over time
 Table of Contents

Sl no Description Page no

1 About the Company 1

2 System Design 3

3 Proposed System 5

4 Requirement Analysis 6

5 System Design & 7

Analysis
6 Implementation 8

7 Results And Snapshots 14

8 Conclusion 15

9 References 16
 CHAPTER 1
ABOUT THE COMPANY
Motion Cut Organization delivers comprehensive solutions for web design and
development, including expertise in MySQL, Python programming, HTML, CSS, and LINQ.
In response to the growing need for automation, Motion Cut excels in ERP, connectivity, SEO
services, conference management, web promotion, and custom software solutions, all tailored
to meet client requirements. Our team comprises a balanced mix of experienced professionals
dedicated to serving our clients with top-notch capabilities and adherence to industry
standards. We pride ourselves on having a dynamic and creative team passionate about
driving technological innovations in mobile technologies, web applications, and business and
enterprise solutions. Our organization's motto is to "Collaborate with our clients to deliver the
best technological solutions, creating a positive present and an even better future for their
businesses." Providing a complete suite of technical solutions is not just our tagline but our
vision for our clients and ourselves, and we work diligently to realize it.

Products Of Company
Android Apps

It is the process by which new applications are created for devices running the Android
operating system. Applications are usually developed in Java (and/or Kotlin; or other such
option) programming language using the Android software development kit (SDK), but other
development environments are also available, some such as Kotlin support the exact same
Android APIs (and bytecode), while others such as Go have restricted API access.

Web Application

It is a client–server computer program in which the client (including the user interface
and client- side logic) runs in a web browser. Common web applications include web mail,
online retail sales, online auctions, wikis, instant messaging services and many other
functions. web applications use web documents written in a standard format such as
HTML and JavaScript, which are supported by a variety of web browsers

Web design

It is encompasses many different skills and disciplines in the production and

maintenance of websites. The different areas of web design include web graphic design;
interface design; authoring, including standardized code and proprietary software.

Internship Report 2023-24 1

 search engine optimization. The term web design is normally used to describe the design
process relating to the front-end (client side) design of a website including writing mark up.
Web design partially overlaps web engineering in the broader scope of web development.
Web designers are expected to have an awareness of usability and if their role involves
creating mark up then they are also expected to be up to date with web accessibility
guidelines. Web design partially overlaps web engineering in the broader scope of web
development.

Departments and services offered

At Motion cut, we understand that the quality of education and skill development is heavily
influenced by the caliber of the trainers. A mentor's guidance is crucial; without it, students
may find themselves falling behind. To address this, It ensures that our team consists of
highly skilled professionals, so you can be confident in the quality of your academic
experience.
We recognize that both personality development and academic success are significantly
shaped by effective mentorship. With the right training, students are better equipped for
future success. It is committed to providing top-tier mentorship, understanding its importance
in your growth.
Our team of expert mentors is dedicated to guiding trainees in the most effective ways
possible. To maintain the high standards of our mentorship, we regularly conduct skill
development programs. This ensures that our mentors stay updated with industry demands,
enabling them to prepare trainees comprehensively for their careers.

Services provided by the Company

• Core Java and Advanced Java

• Web services and development

• Dot Net Framework

• Python

• Selenium Testing

• Conference / Event Management Service

• Academic Project Guidance

• On The Job Training

• Software Training

Internship Report 2023-24 2

 CHAPTER 2
SYSTEM DESIGN

1. Introduction about Project

In today's digital age, establishing a strong online presence is essential for professionals
across various industries. A professional portfolio website serves as a powerful tool for
showcasing one's skills, expertise, and achievements to potential clients, employers,
collaborators, and peers. Whether you're a freelance designer, photographer, developer,
writer, or any other creative professional, a well-crafted portfolio website can make a lasting
impression and open doors to exciting opportunities.

Project Overview

The project aims to create a professional portfolio website that effectively highlights the
creator's work, skills, and personal brand. This website will serve as a centralized hub where
visitors can explore the creator's portfolio, learn about their background and expertise, and
connect with them for potential collaborations or opportunities. With a focus on user
experience, visual appeal, and functionality, the portfolio website will be designed to engage
and captivate visitors while providing them with valuable insights into the creator's
capabilities and achievements.

2. Objective Of Internship

The objectives of the internship related to the project of developing a professional portfolio
website can be multifaceted, aiming to provide the intern with practical experience, skill
development, and an opportunity to contribute meaningfully to the project. Here are some
potential objectives:

1)Hands-on Experience with Web Development: The internship offers the intern the
opportunity to gain practical experience in web development by actively participating in the
creation of a professional portfolio website. This includes tasks such as coding, designing,
testing, and deploying website components using relevant technologies and tools.

2)Understanding Client Requirements: Through the project, the intern will learn how to
gather and understand client requirements for a web development project. This involves
effective communication with the project stakeholders to identify goals, preferences, target
audience, and desired features for the portfolio website.

Internship Report 2023-24 3

 3)Design and User Experience (UX) Enhancement: The intern will be involved in
enhancing the design and user experience of the portfolio website. This includes collaborating
with designers and UX specialists to create visually appealing layouts, intuitive navigation,
and engaging interactive elements that improve user engagement and satisfaction.

4)Content Creation and Management: The internship provides an opportunity for the intern
to contribute to content creation and management for the portfolio website. This involves
writing compelling copy, selecting and optimizing images and multimedia content, and
organizing information effectively to showcase the creator's work and expertise.

5)Project Management and Collaboration: Throughout the internship, the intern will
develop skills in project management and collaboration by working closely with team
members, including developers, designers, content creators, and project stakeholders. This
involves coordinating tasks, meeting deadlines, and effectively communicating progress and
challenges.

6)Professional Communication and Client Interaction: The internship provides

opportunities for the intern to enhance their professional communication skills through
interactions with clients and project stakeholders. This includes presenting ideas, soliciting
feedback, and addressing client concerns and inquiries in a professional and courteous
manner.

7)Skill Enhancement and Personal Growth: Ultimately, the internship aims to provide the
intern with valuable learning experiences and opportunities for skill enhancement and
personal growth. By actively participating in the development of a professional portfolio
website, the intern will develop technical skills, creative abilities, and professional
competencies that are valuable for their future career aspirations in web development or
related fields.

By aligning the internship objectives with the project of developing a professional portfolio
website, both the intern and the project team can work together to achieve mutually beneficial
outcomes and contribute to the success of the project.

Internship Report 2023-24 4

 CHAPTER 3
PROPOSED SYSTEM

The proposed system for a portfolio website project encompasses the envisioned improvements
and solutions to enhance the online presence and effectively showcase one's work and skills. , and
aims to create a compelling and effective online presence that not only showcases the creator's
work and skills but also provides a memorable and engaging experience for visitors, fosters
personal branding Here's a detailed breakdown of what such a proposed system might entail:

1.Dynamic and Visually Appealing Design: The new portfolio website would feature a modern
and visually captivating design that reflects the creator's aesthetic sensibilities and
professionalism. This might involve the use of high-quality imagery, elegant typography, and a
cohesive color scheme to create a visually engaging user experience.

2.Diverse Range of Projects Showcase: The proposed system would include provisions for
showcasing a diverse range of projects, including past work, personal projects, case studies, and
any other relevant endeavors. Each project would have its dedicated page or section with detailed
descriptions, images, videos, and links to further explore the project.

3.User-Friendly Experience: One of the key objectives of the proposed system would be to
ensure a user-friendly experience for visitors to the website. This would involve intuitive
navigation, clear organization of content, and easy access to relevant information. Users should
be able to find what they're looking for quickly and effortlessly.

4.Integration of Interactive Elements: To enhance user engagement and interactivity, the

proposed system might include the integration of interactive elements such as sliders, animations,
scroll effects, and hover states. These interactive features can make the website more engaging
and memorable for visitors, encouraging them to spend more time exploring the content.

5.Responsiveness Across Devices: In today's multi-device landscape, ensuring that the portfolio
website is fully responsive and optimized for various screen sizes and devices is essential. The
proposed system would prioritize responsive design principles to guarantee a seamless experience
for users accessing the website on desktops, laptops, tablets, and smartphones.

Internship Report 2023-24 5

 CHAPTER 4
REQUIREMENT ANALYSIS

Hardware Requirement Specification

 Operating system: Windows, macOS, or Linux

 Processor: Intel Core i3 or AMD Ryzen 3 or
equivalent
 Memory: 4GB RAM
 Storage: 64GB SSD or HDD
 Internet connection: Broadband internet
connection

Software Requirement Specification

A. Functional Requirements
• User Authentication and Profile Management
• Project Showcase and Management
• Interactive User Interface (UI) and User Experience (UX)
• Content Management System (CMS)

 VS-Code Editor
 HTML5
 CSS
 JAVASCRIPT & its frameworks.

B. Non-Functional Requirements
 Availability

The online registration system shall permit backing up of the registration database while
other registration actives are going on.

 Accessibility

The system shall be accessible by people with specific vision needs to the extent that a user
shall be able to display whole user interface in a larger font without truncating displayed text
or other values.

 Security

The access permissions for system data may only be change by the systems data
administrator passwords shall never be viewable at the point of entry or any other time.

Internship Report 2023-24 6

 CHAPTER 5
SYSTEM DESIGN & ANALYSIS

Design

When designing a portfolio website, it is

important to consider the following factors:

 Target audience: Who is your website for? Are you targeting potential employers,
clients, or other web developers? Your design should be tailored to your target
audience.
 Content: What kind of content will you be including on your website? Will you be
showcasing your work, writing blog posts, or sharing your thoughts on the web
development industry? Your design should be able to accommodate the content
you want to include.
 Overall aesthetic: What kind of look and feel do you want your website to have?
Do you want it to be modern and sleek, or more traditional and classic? Your
design should reflect your personal style and brand.

Analysis

Once you have designed your portfolio website, it is important to analyze it to make sure
it is meeting your goals. Here are some things to consider:

 Is your website easy to navigate? Visitors should be able to easily find the
information they are looking for.
 Is your website visually appealing? Your website should be visually appealing and
engaging. Use high-quality images and videos, and use a consistent color scheme
and typography.
 Is your website responsive? Your website should look good and function well on
all devices.
 Is your website meeting your goals? Are you getting the traffic and engagement
you were hoping for? Are you able to showcase your work and connect with
potential employers or clients?

HTML, CSS, and JavaScript

HTML, CSS, and JavaScript are the three core technologies used to build web pages.
HTML is used to create the structure of a web page, CSS is used to style the page, and
JavaScript is used to add interactivity.

Internship Report 2023-24 7

.
 CHAPTER 6
IMPLEMENTATIO
N

Implementation is the stage where the theoretical design is turned into a working system. The
most crucial stage in achieving a new successful system and in giving confidence on the new
system for the users that it will work efficiently and effectively.

The system can be implemented only after thorough testing is done and if it is found to work
according to the specification. It involves careful planning, investigation of the current
system and it constraints on implementation, design of methods to achieve the change over
and an evaluation of change over methods a part from planning.

Two major tasks of preparing the implementation are education and training of the users and
testing of the system. The more complex the system being implemented, the more involved
will be the system analysis and design effort required just for implementation.

The implementation phase comprises of several activities. The required hardware and
software acquisition is carried out. The system may require some software to be developed.
For this, programs are written and tested. The user then changes over to his new fully tested
system and the old system is discontinued.

TESTING

The testing phase is an important part of software development. It is the Information zed
system will help in automate process of finding errors and missing operations and also a
complete verification to determine whether the objectives are met and the user requirements
are satisfied. Software testing is carried out in three steps:

1. The first includes unit testing, where in each module is tested to provide its correctness,
validity and also determine any missing operations and to verify whether the objectives
have been met. Errors are noted down and corrected immediately.

2. Unit testing is the important and major part of the project. So errors are rectified easily in
particular module and program clarity is increased. In this project entire system is
divided into several modules and is developed individually. So unit testing is conducted
to individual modules.

3. The second step includes Integration testing. It need not be the case, the software whose
modules when run individually and showing perfect results, will also show perfect
results when run as a whole.

Internship Report 2023-24 8

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Portfolio</title></head>
<body> <!-- Header -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1><span>Pratik</
span>Patil</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li><a href="#hero" data-
after="Home">Home</a></
li>
<li><a href="#projects"
data-
after="Projects">Projects</a
></li>
<li><a href="#about" data-
after="About">About</a>
</li>
<li><a href="#contact"
data-
after="Contact">Contact</a
Internship Report 2023-24 9
></li>
<section id="contact">
<div class="contact container">
<div>
<h1 class="section-title">Contact <span>info</span></h1>
</div>
<div class="contact-items">
<div class="contact-item">
<div class="icon">
<img src="https://img.icons8.com/bubbles/100/000000/phone.png" /></div>
<div class="contact-info">
<h1>Phone</h1>
<h2>8431489181</h2>
</div></section>
<section id="hero">
<div class="hero container">
<div>
<h1>Hello,
<span></span></h1>
<h1>My Name is
<span></span></h1>
<a href="#projects" type="button" class="cta">Portfolio</a>
<h1>Pratik </div>
Patil<span></span></h1>
</div> </section>
<section id="footer">
<div class="footer container">
<div class="brand">
<h1><span>Pratik</span>Patil</h1>
</div>
<h2>Web developer</h2>
<div class="social-icon">
<script src="./app.js"></script>
</body>
</html>

Internship Report 2023-24 10

</section>

<!-- experience section ends -->

<!-- footer section starts -->

<section class="footer">

<div class="box-container">

<div class="box">

<h3>Pratyush's Portfolio</h3>

<p>Thank you for visiting my personal portfolio website. Connect with me over socials.
<br/> <br/> Keep Rising s.7'•˙¸ . Connect with me over live chat!</p>

</div>

<div class="box">

<h3>quick links</h3>

<h3>quick links</h3>

<a href="/index.html"><i class="fas fa-chevron-circle-right"></i> home</a>

<a href="/#about"><i class="fas fa-chevron-circle-right"></i> about</a>

<a href="/#skills"><i class="fas fa-chevron-circle- right"></i> skills</a>

<a href="/#education"><i class="fas fa-chevron-circle-right"></i> education</a>

<a href="/#work"><i class="fas fa-chevron-circle-right"></i> work</a>

<a href="/#experience"><i class="fas fa-chevron-circle-right"></i>

experience</a>

<script src="script.js"></script>

</body>

</html>

Internship Report 2023-24 11

 CSS CODE:
@import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap’;
• {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: 'Montserrat', sans-serif;
scroll-behaviour: smooth;
}
a{
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
p{
color: black;
font-size: 1.4rem;
margin-top: 5px;
line-height: 2.5rem;
font-weight: 300;
letter-spacing:
0.05rem;

Internship Report 2023-24 12

 JAVASCRIPT CODE:

const hamburger = document.querySelector('.header .nav-bar .nav-

list .hamburger’); const mobile_menu = document.querySelector('.header .nav-
bar .nav-list ul’);

const menu_item = document.querySelectorAll('.header .nav-bar .nav-list ul li a’);

const header = document.querySelector('.header.container’);
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active’);
mobile_menu.classList.toggle('active’);
});
document.addEventListener('scroll', () => {
var scroll_position = window.scrollY;
if (scroll_position > 250) {
header.style.backgroundColor =
'#29323c’;

}
else {
header.style.backgroundColor =
'transparent’;
}});

menu_item.forEach((item) =>
{ item.addEventListener('click', ()
=> {
hamburger.classList.toggl
e('active');
mobile_menu.classList.to
ggle('active’);
});
});

Internship Report 2023-24 13

 CHAPTER 7
RESULTS AND SNAPSHOTS

Internship Report 2023-24 14

 CHAPTER 8
CONCLUSION

In conclusion, my internship at Motion Cut was an invaluable learning opportunity, allowing me

to acquire practical skills and gain insights into Web Development. During this program, I
achieved my goals of learning to develop and deploy scalable web applications using a variety of
technologies. I believe I contributed meaningfully to the organization by developing new
features and fixing bugs in ongoing projects. Overall, the internship significantly deepened my
understanding of Web Development and advanced my professional growth. I am thankful for
this opportunity and look forward to utilizing the knowledge and skills I gained in my future
career as a Web Developer.

Internship Report 2023-24 15

 REFERENCE

 Coursera Course:
Introduction to Web Development, UC Davis by Daniel Randall – It taught all the three
languages HTML5, CSS and JS thoroughly.

 Stack Overflow:
How to modify Google drive links to embed in anchor tag in HTML.

 W3 Schools:
How to give all social media and contacting links.

Internship Report 2023-24 16