INTERNSHIP REPORT

COMPUTER SCIENCE & ENGINEERING/

WEB DEVELOPMENT

Submitted in partial fulfillment of the Requirements for

the award of
Degree of Bachelor of Technology in Computer science
& Engineering

Submitted by:- Ishwar Chand Chauhan

University Roll No:-2107510100024 ,Semester/Branch:-7th semester/ C.S.E

SUBMITTED TO:-Mr Amit Kumar Dubey

Department of Computer Science & Engineering

KIPM College of engineering &
Technology GIDA Gorakhpur

1
OFFER LATER
CERTIFICATE

3
 DECLARATION

I hereby declare that the Industrial Training Report on Computer Science &
Engineering/Section, Industry is an authentic record of my own work as
requirements of Minor/ Major Industrial Training during the period from 10th
may 2024 to 10th june 2024 for the award of degree of B.tech(Computer
Science & Engineering), KIPM, College of engineering & Technology, GIDA
Gorakhpur

(Signature of student)
Ishwar chand chauhan
Date :- 09/12/2024

Certified that the above statement made by the student is correct to the best of our
knowledge and belief

Examined by:
(Signature)

Name of Faculty Facilitator

(Signature)

HOD

4
 ACKNOWLEDGEMENT

I have taken efforts in this project. However, it would not have been possible without the kind
support and help of many individuals and organization. I would like to extend my sincere thanks
to all of them. I am highly indebted to "CodSoft" for their guidance and constant supervision as
well as for providing necessary information regarding the project & also for their support in
completing the project. I would like to express my gratitude towards "Amit Dubey Sir" for his
kind co- operation and encouragement which help me in completion of this project. My thanks
and appreciations also go to my colleagues in developing the project and people who have
willingly helped me out with their abilities.

4
 ABSTRACT

As a web developer for Web Development, I designed and implemented a responsive

and user-friendly interface for the platform. Utilizing HTML5, CSS3, JavaScript, and
React, I created a seamless user experience, ensuring easy navigation and access to
academic resources. I collaborated with the backend team to integrate APIs, ensuring
smooth data exchange and storage. Additionally, I implemented security measures to
protect user data and prevent common web vulnerabilities. The resulting platform
provides a comprehensive and accessible hub for academic excellence

5
 CONTENT

1. CodSoft(Company Profile)
2. Introduction to Web Development
3. HTML
4. CSS
5. Bootstrap
6. PHP
7. SQL
8. Project

6
 CODSOFT

Codsoft:-
It is a vibrant and diverse community that brings together individuals with similar objectives
and ultimate goals. Their main focus is on creating opportunities that span various areas,
including leadership development, learning, student engagement, and fostering shared
interests.
How I got to know about this Internship:-
I got to know about this internship from a LinkedIn post in which one of my friends from the
same college had completed this web development internship from CodSoft. Since it was an
online internship, I also thought of applying for it.

Internship Process:-
To apply for this internship was very easy, I just had to fill up one Google form, and then
within a week, I received my offer letter via mail. The duration of this internship was one
month, and I was given a list of tasks from which I was supposed to complete any one level
from the below-listed levels to receive the completion certificate.

Tasks Given in Level 1

Landing Page
Portfolio
Calculator
Tasks Given in Level 2
Tribute Page
Travel Booking System Tasks
Given in Level 3 Blogging
Platform Online Learning Platform

7
 INTRODUCTION TO WEB
DEVELOPMENT
Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management.
It is the creation of an application that works over the internet i.e. websites.
The word Web Development is made up of two words, that is:
Web: It refers to websites, web pages or anything that works over the
internet. Development: It refers to building the application from scratch. Web Development
can be classified into two ways:

□ Frontend Development
□ Backend Development

Frontend Development

The part of a website that the user interacts directly is termed as front
end. It is also referred to as the 'client side of the application.

9
HTML: HTML stands for Hypertext Mark-up Language. It is used to design the front end
portion of web pages using mark-up language. It acts as a skeleton for a website since it
is used to make the structure of a website.
CSS: Cascading Style Sheets fondly referred to as CSS is a simply
designed language intended to simplify the process of making
web pages presentable. It is used to style our website.
JavaScript: JavaScript is a scripting language used to provide a
dynamic behaviour to our website.
Bootstrap: Bootstrap is a free and open-source tool collection for
creating responsive websites and web applications. It is the most
popular CSS framework for developing responsive, mobile- first
websites. Nowadays, the websites are perfect for all the browsers

(IE, Firefox ,and Chrome) and for all sizes of

screens(Desktop,Tablets, Phablets, and Phones).

□ Bootstrap 4
□ Bootstrap 5

Frontend Frameworks and Libraries:

□ AngularJS □ React.js □ VueJS □ jQuery □ Bootstrap □ Material Ul □

Tailwind CSS □ jQuery UI □ Some other libraries and frameworks are:
Handlebar.js

Backbone.js, Ember.js etc.

10
Backend Development:-Backend is the server side of a website. It is the part of the website
that users cannot see and interact. It is the portion of software that does not come in direct
contact with the users. It is used to store and arrange data.

PHP: PHP is a server-side scripting language designed specifically for web development.
Java: Java is one of the most popular and widely used programming
language. It is highly scalable.
Python: Python is a programming language that lets you work
quickly and integrate systems more efficiently.
Node.js: Node.js is an open source and cross-platform runtime
environment for executing JavaScript code outside a browser.
Back End Frameworks: The list of back end frameworks are:

□ Express
□ Django
□ Rails
□ Larave
□ Spring

11
Web Development Tutorials:

□ HTML □ CSS □
JavaScript □ jQuery
BootStrap
□ React JS

HTML:- HTML stands for Hyper Text Mark-up Language. It is used to design

web pages using the mark-up language. HTML is the combination of Hypertext and Mark-up
Language. Hypertext defines the link between the web pages and mark-up language defines the
text document within the tag that defines the structure of web pages.
What is HTML used for?

HTML is used to create the structure of web pages that are displayed on the World Wide Web
(www). It contains Tags and Attributes that are used to design the web pages. Also, we can link
multiple pages using Hyperlinks.
HTML Basic Format Page Structure

The basic structure of an HTML page is laid out below. It contains the essential building-block
elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web
pages are created.
HTML Page Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body> Tells version of HTML

HTML Root Element

Used to contain page HTML metadata

Title of HTML page

Hold content of HTML

12
<h2>Heading Content</h2> HTML headling tag HTML
<p>Paragraph Content</p> </body> paragraph tag
</html>

□ ⏴!DOCTYPE HTML>: The <!DOCTYPE html> declaration is

placed at the beginning of the document. It tells the browser that
the document follows HTML5 standards, ensuring consistent
rendering across browsers.
□ ⏴html> Tag: The <html> tag wraps the entire document,
serving as the root element of an HTML page. It typically
includes the lang attribute to specify the language of the
content.
□ ⏴head> Section: The <head> section contains metadata, scripts,

styles, and other information not displayed directly on the page

but essential for functionality and SEO.

□ ⏴body> Section: The <body> section contains all the visible

content of the web page, including text, images, videos, links,

and more. This is where you’ll add the main elements to display
on the page.
<!DOCTYPE html> <html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content=

"width=device-width, initial-scale=1.0" />

<title>Structure of HTML Document</title>
</head>

<body>
<!-- Main content of website -->
<h1>GeeksforGeeks</h1>

13
 <p>A computer science portal for geeks</p>
</body>
</html>

Tags and Elements for Structuring an HTML Document

HTML tags are structural components enclosed in angle brackets. They are typically opened
and closed with a forward slash (e.g., <h1></h1>). Some tags are self-closing, while
others
support attributes like width, height, and controls for defining
properties or storing metadata.
There are generally two types of tags in HTML

1. Paired Tags: These tags come in pairs i.e. they have both
opening(< >) and closing(</ >) tags.
2. Empty Tags: These tags are self-closing and do not require a
closing tag.” Below is an example of a <b> tag in HTML, which tells the
browser to bold the text inside it.

Structure of an HTML Document

□ Understanding these key tags will allow you to organize content effectively and create
more readable and accessible webpages.
Headings (⏴h1> to ⏴h6>): Headings are important for
structuring the content within the <body> section. They define

14
 the hierarchy of information, where <h1> is the highest- level heading.
Paragraphs (⏴p>): The <p> tag is used for

□ creating paragraphs, which help to group text into readable

sections. This tag
automatically adds some spacing between paragraphs to
improve readability.

□ Images (⏴img>): The <img> tag is used to add images to a

webpage. It requires the src attribute to specify the image path
and the alt attribute for accessibility.

□ Links (⏴a>):Links are created with the <a> tag. The href
attribute defines the destination URL, and the text within the
<a> tag serves as the clickable link text.

□ Lists (⏴ul>, ⏴ol>, ⏴li>): Lists allow you to organize items in bullet
points (<ul>) or numbered order (<ol>). Each item within a list
is wrapped in <li> tags.

□ Divisions (⏴div>): The <div> tag is a container used to group

other elements together, often for layout. It does not add any
style or structure on its own but is useful for applying CSS
styles to sections of content.

Want to be a Software Developer or a Working Professional

looking to enhance your Software Development Skills? Then,
master the concepts of Full-Stack Development. Our Full Stack
Development - React and Node.js Course will help you
achieve this quickly. Learn everything from Front-End to
Back-End Development with hands-on Projects and real-world
examples. This course enables you to build scalable, efficient,
dynamic web applications that stand out. Ready to become an
expert in Full-Stack? Enroll Now and Start Creating the Future!

15
Levels of HTML Heading Tags
HTML offers six levels of heading tags , each serving a different
purpose in structuring your content:

⏴h1> – Main Heading (Largest)

□ Represents the primary focus of the page, usually used for the
main title.

□ Use only one <h1> tag per page for the best SEO practices.
□ Makes it clear to both users and search engines what the main

topic is.
⏴h2> – Subheadings
□ Ideal for dividing the content into major sections. □ If the content has further
subsections, use <h3> to create a logical flow

⏴h3> to ⏴h6> – Smaller Headings

16
□ These heading levels are used for finer subdivisions, gradually decreasing in size
and importance.

□ <h3> is used for subsections under <h2>, while <h4> to <h6>

are used for additional, less important subdivisions.
□ <h6> defines the least important heading.

□ Example:-
<!DOCTYPE html> <html>

<body>

<h1>This is the Main Heading</h1>

<h2>This is a Subheading</h2>
<h3>This is a Smaller Subheading</h3>
<h4>This is a Sub-Subheading</h4>
<h5>This is a Minor Subheading</h5>
<h6>This is the Smallest Heading</h6>

</body>

</html>

17
 CSS
CSS (Cascading Style Sheets) is a language designed to simplify the process of making
web pages presentable. It allows you to apply styles to HTML documents, describing how a
webpage should look by prescribing colors, fonts, spacing, and positioning. CSS provides
developers and designers with powerful control over the presentation of HTML elements.
HTML uses tags and CSS uses rulesets. CSS styles are applied to the
HTML element using selectors. CSS is easy to learn and understand,
but it provides powerful control over the presentation of an HTML
document.
Basic Format:-
body {

background-color: lightblue;
}

How to Add CSS to HTML?

There are three different ways to add CSS styles to HTML document, these are -

Inline CSS : Use the style attribute on HTML element to add styles to
the web page. It is used for small projects.

□ Example
<!-- File name: index.html -->
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- Using Inline CSS -->
<h3 style="text-align: center;">

18
 Welcome To GFG

</h3>

<p>CSS Tutorial - GeeksforGeeks</p>

</body>
</html>

Internal CSS : Place the CSS styles within a <style> tag inside the
HTML file, usually inside the <head> section.
□ Example
<!-- File name: index.html -->
<!DOCTYPE html>
<html>
<head>

<!-- Using Internal CSS -->

<style>

h3 {

color: green;

</style>

</head>
<body>

<!-- CSS is applied here -->

<h3>Welcome To GFG</h3>

<p>CSS Tutorial - GeeksforGeeks</p>

19
 </body>
</html>

External CSS: Create a separate CSS file with a .css extension and link this file to your
HTML file using the <link> tag.
HTMLCSS

□ Example

<!-- File name: index.html -->

<!DOCTYPE html>
<html>
<head>

<!-- Importing External CSS -->

<link rel="stylesheet" href="style.css" />

</head>
<body>

<p>CSS Tutorial - GeeksforGeeks</p>

</body>
</html>

20
 CSS Box Model

The CSS Box Model is a layout model that describes how different components of a
web element (content, padding, border, and margin) are structured and
positioned. Each web element generates a rectangular box that encompasses these
components, and the Box Model allows developers to control the element’s size and
spacing effectively.
Key Components of the Box Model
The CSS Box Model consists of four primary components:

1. Content Area
□ The content area is where the actual content, such as text,
images, or other media, is displayed.

□ It is sized using the width and height properties.

□ The boundary of the content area is known as the content edge.

2. Padding Area
□ The padding surrounds the content area and creates space inside the border.
□ It can be adjusted using the padding property (or padding-top,
padding-right, padding-bottom, and padding-left for individual
sides).

□ The padding area increases the overall size of the element

without changing the content area.

3. Border Area

□ The border wraps around the padding and content, defining the
edge of the element.

□ It can be styled using properties such as border width

border color, border style, and border-color.

□ The width of the border affects the overall size of the element.

21
4. Margin Area

□ The margin is the outermost space that separates the element

from adjacent elements.

□ It can be set using the margin property (or margin-top,

margin- right, margin-bottom, and margin-left for individual

sides).

□ Unlike padding and bordborderse margin does not increase the

element’s total size but affects its placement on the page.

CSS Versions
□ CSS1: The foundation, released in 1996, introduced
basic styling capabilities for fonts, colors, and margins.

CSS2: Expanded in 1998, adding positioning elements,

pseudo- classes,and improved layout options.

22
 □ CSS 2.1: Further refinements in 2004, including improvements

to inheritance and box model properties.

□ CSS3: Introduced from 2001 onwards, CSS3 isn't a single

version but a collection of modules adding features like

animations, media queries, and web fonts. It's constantly
evolving.

Recent developments focus on variables (custom properties),

enhanced grid and flexbox layouts, subgrid, aspect-ratio property, and
color manipulation functions.
Why learn CSS?
1. Enhance Visual Appeal: CSS allows you to style your web pages, making them visually
appealing and engaging. Here’s why it matters:

□ User Experience (UX): Well-designed websites attract and

retain users. CSS enables you to create beautiful layouts, choose

fonts, and apply colors that resonate with your audience.

2. Responsive Design: In today’s mobile-first world, responsive

design is crucial. CSS empowers you to:

□ Media Queries: Adapt your layout based on screen size

(desktop, tablet, mobile).

□ Flexbox and Grid: Create flexible, adaptive designs that look

great on any device.

3. SEO Benefits: CSS indirectly impacts your site’s SEO. Here’s

how:

24
□ Page Load Speed: Well-organized CSS files load faster,

improving user experience. Google considers page speed as a ranking factor.

□ Structured Content: Properly styled HTML (thanks to CSS)

enhances readability for search engines and users.

□ Mobile Friendliness: Responsive CSS ensures your site

performs well on mobile devices, positively affecting rankings.

25
4. Efficient Maintenance: CSS promotes clean code and separation of concerns:

□ Modularity: Separate CSS files allow easy updates without

affecting other parts of your site.

□ Consistency: Apply styles consistently across your site using

classes and IDs.

5. Career Opportunities: Learning CSS opens doors to various roles:

□ Front-End Developer: Mastering CSS is essential for front-end

development.

□ Web Designer: CSS skills are fundamental for creating stunning

web layouts.

□ Full-Stack Developer: Understanding CSS complements back-

end skills.

Advanced CSS Features

As you conquer the basics, explore these powerful features to elevate your web
design:-

□ Media Queries: Tailor website layouts for different screen

sizes, ensuring optimal viewing experiences across devices.
□ CSS Grid and Flexbox: Revolutionize website layouts with

these frameworks for creating complex and responsive designs.

□ CSS Animations and Transitions: Add interactivity and visual

flair to your webpages with smooth animations and transitions.

26
 Bootstrap

Bootstrap is a free, open-source framework that helps web developers create

responsive websites and web apps:

□ What it is

Bootstrap is a collection of reusable code written in HTML, CSS, and JavaScript. It includes
design templates for buttons, tables, navigation, modals, and more.

□ What it does

Bootstrap helps developers build websites faster by:

□ Providing a pre-defined grid system for developers to

insert code into

□ Allowing developers to focus on development rather than

design

□ Making it easier to create responsive designs

□ How it works

Bootstrap's 12-column grid system updates responsively based on screen size. It also
includes optional JavaScript plugins.

□ Variants

Bootstrap is available in two variants: precompiled and based on a

source code version.

27
 PHP

PHP (Hypertext Preprocessor)

It is a versatile and widely used server- side scripting language for creating
dynamic and interactive web applications. This PHP tutorial will give you an in-
depth understanding of the PHP scripting language. Whether you are a beginner
or a professional PHP developer this free PHP tutorial will provide valuable
knowledge about PHP scripting language. PHP is a popular scripting language
used for creating dynamic web pages and web applications. The term PHP is an
acronym of Hypertext Preprocessor. It is an open-source, interpreted, object-
oriented server-side scripting language.

Features of PHP

□ Open-Source and Free: PHP is firstly open source which

means anyone can use PHP code without any licensing. Along
with this one can run PHP on any operating system like
Windows, macOS, Linux, Unix and more.
□ PHP Server-Side Scripting: PHP code executes on the server
before sending HTML content to the user's browser, allowing
for the dynamic generation of web pages and handling user
interactions.

□ Interpreted language: PHP code is interpreted line by line,

eliminating the need for compilation and simplifying

29
 development and testing processes.

□ Database connectivity: PHP integrates seamlessly

with various
databases like MySQL, PostgreSQL, and Oracle, facilitating
data storage and retrieval for web applications.

Object-oriented programming (OOP): PHP supports

□ OOP
concepts like classes, objects, inheritance, and polymorphism,
enabling better code organization and modularity.

30
□ Built-in functions: PHP comes with a rich set of built-in

functions for various tasks such as string manipulation, date and time handling, file handling,
and more, reducing the need for external libraries.

□ Session management: PHP allows for user session

management, enabling personalized experiences and storing
user data across multiple page visits.

□ Security features: While security considerations are essential

for any development language, PHP offers several built-in
security features and best practices to help mitigate
vulnerabilities.
History of PHP
PHP is developed by Rasmus Lerdorf in 1994 the very first version of PHP that simply
designed to set the Common Gateway Interface
(CGI) binaries, which are written in C programming language. The
latest version of PHP is PHP version 8 which is released on November 24, 2022. It can be easily
embedded with HTML files. HTML codes can also be written in a PHP file. The PHP codes are
executed on the server side whereas HTML codes are directly executed on the browser.
PHP Characteristics

1. Simple

2. Efficient

31
 3. Secure

4. Flexible

Applications of PHP
□ Server-side web development: It is a development where the

program runs on a server dealing with the generation of content of web pages.

□ Content management systems (CMS): It is a framework

already designed by other programmers and coders on which you
can either contribute your knowledge and skills or just use those
coders’ skills to design your own website or blog
□ E-commerce websites: E-commerce, or electronic commerce,
refers to the buying and selling of goods and services over the
Internet.

□ Database-driven applications: It is a software application that

relies on a database to store, manage, and retrieve data. It
utilizes a database management system (DBMS) to organize and
manipulate data, enabling efficient data storage, retrieval, and
management.

□ Web APIs: It is an API as the name suggests, it can be

accessed over the web using the HTTP protocol. It is a framework
that helps you to create and develop HTTP-based RESTFUL
services.

32
 PROJECT

Layout of my task

34