Internship Assessment Report (KCS-752)

On
WEB DEVELOPMENT
Submitted in partial fulfillment for award of
BACHELOR OF TECHNOLOGY
Degree
In
COMPUTER SCIENCE & ENGINEERING

2024-25

Under the Guidance of: Submitted By:

Suvesh Kumar & 2200330109018
www. codsoft. in

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY
DELHI-MEERUT ROAD, GHAZIABAD

Affiliated to Dr. A.P.J. Abdul Kalam Technical University, Lucknow

 Department of Computer Science & Engineering

DECLARATION

This is to certify that the Internship Assessment Entitled “Web Development” which
is being submitted in partial fulfillment of the requirement for the award of degree B.
Tech in Computer Science and Engineering to RKGIT, Ghaziabad (Dr. A.P.J. Abdul
Kalam Technical University, Lucknow) comprises only original work and studies
carried out by the students themselves. The matter embodied in this work has not been
submitted for the award of any other degree.

Date: SUVESH KUMAR

2200330109018
VISION OF THE INSTITUTE
To continually develop excellent professionals capable of providing sustainable solutions
tochallenging problems in their fields and prove responsible global citizens.

MISSION OF THE INSTITUTE

We wish to serve the nation by becoming a reputed deemed university for providing value
basedprofessional education.

VISION OF THE DEPARTMENT

To be recognized globally for delivering high quality education in the ever- c h a n g i n g
field ofcomputer science & engineering, both of value & relevance to the communities we
serve.

MISSION OF THE DEPARTMENT

1. To provide quality education in both the theoretical and applied foundations of
ComputerScience and train students to effectively apply this education to solve real
world problems.
2. To amplify their potential for lifelong high-quality careers and give them a competitive
advantage in the challenging global work environment.

PROGRAM EDUCATIONAL OUTCOMES (PEOs)

PEO 1: Learning: Our graduates to be competent with sound knowledge in field of Computer
Science & Engineering.

PEO 2: Employable: To develop the ability among students to synthesize data and technical
concepts for application to software product design for successful careers that meet theneeds
of Indian and multinational companies.

III
PEO 3: Innovative: To develop research oriented analytical ability among students to
prepare them for making technical contributions to the society.

PEO 4: Entrepreneur / Contribution: To develop excellent leadership quality among

students which they can use at different levels according to their experience and contribute for
progress and development in the society.

PROGRAM OUTCOMES (POs)

Engineering Graduates will be able to:

PO1: Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.

PO2: Problem analysis: Identify, formulate, review research literature, and analyze
complex engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.

PO3: Design/development of solutions: Design solutions for complex engineering

problems and design system components or processes that meet the specified needs with
appropriate consideration for the public health and safety, and the cultural, societal, and
environmental considerations.

PO4: Conduct investigations of complex problems: Use research-based knowledge

and research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.

PO5: Modern tool usage: Create, select, and apply appropriate techniques, resources,
and modern engineering and IT tools including prediction and modelling to complex
engineering activities with an understanding of the limitations.

IV
PO6: The engineer and society: Apply reasoning informed by the contextual
knowledge to assess societal, health, safety, legal and cultural issues and the consequent
responsibilities relevant to the professional engineering practice.

PO7: Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and need
forsustainable development.

PO8: Ethics: Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.

PO9: Individual and team work: Function effectively as an individual, and as a member
or leader in diverse teams, and in multidisciplinary settings.

PO10: Communication: Communicate effectively on complex engineering activities with the

engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give and
receive clear instructions.

PO11: Project management and finance: Demonstrate knowledge and understanding

of the engineering and management principles and apply these to one’s own work, as a
member and leader in a team, to manage projects and in multidisciplinary environments.

PO12: Life-long learning: Recognize the need for and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological
change.

PROGRAM SPECIFIC OUTCOMES (PSOs)

PSO1: The ability to use standard practices and suitable programming environment to develop
software solutions.

V
 PSO2: The ability to employ latest computer languages and platforms in creating innovative
careeropportunities.

Course Outcome
Bloom’s
CO No. Statement of Course Outcome Knowledge
Cognitive
Process Level Category (KC)
After completion of the course, the student will be able to (BL)
Identify a problem and gather its requirements.
CO1 Apply Conceptual
Design a solution of the problem using latest
CO2 tools & techniques. Create Metacognitive
Develop a project using latest technology.
CO3 Create Metacognitive
Develop professional skills and critical thinking to Create Metacognitive
CO4 prepare for major project.
Demonstrate ability to present project works to the Apply Conceptual
CO5
evaluators.

CO-PO Mapping (Internship Assessment/Mini Project,

KCS752)

Course Programme Outcome (PO) PSO PSO

Code:
1 2 3 4 5 6 7 8 9 10 11 12 1 2

CO-1 3 3 3 3 3 2 - - 2 2 2 3 2 2
3 3 3 3 3 - - - 2 - 2 3 2 3
CO-2

3 3 3 3 3 1 - - 3 - 2 2 3 2
CO-3

CO-4 - 2 2 3 2 2
3 3 3 3 3 2 3 2
- - - 3 - - 2 3
CO-5
2 2 2 3 2 2
PO 2.2 3 3 3 3 1.66 - 2 2.4 2.33 2 2.8 2.2 2.2
Target

VI
 Department of Computer Science & Engineering

Internship Assessment (KCS-752) (CS, VII SEM)

INTERNAL EVALUATION FORM

As per the AKTU norms Industrial Training progress shall be evaluated by the internal
examiner at the end of the semester. However, there will be continuous monitoring of the
Industrial Training progress report during the semester and distribution of marks shall be as
follows:

B.Tech. Final Year Industrial Training Assessment (Internal)

Date of Assessment (DD/MM/YYYY): / / 2024

Project Assessment Parameter(s)

Total Marks (50) Student Roll No

Application of Engineering Principles and

software/mathematicaltools/Latest technology (10)

Quality of the report writing (layout, structure,

written andgraphical material, referencing) (10)

Presentation Skills (10)

Innovation and understanding (level of difficulty,

innovation and understanding of work completed)
(10)

Outcomes (results, conclusions and learning

outcomesachieved) (10)

VII
 ABSTRACT

CODSOFT is a vibrant and diverse community that brings together individuals with similar
objectives and ultimate goals. Our main focus is on creating opportunities that span various
areas, including leadership development, learning, student engagement, and fostering shared
interests.

We believe in the power of leadership and its ability to drive positive change. That' s why we
provide platforms and resources for our community members to develop their leadership skills.
Through mentorship programs, workshops, and collaborative projects, we empower
individuals to take on leadership roles and make a difference in their respective fields.

CodSoft is an IT services and consultancy firm specializing in innovative solutions for

businesses, with a strong emphasis on technology-driven education and community
engagement. Their internship programs offer practical experience in various fields, including
web development, app development, software development, data science, and more.

One intern's experience at CodSoft involved a comprehensive 4-week program focusing on

web development. The intern worked on projects such as creating a landing page, developing
a portfolio website, and building a basic calculator application. This hands-on approach
allowed the intern to apply theoretical knowledge to real-world scenarios, enhancing skills in
HTML, CSS, JavaScript, and other web technologies.

CodSoft's commitment to practical learning and skill development makes it a valuable platform
for aspiring professionals in the tech industry. Their internships are designed to bridge the gap
between academic knowledge and industry requirements, preparing interns for successful
careers in technology.

VIII
 Table Of Content
PageNo.
TITLEPAGE……...…………………………………………………..................1
Declaration.……………………………………………………………………...2
Vision, Mission, PEO, PO, PSO, CO, CO-PO-PSO Mapping…............3-6
Internal Evaluation sheet……………………………………………….7
Abstract ……………………..………………….……….………………………8
Problem Statement………………………………………………………………1
Solution Approach…………………………………………………………….1-2
Software Requirements………………………………………………………..2-8
Instruction………………………………………………………………………9
Submission………………………………………………………………………9
DFD………………….………………………………………………………...10
Project Snapshots………………………………………………………………11
Certificate………………………………………………………………………12
Introduction…………………………………………………………...……12-14
Real World Application………………………………………………………..14
References……………………………………………………………………...15
Internship Evaluation Form………………………………………………...16-17

IX
 List of fig & tables
PageNo.

Web Browser..…………………………………………………………………...4
HTML Version...………………………………………………………………...4
DFD(level 0)…………………………………………………………………...10
DFD(level 1)…………………………………………………………………...10

X
 Problem Statement
With the digital era's rapid advancement, businesses and individuals are increasingly reliant on
a strong online presence. However, many lack the resources or expertise to create visually
appealing, responsive, and functional websites. This problem is especially prominent among
small businesses, startups, and individuals who require cost-effective yet professional web
development solutions. The main challenges include:

 User Experience (UX): Many websites fail to deliver an intuitive and seamless browsing
experience, leading to poor engagement and high bounce rates.
 Responsiveness: Websites often struggle to adapt across various devices and screen sizes,
affecting accessibility and usability.
 Customization and Branding: Businesses require websites tailored to their unique identity
and goals, which generic templates fail to achieve.
 Cost and Time Constraints: Small businesses often face budget and time limitations,
making it difficult to hire professional developers or agencies.

Solution Approach
CodSoft’s web development projects aim to address these challenges by adopting a
comprehensive and systematic solution approach that focuses on delivering high-quality, user-
centric websites.

1. Understanding Client Needs:

 Conduct thorough client consultations to understand their goals, target audience, and
brand identity.
 Create a detailed project plan, including key milestones, design preferences, and
required functionalities.
2. Design and Development:
 Wireframes and Mockups: Develop initial sketches and wireframes to outline the
website structure and user flow. Create visually appealing mock-ups to finalize the
design.
 Responsive Design: Ensure the website layout and features adapt seamlessly to various
screen sizes, including desktops, tablets, and smartphones.

1
  User-Centred Design: Focus on creating an intuitive navigation system, clear call-to-
action (CTA) buttons, and an aesthetically pleasing layout to enhance user experience.
3. Technology Stack:
 Frontend Development: Use HTML, CSS, and JavaScript to build interactive and
visually appealing interfaces. Leverage frameworks like Bootstrap for responsiveness.
 Backend Development: Implement server-side logic using PHP, Node.js, or Python,
ensuring robust functionality.
 Database Integration: Use databases like MySQL or MongoDB for storing and
managing user data efficiently.
4. Optimization:
 Performance Optimization: Minimize load times by optimizing images, using
efficient code, and enabling browser caching.
 Search Engine Optimization (SEO): Integrate SEO best practices, such as meta tags,
keyword-rich content, and a mobile-friendly design, to improve search engine rankings.
5. Testing and Quality Assurance:
 Conduct extensive testing to identify and fix bugs, ensuring the website functions
seamlessly across all browsers and devices.
 Perform usability testing to gather feedback and make necessary adjustments.
6. Deployment and Maintenance:
 Deploy the website on a reliable hosting platform, ensuring a secure and smooth launch.
 Offer ongoing maintenance and updates to keep the website relevant and functional.

Software Requirements
Frontend end as
 HTML
 CSS
 JavaScript’s
HTML: -
HTML is the standard markup language for Web pages.

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page

2
  HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML5

document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

3
HTML tags are element names surrounded by angle brackets:

<tagname> Content goes here... </tagname>

 The HTML element is everything from the start tag to the end tag:
 <h1>My First Heading</h1>
 <p>My first paragraph. </p>

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents
and display them correctly. A browser does not display the HTML tags, but uses them to
determine how to display the document:

Fig: Web Browser

HTML Page Structure

Below is a visualization of an HTML page structure:

4
<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph. </p>

<p>This is another paragraph. </p>

</body>

</html>

HTML Versions

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

5
 1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

Table: HTML Version

CSS

CSS is the language we use to style an HTML document.

CSS is the language we use to style a Web page.

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

CSS Example

body {
background-color: lightblue;

6
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph. </p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started
a nightmare for web developers. Development of large websites, where fonts and color
information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

7
JavaScript’s

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.
JavaScript is easy to learn.
One of many JavaScript HTML methods is getElementById().
JavaScript Example
document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript accepts both double and single quotes:
document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript Display
JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.
 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().

Using InnerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML
content:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;

8
</script>

</body>
</html>

Instruction

 Update your Linked In profiles

 For a Web Development internship, you will need to complete anyone (either level 1
or level 2, or level 3) at your convenience for successful completion of the internship.
 Maintain a separate Git Hub repository (name CODSOFT for all the tasks and share the
link of the Git Hub repo in the task submission form (it will be given later through
email).
 You can refer to online resources such as Google Search and read tutorials. Watch
videos (For Help).

Submission

1. A TASK SUBMISSION FORM will be shared later through email. Till then please
continue your task.
2. A video needs to be created to showcase your work, demo of your effort
3. The video can be hosted on Linked In for proof of
4. your work and build credibility among your peers. You can tag CODSOFT in such
posts.
5. Please add codsoft in each of your task
6. video postings on Linked In, Additionally, you can also add hashtags such as internship
7. web development. for more reach and visibility.

9
DFD (Data Flow Diagram)

Fig: DFD level 0

Fig: DFD level 1

10
Project Snapshots

11
 Certificate

Introduction
CodSoft is a reputed company offering internships in various fields such as software
development, data science, AI/ML, web development, and more. As an intern at CodSoft, you'll
gain hands-on experience by working on real-world projects while being mentored by
experienced professionals.
 Practical Learning: Opportunity to apply theoretical knowledge to practical tasks and
projects.
 Skill Development: Focused on enhancing technical, analytical, and communication
skills.
 Mentorship: Guidance from industry experts to foster professional growth.
 Portfolio Building: Work on impactful projects that can be showcased in your
portfolio.
 Networking Opportunities: Interaction with peers and professionals for career

12
 building.
 Certification: Receive a certificate of completion, which adds value to your resume.

Task 1: Portfolio Website

Create a personal portfolio to showcase your skills, projects, and contact information.
Features to Include:
 Homepage: Introduce yourself with a professional bio and a high-quality picture.
 Projects Section: Showcase your projects with titles, descriptions, and links to live
demos or GitHub repositories.
 Skills Section: Highlight your technical skills using icons or progress bars.
 Contact Form: Allow visitors to contact you via a form.
 Responsive Design: Ensure your site works on all devices (desktop, tablet, mobile).
Tech Stack:
 HTML5: For structure.
 CSS3: For styling (use Flexbox, Grid, or frameworks like Bootstrap).
 JavaScript: Optional for form validation or animations.

Task 2: Landing Page

Design a visually appealing landing page for a fictional product, service, or event.
Features to Include:
 Hero Section: Large banner with a title, tagline, and a call-to-action (CTA) button.
 About Section: Brief description of the product/service/event.
 Features/Benefits Section: Highlight key features with icons or images.
 Testimonials Section: Add 2-3 testimonials for credibility.
 Footer: Include links to social media, privacy policy, and contact details.
Design Tips:
 Use an eye-catching color scheme and consistent typography.
 Keep the layout simple and intuitive.
 Use high-quality images (free stock photo sources: Unsplash, Pexels).

Task 3: Calculator Application

Develop a simple calculator that performs basic arithmetic operations.
Functionalities:

13
  Input: Two fields for numbers.
 Operations: Buttons for addition, subtraction, multiplication, and division.
 Display Result: Show the calculated result below the buttons.
 Error Handling: Prevent invalid inputs (e.g., division by zero).
Tech Stack:
 HTML: Structure for buttons and input fields.
 CSS: Style the calculator for a clean and user-friendly interface.
 JavaScript: Logic for arithmetic operations and dynamic result display.

Real world Application

1. Portfolio Website
A personal portfolio is essential for professionals in web development and other creative
fields. It serves as a digital resume and showcases your expertise, helping you stand out when
applying for jobs or freelance gigs.
Examples:
 Freelancers: Use portfolios to attract clients.
 Job Seekers: Showcase projects and skills to recruiters.
 Developers: Share coding projects, GitHub repositories, or contributions to open
source.
2. Landing Page
Landing pages are widely used in digital marketing campaigns to promote products, services,
events, or brands. They are designed to capture user interest and drive specific actions, like
signing up for a newsletter or purchasing a product.
Examples:
 E-commerce: Landing pages for product promotions or seasonal sales.
 Startups: Pages for launching new apps or services.
 Events: Registration or ticket booking for webinars, concerts, or conferences.
3. Calculator Application
A calculator is a fundamental tool used in various domains like finance, engineering, and
education. Building one enhances understanding of logic, event handling, and user interactions,
which are essential in developing interactive applications.
Examples:
 Finance: Mortgage or loan calculators for banks.

14
 Education: Tools for solving equations or physics problems.
 Retail: Discount calculators for shopping platforms.

References

 https://www.w3schools.com/
 https://www.freecodecamp.org/
 https://www.codsoft.in/
 https://www.codecademy.com/
 https://www.youtube.com/

15
 INTERNSHIP EVALUATION FORM
B.Tech (CSE), Raj Kumar Goel Institute of Technology, Ghaziabad

Date:

Name of the intern and University Roll. No.: Suvesh Kumar & 2200330109018

Semester/Year/Section : 7th / 4th / D

Training Offered : From 25/08/2024 To 25/09/2024

Evaluation of the training may be done with the following parameters:

Grade Excellent Very Good Good Average Poor

Points
5 4 3 2 1

S. Parameters Grade
NO. Awarded
1. Knowledge Acquired During Industrial Training
2. Ability to use Techniques and Methods Appropriate for Assignments
3. Ability to Display the Technical Skills required
4. Ability to Organize, classify and Deliver the job
5. Perseverance to Complete the job
6. Takes Initiative and Works with Minimal Supervision
7. Attendance and Punctuality
8. Ability to Establish Positive Relationships with the Officials and Peers
9. Personal Conduct and Behavior
10. Ability to Cope Up with the Stressful Situation
11. Ability to work in team
12. Ability to work as an Individual

16
13. Department (s) /Section(s) where the intern was accommodated:

S. Department(s) Type of work Period

NO. /Section (s) From To
1
2
3
4
5

14. Intern’s Strength:

15. Areas for Improvement:

16. Additional Comments, if any:

17. Overall Evaluation of the Intern’s Performance Grade Awarded

Name / Signature of Officer In-charge (Training):

Authorized Signatory

17