GUJARAT TECHNOLOGICAL UNIVERSITY

Gujarat Power Engineering and Research Institute,

Mehsana Academic year
(2023-2024)
GPERI COLLEGE
INTERNSHIP REPORT UNDER SUBJECT OF
SUMMER INTERNSHIP (3170001)
B.E. SEMESTER-VII
BRANCH – Computer Engineering
Submitted by :- Prajapati Nipun N.
CodSoft

Prof. Himani Patel Mr. Harsh

Makwana (Internal Guide) (External Guide)

 Company Profile

Company Name: CodSoft

Address: Lokenath bose garden lane Kolkata,West Bengal 70004
Contact No:
Email ID:
Website: contact@codsoft.in

CodSoft are IT services and IT consultancy that specializes in creating innovative

solutions for businesses. We are passionate about technology and believe in the
power of software to transform the world. Our internship program is just one of
the ways in which we are investing in the future of the industry.
Mission:
Software development is an iterative process, and the mission includes
continually improving software solutions. This entails gathering feedback,
identifying areas for enhancement, and implementing updates to make the
software more efficient, user-friendly, and reliable. Continuous improvement also
involves staying up to date with the latest technologies, tools, and industry trends.
JOINING LETTER
COMPLETION CERTIFICATE
 ACKNOWLEDGEMENT

First, I would like to thank Mr. Harsh Makwana, Director and Miss. Foram
Vithalani, HR of CodSoft. to give me the opportunity to do an internship
within the organization.

I also would like all the people that worked along with me in the
organization with their patience and openness to create an enjoyable
working environment.

I am highly grateful to Principal Dr. Chirag Vibhakar Sir, for the facilities
provided to accomplish this internship.

I would like to thank my Head of the Department Prof. Amrita Chitranshi,

for the constructive criticism throughout my internship.

I would like to thank Prof. Khyati Prajapati, internship guide, Department of

CSE for their support and advice to complete internship in CodSoft.

It is indeed with a great sense of pleasure and immense sense of gratitude

that I acknowledge the help of these individuals.

I am extremely grateful to my department staff members and friends who

helped me in successful completion of this internship.
 ABSTRACT

Python is a dynamic, interpreted (bytecode-compiled) language. There are no type

declarations of variables, parameters, functions, or methods in source code.

This makes the code short and flexible, and you lose the compile-time type checking of
the source code.

Python tracks the types of all values at runtime and flags code that does not make sense
as it runs.

An excellent way to see how Python code works is to run the Python interpreter and
type code right into it.

If you ever have a question like, "What happens if I add an int to a list?" Just typing it
into the Python interpreter is a fast and likely the best way to see what happens.
 DAY – 1:
What is Web Development?
Web development, also known as website development, refers to the tasks associated with creating,
building, and maintaining websites and web applications that run online on a browser. It may, however,
also include web design, web programming, and database management.

Web development is closely related to the job of designing the features and functionality of apps (web
design). The term development is usually reserved for the actual construction of these things (that is to
say, the programming of sites).

The basic tools involved in web development are programming languages called HTML (Hypertext
Markup Language), CSS (Cascading Style Sheets), and JavaScript. There are, however, a number of
other programs used to “manage” or facilitate the construction of sites that would otherwise have to be
done “from scratch” by writing code. A number of content management systems (CMS) fall into this
category, including WordPress, Joomla!, Drupal, TYPO3, and Adobe Experience Manager, among
others.

What is HTML:-
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating
web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web
page.

What is CSS:-

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look
and formatting of a document written in markup language. It provides an additional feature to HTML.
It is generally used with HTML to change the style of web pages and user interfaces. It can also be
used with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile applications.

What is JAVASCRIPT:-
JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled
programming language. It is also known as the scripting language for webpages. It is well-
known for the development of web pages, and many non-browser environments also use it.

JavaScript is a weakly typed language (dynamically typed). JavaScript can be used for Client-
side developments as well as Server-side developments. JavaScript is both an imperative and
declarative type of language. JavaScript contains a standard library of objects, like Array,
Date, and Math, and a core set of language elements like operators, control structures, and
statements.
Client-side: It supplies objects to control a browser and its Document Object Model (DOM). Like if
client-side extensions allow an application to place elements on an HTML form and respond to user
events such as mouse clicks, form input, and page navigation. Useful libraries for the client side are
AngularJS, ReactJS, Vue.JS, and so many others.

Server-side: It supplies objects relevant to running JavaScript on a server. For if the server-side
extensions allow an application to communicate with a database and provide continuity of information
from one invocation to another of the application, or perform file manipulations on a server. The useful
framework which is the most famous these days is node.js.

What is IDE:-
An integrated development environment (IDE) is a software application that helps programmers
develop software code efficiently. It increases developer productivity by combining capabilities such
as software editing, building, testing, and packaging in an easy-to-use application. Just as writers use
text editors and accountants use spreadsheets, software developers use IDEs to make their job easier.

The IDE we will use:-

Visual Studio Code is a streamlined code editor with support for development operations like
debugging, task running, and version control. It aims to provide just the tools a developer needs for a
quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such
as Visual Studio IDE.
 DAY – 2:
How to install VS Code:-

Step 1: Visit the official website of the Visual Studio Code using any web browser like Google
Chrome, Microsoft Edge, etc.

Step 2: Press the “Download for Windows” button on the website to start the download of the Visual
Studio Code Application.
Step 3: When the download finishes, then the Visual Studio Code icon appears in the downloads folder.

Step 4: Click on the installer icon to start the installation process of the Visual Studio Code.

Step 5: After the Installer opens, it will ask you for accepting the terms and conditions of the Visual
Studio Code. Click on I accept the agreement and then click the Next button..
Step 6: Choose the location data for running the Visual Studio Code. It will then ask you for browsing
the location. Then click on Next button.
Step 7: After clicking on Install, it will take about 1 minute to install the Visual Studio Code on your
device.

Step 8: After clicking on Install, it will take about 1 minute to install the Visual Studio Code on your
device.

Step 9: After the Installation setup for Visual Studio Code is finished, it will show a window like this
below. Tick the “Launch Visual Studio Code” checkbox and then click Next.
Step 10: After the previous step, the Visual Studio Code window opens successfully. Now you can
create a new file in the Visual Studio Code window and choose a language of yours to begin your
programming journey!
Understand basic HTML structure:

An HTML Document is mainly divided into two parts:

HEAD: This contains the information about the HTML document. For Example, the Title of the page,
version of HTML, Meta Data, etc.

BODY: This contains everything you want to display on the Web Page.
Let us look at the basic structure of HTML that is must for every webpage have:

<!DOCTYPE html>
<!-- Defines types of documents : Html 5.O -->
<!DOCTYPE html>
<!-- Defines types of documents : Html 5.O -->
<html lang="en">
<!-- DEfines languages of content : English -->
<head>
<!-- Information about website and creator -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Defines the compatibility of version with browser -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- for make website responsive -->
<meta name="author" content="Mr.X">
<meta name="Linkedin profile" content="WWW.linkedin.com/Mr.X_123" >
<!-- To give information about author or owner -->
<meta name="description "
content="A better place to learn computer science">
<!-- to explain about website in few words -->
<title>GeeksforGeeks</title>
<!-- Name of website or content to display -->
</head>
<body>
<!-- Main content of website -->
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
 </body>
</html>

Every Webpage must contain this code. Below is the complete explanation of each of the tags used in
the above piece of HTML code:

<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is
HTML 5.0

<html> </html> : <html> is a root element of html. It’s a biggest and main element in complete html
language, all the tags , elements and attributes enclosed in it or we can say wrap init , which is used to
structure a web page.

<html> tag is parent tag of <head> and <body> tag , other tags enclosed within <head > and <body>.
In <html > tag we use “lang” attributes to define languages of html page such as <html lang=”en”>
here en represents English language. some of them are : es = Spanish , zh-Hans = Chinese, fr= french
and el= Greek etc.

<head>: Head tag contains metadata, title, page CSS etc. Data stored in the <head> tag is not
displayed to the user, it is just written for reference purposes and as a watermark of the owner.

How to add CSS in HTML file:

CSS is added to HTML pages to format the document according to information in the style sheet.
There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS
3. External CSS

1) Inline CSS

Inline CSS is used to apply CSS on a single line or element.

For example:

<p style="color:blue">Hello CSS</p>

2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the
page. It is written inside the style tag within head section of html.

For example:

<style>
p{color:blue}
</style>

3) External CSS

External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a
css file. Its extension must be .css for example style.css.

For example:

p{color:blue}

You need to link this style.css file to your html pages like this:

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

The link tag must be used inside head section of html.

JAVASCRIPT in HTML:

A Script is a small program which is used with HTML to make web pages more attractive, dynamic
and interactive, such as an alert popup window on mouse click. Currently, the most popular scripting
language is JavaScript used for websites.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date and Time example</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
The HTML <script> tag is used to specify a client-side script. It may be an internal or external
JavaScript which contains scripting statements, hence we can place <script> tag within <body> or
<head> section.

It is mainly used to manipulate images, form validation and change content dynamically. JavaScript
uses document.getElementById() method to select an HTML element.

<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaTpoint";
</script>
</body>
</html>

HTML events with JavaScript:

An event is something which user does, or browser does such as mouse click or page loading are
examples of events, and JavaScript comes in the role if we want something to happen on these events.

o Form events: reset, submit, etc.

o Select events: text field, text area, etc.
o Focus event: focus, blur, etc.
o Mouse events: select, mouseup, mousemove, mousedown, click, dblclick, etc.

Event Event Name Handler Name Occurs when

onBlur blur When form input loses focus

onClick click When the user clicks on a form element or a link

onSubmit submit When user submits a form to the server.

onLoad load When page loads in a browser.

onFocus focus When user focuses on an input field.

onSelect select When user selects the form input filed.

<!DOCTYPE html>
<html>
<body>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaTpoint!";
}
</script>
</body>
</html>
 DAY – 3

Working with environment:

Tasks had given to us:

On day 3, there were three task given to us which are mention below,

Task 1: Landing Page

Tasl 2: Portfolio Website

Task 3: Calculator

Analysis of given task:

Certainly! Let's analyse each of the three tasks and provide descriptions along with the requirements to
develop them using HTML, CSS, and JavaScript:
Task 1: Landing Page

Description:

- The landing page is the first point of contact for users visiting a website. It serves as an entry point
and aims to capture user attention, provide information, and guide them further into the site.

- Describe the purpose of the landing page (e.g., marketing a product, collecting user information,
providing information about a company, etc.).

- Include details about the target audience, branding elements, and key messages that need to be
conveyed.

Analysis:

- Evaluate the design elements, such as layout, color scheme, typography, and imagery, in alignment
with the brand's identity.

- Assess the clarity of the call-to-action (CTA) buttons and their placement to encourage user
engagement.

- Consider mobile responsiveness and page load speed for optimal user experience.

- Review the use of SEO keywords for better search engine ranking and visibility.

Requirements:

1. Design: Create an appealing and user-friendly design with a clear layout, visuals, and branding
elements.

2. Content: Include relevant content like a headline, brief description, call-to-action buttons, and
possibly a signup or login form.

3. Navigation: Add navigation links or a menu to guide users to other pages on your website.

4. Responsiveness: Ensure that the landing page is responsive and looks good on various screen sizes.

5. Performance: Optimize images and code for fast loading times.

6. Contact Information: Provide contact information or links to social media if necessary.

7. Analytics: Optionally, integrate web analytics tools to track user engagement.

Task 2: Portfolio Website

Description:

- A portfolio showcases an individual's or a company's work, skills, and achievements.

- Identify the type of content to be included (e.g., projects, case studies, testimonials, etc.).

- Specify if the portfolio will be organized chronologically, by category, or using another structure.

- Mention any interactive features or multimedia elements to be incorporated.

Analysis:

- Evaluate the organization and categorization of portfolio items for user-friendly navigation.

- Assess the visual presentation, including image quality, multimedia integration, and consistency.

- Consider the use of storytelling to provide context and highlight achievements.

- Analyse the overall impact of the portfolio in conveying skills, expertise, and professionalism.

Requirements:

1. Projects: Create sections or pages to display your projects, including project descriptions, images,
and links.

2. About Me: Include a section about yourself, your skills, experience, and background.

3. Contact: Add a contact form or provide contact information for inquiries.

4. Resume: Optionally, provide a link to download your resume or CV.

5. Design: Design the portfolio website to reflect your personal brand or style.

6. Navigation: Implement a navigation menu for easy access to different sections.

7. Responsive: Ensure that the website is responsive for mobile and tablet users.

8. SEO: Optimize the website for search engines with proper meta tags and descriptions.
Task 2: Calculator

Description:

- A calculator tool provides users with the ability to perform calculations based on specific parameters
or inputs.

- Define the purpose of the calculator (e.g., financial calculations, health assessments, etc.).

- Specify the inputs and outputs required for calculations.

- Describe any additional features or functionalities (e.g., saving calculations, printing results, etc.).

Analysis:

- Evaluate the user interface of the calculator for simplicity and ease of use.

- Assess the accuracy of calculations and the handling of various input scenarios.

- Consider user feedback mechanisms and error handling to enhance the user experience.

- Review the codebase for efficiency, security, and scalability.

Requirements:

1. User Interface: Design a user-friendly interface with numeric keys, operators (+, -, *, /), and an
output display.

2. Functionality: Implement JavaScript logic to perform arithmetic calculations based on user input.

3. Operations: Support basic arithmetic operations like addition, subtraction, multiplication, and
division.

4. Error Handling: Handle invalid inputs and display error messages as needed.

5. Clear and Reset: Include buttons to clear the input or reset the calculator.

6. Responsive: Ensure that the calculator functions properly on various screen sizes.

DAY – 4
Start to develop Landing Page:

On day 4, I have started to develop the landing page as the first task.

I was writing my code in VSCode here below the folder structure is given

I have created main folder named CODSOFT and sub folders as task given.Then I have created one
folder named images to save all images used in web page and three main files for
HTML,CSS,JAVASCRIPT.

then I started to code in index.html file,

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/
all.min.css">
</head>

<meta charset="UTF-8">: This meta tag specifies the character encoding for the web page. UTF-8 is a
character encoding that supports a wide range of characters from different languages and is commonly
used for web content.

<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is used for

responsive web design. It sets the viewport's width to the device's width and sets the initial zoom level
to 1.0, which means the web page will be displayed at 100% zoom by default.

<title>Document</title>: This is the title of your web page, which appears in the browser's title bar or
tab. You can change "Document" to whatever title you want for your webpage.
<link rel="stylesheet" href="style.css">: This line is linking an external CSS (Cascading Style Sheets)
file named "style.css" to your web page. CSS is used for styling and formatting your webpage's
content, and by linking this file, you can apply styles defined in "style.css" to your HTML elements.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/

all.min.css">: This line is linking an external CSS file from a Content Delivery Network (CDN)
provided by Font Awesome. It allows you to use Font Awesome icons in your web page by applying
the styles defined in the "all.min.css" file.

After that, I have created navigation bar for the web page and the code structure mentioned below

<header>
<div class="logo">
<h1>One<span class="">X</span></h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Women</a></li>
</ul>
</nav>
</header>

<header>: This is the HTML <header> element, which typically represents the top section of a web
page. It often contains elements like the site logo and navigation menu.

<div class="logo">: This is a <div> element with the class "logo." It is likely used to contain the site
logo or brand name.

<h1>One<span class="">X</span></h1>: Inside the "logo" <div>, you have an <h1> heading element.
This typically represents the main heading or title of the webpage. In this case, it appears to be "OneX,"
with the letter "X" enclosed within a <span> element.

<nav>: This is the HTML <nav> element, which is used to define a section of navigation links or
menus on a webpage.

<ul>: Inside the <nav> element, you have an unordered list (<ul>) that typically represents a list of
navigation items.

<li><a href="#">Home</a></li>: Each list item (<li>) represents a navigation item. In this example,
there are four navigation items: "Home," "Products," "Men," and "Women." Each of these items is
represented as a hyperlink (<a>) with "#" as the placeholder URL. You would typically replace "#"
with the actual URLs of the corresponding pages.
I have styled body and defined root elements,

DAY – 5

Creating main sections of page:

Now I have stated to code different sections.

Product Section:

Firstly, I have named first section and created different divs. The different divs are for creating the first
product section.

In this sections, I have given display flex to divide main section into two parts.In left part i have
written product description.

In right part I have make product image div and add some animation.

<div class="header">: This div contains the product name, which is "AirPro X3."
<div class="product-price">: This div displays the product price, which is 1999 (with the currency
symbol ₹ missing).
<div class="size">: This div represents the product size options.
<div class="product-color">: This div displays the available product colors.
<div class="product-description">: This div contains a product description in the form of Lorem Ipsum
text.
<button type="button" class="shop-btn">: This is a button with the label "Shop Collection" and an
arrow-right icon.

In this div I have styled shop button,here the style I have given to it
.shop-btn: This class defines styles for the button, setting its dimensions, margins, display as flex,
alignment, text characteristics, border-radius, cursor type, background color, box-shadow for a subtle
shadow effect, and a smooth transition for hover effects.

.shop-btn i: This targets an <i> element (likely used for an icon) inside the .shop-btn. It sets padding
and font size for the icon.

.shop-btn:hover: This defines styles that apply when the button is hovered over. It changes the
background color to a darker shade (#3a3a3a) and the text color to white (#ffffff), creating a visual
feedback effect.

Card Slider Section:

In this card slider section I have added the card slider for different products.

Here is the code for different card,

<li class="slide">: This is a list item with a class "slide," suggesting that it's part of a slideshow or
carousel for displaying products.
<div class="img">: Inside the list item, there's a <div> with a class "img" that likely contains an image
of the product.
<img src="...">: This <img> element displays an image of the product, and the src attribute specifies
the image's source URL.
<h2>RS-X Geek Sneakers</h2>: This is a heading (<h2>) displaying the product name, which appears
to be "RS-X Geek Sneakers."
<p>: Inside the paragraph element, there are two price values. The first price value appears with a
strikethrough style (line-through) and a price symbol (₹). The second price value appears with just the
price symbol (₹) followed by the actual price, which is ₹1999.
<button class="buy-btn">Buy Now</button>: This is a button with a class "buy-btn," typically used
for initiating a purchase of the product.

Then I have added sliding feature to move each product to left and right with arrow options.

Container: <div class="item-slider"> represents the container for the card slider.
Navigation Arrows: <i id="left" class="fa-solid fa-angle-left"></i> and <i id="right" class="fa-solid
fa-angle-right"></i> are navigation arrows used to scroll through the product cards.
Card Items: Each <li class="slide"> within the <ul class="carousel"> represents a product card. Each
card includes:
An image of the product (<img>).
The product name (<h2>).
Pricing information with a strikethrough original price and a discounted price (<p>).
A "Buy Now" button (<button class="buy-btn">).

const carousel = document.querySelector(".carousel");: This line selects the HTML element with the
class "carousel" and assigns it to the variable carousel. It likely represents the container that holds the
slides in the carousel.

const arrowBtns = document.querySelectorAll(".item-wrapper i");: This line selects all the <i>
elements inside elements with the class "item-wrapper." These <i> elements are likely the navigation
arrows for the carousel and are stored in the arrowBtns variable.

const firstSlideWidth = carousel.querySelector(".slide").offsetWidth;: This line calculates the width of

the first slide within the carousel and stores it in the firstSlideWidth variable. It's used to determine
how much to scroll when the navigation arrows are clicked.

arrowBtns.forEach(btn => { ... });: This code iterates through each of the navigation arrow buttons.

btn.addEventListener("click", () => { ... });: This attaches a click event listener to each navigation
arrow button.

carousel.scrollLeft += btn.id === "left" ? -firstSlideWidth : firstSlideWidth;: When a navigation arrow

button is clicked, this code adjusts the scrollLeft property of the carousel element to scroll it left or
right based on the button clicked. If the "left" arrow is clicked, it scrolls left by subtracting the
firstSlideWidth, and if the "right" arrow is clicked, it scrolls right by adding the firstSlideWidth.
 DAY – 6

Category Section:

In this section, I have describe the categories of products.

<section class="category-section">: This is a section of the webpage, possibly dedicated to showcasing

various product categories.

<h2>category</h2>: A heading indicating the section's title, which is "category."

<div class="category-wrapper">: A container for the category items.

<div class="category-list">: Each of these divs represents a category item. Each category item consists
of an image (likely representing the category), and a text label describing the category (e.g., "Men's,"
"Women," "Kids & Teen," "Sports," "Trending"). The background color of some items provides visual
differentiation between the categories.
Feature Section:

In this secti on, I have described the featured of products and consumers review written in cards.

Here I have created different cards for different feature.

<div class="feature-cards">: This is a container for the feature card.

<div class="feature-head">: This section contains the feature's title and an image. In this case, the
feature is "Comfort," and an image related to comfort is displayed.

<div class="feature-content">: This section provides additional information about the feature,
including a brief description of the comfort aspect. Additionally, it includes five star icons (represented
by font-awesome classes) that might indicate a rating or level of satisfaction related to the comfort
feature.

<section class="feature-wrapper">: This is a section of a webpage dedicated to displaying various

product features or aspects.

<div class="section-head">: This part contains a heading "All Products" and a paragraph with
additional information, likely introducing the features related to shoes.

<div class="feature-card-wrapper">: This is a container for the feature cards, which represent
individual product features.

Each "feature-card" (<div class="feature-cards">) consists of the following elements:

<div class="feature-head">: This part includes an image related to the feature (e.g., comfort, style,
durability) and a title (e.g., "Comfort," "Stylish," "Durability").

<div class="feature-content">: This section provides a brief description of the feature, and it includes
star icons that may indicate a rating or level of satisfaction related to that feature.
 DAY – 7:
Designing Footer:
On day 7, I design a productive footer. the footer contains essential links such as contact information,
privacy policy, and terms of service. The footer contributes to a seamless user experience by offering
quick navigation options, enhancing website accessibility, and providing users with additional
resources or legal information.

I created this footer in three different parts and all that parts are given below.

Footer Left:

Displays the company name "One X" in a prominent manner.

Provides the basic details to contact like phone number,email.

Footer Right:

Offers links to other sites affiliated with the company.

Includes different navigation links to visit different pages of website. Have give links like home,
search, help, order details, profile etc.
Mentions the product categories available, such as headphones, neckbands, and smart watches.

At the bottom I have showcases social media icons for Facebook, Instagram, LinkedIn, Twitter, and
GitHub.

There’s one form to join us through email address and get latest updates from our team.

Landing Page review:

 DAY – 8:

Start to develop Portfolio website:

On day 8, I have started to develop the portfolio website as the second task.

I was writing my code in VSCode here below the folder structure is given

I have created main folder CODSOFT and sub folders as task given.Then I have created one folder
named images to save all images used in web page and three main files for
HTML,CSS,JAVASCRIPT.for the imges I have created a img txt file.

then I started to code in index.html file,

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/
all.min.css">
</head>
Header Section Overview:

This HTML header is designed for the website, showcasing a minimalistic and functional navigation
bar:

Logo and Navigation Bar: The header includes a logo "Nipun," functioning as a link likely redirecting
users to the home page.

The navigation bar is structured with links to different sections of the webpage, including "Home,"
"About," "Skills," "Services," "Projects," and "Contact."

Navigation Menu:

The navigation links are encapsulated within a navigation container.

A navigation menu button is provided, indicating the presence of a mobile-friendly or collapsible

navigation menu.

Mobile Responsiveness:
The code suggests a design consideration for mobile devices, as indicated by the presence of a
navigation menu button.

Navigation Items:

Each navigation link directs users to a specific section on the webpage through anchor links (#home,
#about, etc.).

Responsive Design:

The inclusion of a "nav-close-btn" and "nav-menu-btn" implies a responsive design with the ability to
open and close the navigation menu.

For styling I used same properties that I used in the task 1 landing page
 DAY – 9:

Creating about section of Portfolio website:

On day 9, I have design about section in this section I added some information about me and also I
added a button to download my cv. I also added my experience and about my work.

This section of the webpage is dedicated to providing information about the website owner, likely a
full-stack developer named Nipun Prajapati. Here are the key components:

Section Title:

The section is titled "About Me" with a subheading "About" within a container styled for centering
content.

Content Structure:

The content is structured in a flex-centered layout for visual appeal and responsiveness.

Profile Image:

An image of Nipun Prajapati is included under the "about-img" class.

Introduction: Nipun 's identity is introduced with the heading "I'm Nipun Prajapati."

A professional title, "A well-experienced Full Stack Developer for any Web Development," follows,
highlighting key skills.

Personal Description:
A paragraph provides additional details about Nipun 's experience, skills, and a brief placeholder text
(Lorem Ipsum).

Professional Stats:

Three key statistics are presented in a list format, showcasing Nipun 's professional achievements,
including years of experience, the number of happy customers, and the count of successful projects.

Download CV Button:

A call-to-action button allows visitors to download Nipun 's CV with a relevant icon.

Styling:

The design is visually appealing, utilizing a clean layout and typography to convey professionalism.

This "About Me" section serves as an effective introduction, providing a snapshot of Nipun Prajapati's
expertise, professional accomplishments, and an option to download their CV.

For the styling I used below style properties.

 DAY – 10:

Creating skills section of Portfolio website:

On day 10, I created a page about my skills and projects I append my all the different skills related to
development and designing and I add some of my pleasant Project for the reference of my work I also
create nice animation and hover effect in this page.
This set of CSS styles focuses on the visual presentation of skills descriptions and content on the
webpage. Key features include:

Skills Description ( .skills-description p):

Defines the styling for paragraphs within the "skills-description" class.

Utilizes a font size of 20px, a font weight of 400 for normal text, a purple color (#6421a3), and centers
the text.

Adds a margin of 2rem at the top for spacing.

All Skills Container ( .all-skills):

Configures a container for skills, utilizing a flex display in the row direction.

Introduces a margin on the left side (3rem) to provide space between this container and other elements.

Skills Content Container (.skills-content):

Specifies the styling for the container holding the skills content.

Sets the width to 40% and introduces negative margins (2rem at the top and -4rem overall) for
positioning.

S2 Container (s2):

Defines a container with the class "s2."

Utilizes flex display in the row direction, with a width of 30vw (30% of the viewport width).
 DAY – 11:

Creating Contact me section of Portfolio website:

On day 11, I created a form to contact me and in that form I added some input text to get the
information about the person and in this section I attached some link of my official account like
linkedin ,github etc.

This section of the webpage is dedicated to facilitating user communication and inquiries. Key
components include:

Section Title:

The section is titled "Contact Me," signaling its purpose within a container.

Content Layout:

The content is organized into two main parts: "content-left" and "content-right."

Contact Information ( .content-left):

Provides introductory text inviting users to discuss their projects.Displays contact details including a
phone number and email address.

Includes social media icons with links to GitHub, Instagram, Twitter, and LinkedIn.

Project Discussion Text ( .content-right):Features a paragraph inviting users to discuss product design
work.
Contact Form ( .contact-form):

Implements a form with input fields for the user's name, contact number, email, subject, and a textarea
for the message.A button labeled "Send Message" with an icon allows users to submit the form.

Styling:The design is visually appealing, utilizing consistent typography and spacing for readability.

Icons from Font Awesome are incorporated to enhance visual appeal and provide a familiar interface.

This "Contact Me" section is designed to encourage user engagement, offering multiple communication
channels and a convenient form for reaching out.

For styling, same properties i used overhear

These styles focus on the left content section of the contact area, providing visual appeal and emphasis
on specific elements:

Heading 2 ( .content-left h2):

Sets the font size to 2.3em with a bold weight (800).Introduces a margin at the bottom (40px) for
spacing.

Heading 3 ( .content-left h3):

Configures the font size to 1.3em with a color of #6421a3.The font weight is set to 400 for a normal
style.Adds margins at the top (60px) and bottom (10px) for vertical spacing.Introduces a gap of 5px
between the icon and text.

Heading 3 Icon ( .content-left h3 i):Specifies the color of the icon to #530c74.Adds a right margin of
10px for spacing.

Heading 3 Span ( .content-left h3 span):Sets the color of the span text to #8e4eab.Introduces a left
margin (40px) and a significant bottom margin (80px) for spacing.

These styles contribute to a visually appealing and well-structured left content section in the contact
area. The use of color, font sizes, and margins enhances the overall design and readability of the
content.
 DAY – 12:

Creating footer of Portfolio website:

On day 12 , I created same kind of footer that I developed in my landing page. but in this footer I add
link of some other pages and my some official account to saw my work.

In my portfolio website I used some javascrip to do some events

This JavaScript code is responsible for managing modal interactions on the webpage. The key features
include:

Service Modals:

Utilizes the document.querySelectorAll method to select all elements with the class "service-modal."

Selects buttons with the class "learn-more-btn" and close buttons with the class "modal-close-btn."

Defines a function modal(modalClick) that adds the "active" class to the selected service modal, based
on the index provided.

Listens for click events on "learn-more-btns" and triggers the modal function to display the
corresponding service modal.

Listens for click events on "modal-close-btns" to remove the "active" class from all service modals,
effectively closing them.

Portfolio Modals:

Selects elements with the class "project-modal," "img-card," and "portfolio-close-btn."

Defines a function portfolioModal(modalClick) that adds the "active" class to the selected portfolio
modal, based on the index provided.
Listens for click events on "img-cards" and triggers the portfolioModal function to display the
corresponding portfolio modal.

Portfolio website:
 DAY – 13:

Creating a Calculator:

On day 13, I have written html and css code of calculator

HTML Structure for Calculator:

This HTML code represents the structure of a basic calculator.

Header (<h3>):

The <h3> element contains the text "Calculator," serving as a heading for the calculator section.

Input Field (<input>):

The <input> element with type="text" and name="text-dis" is the display field where the user input and
results will be shown. It has the id "inputbox" for potential JavaScript interaction.

Button Container (<div class="btn">):

There are two <div> elements with the class "btn," which likely contain the calculator buttons.

Buttons (<Button>):The buttons are represented by <Button> elements within the button container.
Four buttons are shown in the example: "AC," "DEL," "%," and "/."

Interpretation:

Header:

The heading "Calculator" provides a clear indication of the purpose of this section.

Input Field:

The input field is likely where users input numbers and where the calculator displays results.

Buttons:

Four buttons are present in the first button container. These likely represent basic calculator operations
such as clear (AC), delete (DEL), percentage (%), and division (/).

Here the main component of the css file of the calculator.

 DAY – 14:

Done javascript of Calculator:

On day 14, I written javascript of the calculator

Variables:

input: Represents the input field with the id "inputbox." Likely, it's the field where the calculator
display shows input and results.
Button: Represents a NodeList of all <Button> elements in the document.
String and Array Initialization:

string: Initializes an empty string to store the input values.

arr: Converts the NodeList of buttons into an array for easier iteration.
Event Listener for Buttons:

Iterates through each button in the array and adds an event listener for the 'click' event.
The event listener checks the inner HTML of the clicked button and performs actions accordingly.
Button Click Logic:
If the button is '=':
Evaluates the current string as an expression and assigns the result to the string.
Updates the input field with the result.
If the button is 'AC':
Clears the string, resetting it to an empty state.
Updates the input field.
If the button is 'DEL':
Removes the last character from the string.
Updates the input field.
For other buttons:
Appends the clicked button's inner HTML to the string.
Updates the input field.
Interpretation:

Dynamic Input Handling:

The code dynamically handles input and performs operations based on the clicked buttons.
Clearing and Deleting:

'AC' clears the input, and 'DEL' removes the last character.
Evaluation:

'=' triggers the evaluation of the mathematical expression.

String Concatenation:

Other buttons concatenate their respective values to the input string.

Calculator:
 DAY – 15:

Uploding the code online:

On the concluding day of my web development internship, I took a proactive step in showcasing the
culmination of my work by uploading the project code to my LinkedIn profile. This initiative not only
demonstrates my commitment to professional visibility but also allows me to share my development
journey with my network.

By making the code publicly accessible on LinkedIn, I aim to highlight the practical skills and
knowledge gained during the internship. This not only serves as a personal achievement but also
contributes to building a robust online presence and portfolio.

This action aligns with my commitment to continuous learning and professional growth, showcasing
my dedication to transparent and collaborative work practices within the field of web development.

The GitHub repository serves as a tangible artifact, showcasing the skills and proficiency I've acquired
throughout the internship. This not only contributes to a growing portfolio but also establishes a
foundation for continued learning and community engagement in the field of web development .