HINDU COLLEGE OF ENGINEERING

INTERNSHIP REPORT FILE ON

WEB- DEVELOPMENT
(Codsoft Company)

SUBMITTED TO:- SUBMITTED BY:-

Mr. Puneet Sharma Khusbu

(BTECH-CSE {5thsem})

22011001031
 DECLARATION
I am Khusbu, Roll no:-22011001031 from BTECH-CSE(3rd year) of
Hindu College Of Engineering, Sonipat.
I declares that the internship report entitled on
“WEB DEVELOPMENT” is an original work and the same work is
not submitted by any other student of any other institute or any
other ward.

PRESENTATION INCHARGE SIGNATURE OF ST.

COUNTER SIGNATURE
(Head of department)
 ACKNOWLEDGEMENT

I express my sincere gratitude to my institute teachers and internship

guide_________________ for his/her able guidance , continuous support
and cooperation throughout my project.

I would like to give special thanks to codsoft company for the guidance
and providing me the steps and demo projects of students which help me
to create my own projects.

I shall be failing to my works if i didn’t convey my thanks to my parents.

my parents really the backbone support during internship period because
it is a online platform internship.

A special word of thanks to all respondents for sharing this valuable time
with me.
 INDEX
S No. Topics Sign.
1. Introduction to web development
2. Basic concepts of web development
3. Forms of web development
4. Introduction of front-end developer
5. Front-end Projects
6. Basics of html
7. Overview of CSS
8. Overview of Javascript
9. Implementation of HTML,CSS and JS in
projects code
10. Conclusion
 1. Introduction to web development
What is web development?
Web development refers to the creating , building and
maintaining websites. It includes aspects such as web
design, web publishing, web programming and database
management. It is the creation of an application that work
over the internet i.e. websites.
The word web development is made up of two words:-
WEB:- It refer to websites, web pages or anything that work
over the internet.
DEVELOPMENT:- It refer to building the application using
various coding languages.
“Historical view of web development”
The idea of the internet had existed in some form atleast
half a century before it finally become a common
household utility in the 1990s.
In 1989,Tim Berner Lee outlined his concept of a computer
platform that could facilitate collaboration among
researchers who are based on different parts of the world.
This led to invention in of HTML in 1990.HTML became the
fundamental building block of world wide web.
Roles and responsibilities of web:-
Web application is a collaborative effort between front-end
and back-end developers, although some organizations
employ full-stack developers that can fit into either role.
Web application development is a collaborative effort
between front-end and back-end developers,although
some organizations employ full-stack developers that can
fit into either role.

There are two basic roles in web development :front-end

and back-end developer. The simplest web application
architecture is based on three-tier or three layer model:-
1. The Presentation layer is front-end layer of application.
Its main component is GUI.
2. The Business layer contains the application and business
logic that facilitate the functions and services.
3. The Data layer is a back-end system that houses any data
required for the application to deliver services and
functionality to users.
Key aspects of web development:-
• Client-side development:-This involves creating the UI
components of web application.
Server-side development:-This focuses on building the
back-end of the web applications.
• Database Management:-web application often require
databases to store and manage data.
• Frameworks and libraries:-Developers use frameworks
and libraries to streamline the development process.
• Front-end and Back-end communication:-API enable
data exchange and interaction between the client and
server.
 2.Basic concepts of web development

What is WWW?
WWW stands for world wide web. The world wide web is
the universe of network accessible information and human
knowledge. The world wide web is a way of exchange
information between computers on the internet , tying
them together into a vast collection of interactive
multimedia resources.

What is HTTP?
HTTP stands for Hypertext Transfer Protocol. This is the
protocol being used to transfer hypertext documents that
make the world wide web possible.
A standard web address such as Yahoo.com is called a URL
and here the prefix http indicates its protocol.
What is URL?
URL stands for uniform resource locator, and used to
specify addresses on the world wide web. A URL is the
fundamental network identification for any resource
connected to the web(e.g. hypertext pages, images, and
sound files).
A URL will have the following format:-
https://www.apple.com

The protocol specifies how the information is transferred

from a link. The protocol used for web resources is hypertext
transfer protocol(http) .Other protocols compatible with most
web browsers include FTP, telenet, newsgroup, etc
The protocol is followed by a colon, two slashes, and then
the domain name. The domain name is the computer on
which the resource is located.

What is website?
A website is a collection of various web pages written in
HTML markup languages. This is a location on the web
where people can find the data uploaded by the website
owner. There are millions of website available on the web.
Each page available on website is called web page and first
page of any website is called home page for that site.

What is web server?

Every website on a computer is known as web server. This
server is always connected to the internet. Every web server
that is connected to the internet is given a unique address
made up of a series of four numbers between 0 and 256
separated by periods. For example:- 68.178 or 68.122.
When we register a web address, also known as domain
name ,at that time we have to specify the IP address that will
host the site.

What is web browser ?

web browser is the software installed in our PC. To access
the web we need a web browser ,such as Microsoft internet
explorer or Mozilla Firefox.On the web, when we navigate
through pages of information that is commonly known as
browsing or surfing.
What is W3C?
W3C stands for world wide web consortium which is an
international consortium of companies involved with the internet
and web.
The W3C was founded in 1994 by Tim Berner Lee, the original
architect of world wide web. The organization purpose is to
develop open standards so that the web evolves in a single
direction rather than being splintered among competed factions.
The W3C is the chief standard body for HTTP and HTML.
 3.Forms of web development

There are three primary forms of web development:-

1. Front-end development
2. Back-end development
3. Full-stack development

1. Font-end development
It is the practice of creating a website frontend using markup
language like HTML,CSS, and javascript.
When designing the front end of a website ,the goal should be
ensure that all material can be read without any difficulty by the
target audience .Front end developers and web designers must
also be proficient at writing tidy and effective code in order to
create an interface that is both visually appealing and functional.

Responsibilities of front end developer:-

The main responsibility of front end developer is the User
Interface.
Client software
The basic language of Front end development are:-
1.HTML
2.CSS
3.Javascript

Popular Javascript and CSS framework and libraries:-

• Bootsrap
• W3.CSS
• HTML DOM
• JSON
• XML
• jQuery
• Angular
• React

Knowledge about how to handle APIs:

• REST
• GraphQL

Data formats:-
 • JSON
• XML
Tools:-d

• Git

Popular Stacks:-

• MEAN stack :-Javascript-MongoDB-Express-Angular js-Node.js

• MERN stack:-Javascript-MongoDB-Express-React.js-Node.js
• MEVN stack:-Javascript-MongoDB-Express-vue.js-Node.js

2.Back-end web development

Back end development or server side web development is the
process of creating a website infrastructure. Back-end developers
are responsible for the conceptual framework of the website and
the coding that supports it. The logic, databases, servers, and APIs
on the back-end are the primary areas of interest.
The back-end handles the heavy lifting in web projects, the
technologies that goes into making a site is often hidden from
view.
Therefore backend web development is an integral component of
every website. PHP is a popular server side scripting language that
may be used to create interactive web content and track user
sessions as well as administer databases and online store.
Back-end involves the logic, database and other operations that
are built behind the scenes to run the web servers efficiently.

Back-end development Roadmap:-

1. knowledge of web server
The web server runs websites, it stores, processes and
delievers web pages to users request. When the user make a
request by the web server, it is accepted by an HTTP server
which finds and send back the content to the browser
through HTTP.
2. Programming languages and their framework
JS+Node JS
With javascript being the most demanding programming
language, we can build an amazing website.it is used to build
interactive and dynamic websites.
3. Version control system(Git)
It helps in maintaining and tracking changes in code to be
used for future implementations. They are software tools
that help in managing changes in source code over time.
Git which is free and open source can be the best choice as a
version control system because of secure,feasible and easy to
edit features.
 4. Knowledge of web security
Various threats can attack a website which could result in its
poor performance. Web security refers to the protective
measures and protocols developers should follow to build an
optimize and effective website.

3.Full stack web development

A full stack web developer is a person who can develop both client
and server software.
In addition to html and css ,full stack developer also knows how
to:

• Program a browser
• Program a server
• Program a database
Advantages:-
The advantages of full stack web developer is
1. We can master all the techniques involved in development
project.
2. We can make a prototype very rapidly.
3. We can provide help to all the team members.
4. We can reduce the cost of the project.
5. We can reduce the time used for team communication,
6. We can switch between front-end and back-end
development.
Disadvantages:-
1. The solution chosen can be wrong for the project.
2. The solution chosen can be dependent on developer skills.
3. The solution can generate a key person risk
4. Being a full stack developer is increasingly complex.
 4.Introduction of front-end developer

A front-end developer is a type of software developer who

specializes in creating and designing the user interface(UI) and
user experience (UX) of websites and web applications.
The primary responsibility of front end developer is to ensure that
the visual and interactive aspects of a website or application are
user-friendly, pleasing and functionally efficient.

Front-end developers work with various technologies, tools, and

languages, including:
1. HTML(Hypertext Markup Language): The standard markup
language used to create the structure and layout of web
pages.
2. CSS(Cascading style sheets):A stylesheet language used to
control the presentation , formatting and appearance of web
pages, such as colors, fonts , and layout.
3. Javascript: A programming language that allow developers to
add interactivity, animations, and other dynamic elements to
website and web applications.
Front-end developers may also use libraries and frameworks such
as React, Angular, or Vue.js to streamline their work and create
more sophisticated and interactive UIs. Additionally, they often
collaborate with back-end developers, who are responsible for the
server side logic and data management, to ensure seamless
integeration between front-end and back-end components of web
application or website.

HTML, CSS & Javascript:

A front-end developer architects and develops website and
applications using web technologies(i.e. HTML, CSS, DOM and
Javascript) which run on the open platform or act as compilation
input for non-web platforms environment (i.e. React Native)

Typically, a person enters into the field of front end development

by learning to develop HTML, CSS and Javascript which commonly
runs in a web browser but also run in a headless browser , or as
compilation input for a native runtime environment .

Web Browsers
A web browser is software used to retrieve ,present, and traverse
information WWW.
Typically, browsers run on a desktop or laptop computer, tablet or
phone. A browser can be found on just about anything.
The most common web browser:-

• Chrome
• Safari
• Microsoft Edge
• Firefox

Headless Browsers
Headless Browser are a web browser without a graphical user
interface that can be controlled from a command line interface
programmatically for the purpose of web page automation.
The most common headless browsers are:-

• Headless Chromium
• Zombie
• Slimerjs

Webviews
Webviews are used by a native OS, in a native application, to run
web pages. Webview like an iframe or a single tab from a web
browser that is embedded in a native application running on a
device. (e.g iOS, android, windows)
Skills for web developer
A professional front-end developer will minimally have a work
knowledge of browser ,the internet and be skilled at using the
following web technologies:-
1. Hypertext markup language (HTML)
2. Cascading style sheets(CSS)
3. Uniform resource locators (URL)
4. Hypertext transfer protocol(HTTP)
5. Document object model(DOM)
6. Web APIs
7. Javascript programming language
8. Javascript object Notations
9. Web content Accessibility
 5.Front-end Projects

As a front-end developer ,the basic projects created by me during

internship period are :-

• Portfolio Project
• Quiz Maker
• Landing a website page
The project are created by using simple HTML,CSS and Javascript.

Portfolio Project

A strong web portfolio is crucial to a successful career as a web

developer, and understanding how to make a portfolio is an
essential part of this process.
Since a web developer main job is creating websites and
applications ,an online portfolio will help showcase our technical
skills and attract potential clients.

Things to consider while creating a Portfolio:-

• Choose reliable web hosting:- use high quality web hosting
to ensure your web portfolio runs smoothly and quickly.
 • Pick the right domain name:- The right domain name can
make can make your portfolio more professional and
memorable.
• List specialized skills:- Displaying our programming skills and
web development experience is key. It is also a good idea to
mention the education or web development certificates.
• Curate Projects:- Display only the best work . For an entry
level developer with little work experience list open source
projects
• Create an engaging design:- A well designed website can
increase credibility and brand recogination.
• Add social Proof:- Include testimonial from previous clients
to build trust and catch the attention of potential employers.
• Include a contact form:- since the purpose of our portfolio is
to get more clients place a contact form prominents in your
website.

A web developer portfolio is a website showcases a developer’s

past projects. The typical portfolio will contain :

• A gallery or list showcasing past projects

• A list or description of skills and services offered
• Any certifications, awards, testimonial, etc
In many cases, website itself serves as a test site to a developer
website design creativity and development skills. Web developer
portfolios can be as varied as web developers itself.
These are the viewpoint of projects created by me………..
 Quiz Maker App

Quiz Maker app is an application designed to present users with a

curated set of questions , each accompanied by a count down
timer , provide an interactive and time-bound quiz experience.
Additionally, the app keep track of users progress, creating an
immersive and dynamic quiz environment.

• First, create a web page basic structure using HTML tags like
buttons and heading for landing page, a button to start quiz
,and <h1> tag for create an heading .
Also, use dive and span for outer body structure along with
relevant class name.
• Style the web page using the class name and CSS properties
like font height for text margins, padding to add space, text-
align for alignment, and display type for display styling of
app.
• When the user start the quiz ,they will get multiple
questions, one after another. When the user validate the
answer ,they can move to the next question.
• At the end, when all questions are completed ,the user will
get a high score page where they can view their score.
 6.Basics of HTML

• HTML stands for Hypertext Markup Language

• HTML is the standard markup language for creating web
pages.
• HTML describes the structure of web page
• HTML consist of series of element
• HTMl tells the browser how to display the content
• HTML elements label pieces of content such as “this is a
heading”,etc

Example:-
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>My First heading</h1>
<p>My First Paragrfaph</p>
</body>
</html>
 • The <!DOCTYPE html> declaration defines that this document
is an HTML 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.
• The <body> element defines the document body and is a
container for all the visible contents, such as heading,
paragraph, images, hyperlinks, etc.
• The <h1> element defines a large heading.
• The <p> element defines a paragraph.

Since the time HTML was invented there are lots of HTML versions
in market, the various HTML versions are:-

HTML 1.0:- The first version of HTML was 1.0 which was the
barebone version of HTML language, and it was released in 1991.
HTML 2.0:- This was the next version which was released in 1995,
and it was standard language version for website design.HTML 2.0
was able to support extra features such as form-based file upload,
form element such as text box, option button, etc.
HTMl 3.2:-HTML 3.2 version was published by W3C in early
1997.The version was capable of creating tables and providing
support for extra option for form elements. It also support a web
page and complex mathematical equations.
Features of HTML
• It is very easy and simple language.
• It is very easy to make an effective presentation with HTML.
• It is a markup language, so it provide a flexible way to design
web pages along with the text.
• It facilitate programmers to add a link on the web pages, so it
enhances the interest of browsing of the user.
 7.Overview of CSS
CSS (cascading style sheets) is a language designed to simplify the
process of making web pages presentable. It allows us 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 using
rule sets. CSS styles are applied to HTML elements using selectors.
CSS is easy to learn and understand, but it provides powerful
control over the presentation of an HTML document.

Applications of CSS:-
• Saves Time:-write CSS once and reuse it across multiple web
pages.
• Easy maintenance:-Change the style globally with a single
modification.
• Search engine friendly:-Clean coding technique that
improves readability for search engines.
• Superior Styles:-Offers a wider array of attributes compared
to HTML.
• Offline Browsing:- CSS can store web applications locally
using offline cache, allowing offline viewing.
CSS syntax:-
CSS consist of style rules that are interpreted by the browser and
applied to the corresponding elements. A style rule set include a
selector and declaration block.

• Selector:- Targets specific HTML elements to apply styles.

• Declaration:-Combination of a property and its
corresponding value.

Types of CSS:-
There are three types of CSS which are given below:-
1. Inline CSS
2. Internal CSS
3. External CSS

1. Inline CSS
Inline CSS involves applying style directly to individual HTML
elements using the style attribute. This method allows for
specific styling of elements within the HTML document.
2. Internal CSS
Internal is defined within the HTML document <style>
element. It applies style to specified HTML elements, The CSS
rule set should be within the HTML elements file in the head
 section i.e. the CSS is embedded within the <style> tag inside
the head section of HTML file.
3. External CSS
External CSS contain separate CSS file that contain only style
properties with the help of tag attribute. CSS property is
written in a separate file with a .css extension and should be
linked to the HTML document using a link tag.

More about CSS

• Inline CSS has the higher priority

• As inline has higher priority , any style that are
defined in internal and external style sheets are
overridden by inline styles.
• Internal or embedded stand second in priority list
and overrides the styles in external style sheet.
• External style sheet have the least priority.
 8.Overview of Javascript

• Javascript is the world most popular programming language.

• Javascript is the programming language of web.
• Javascript is easy to learn.
• Javascript is one of the 3 languages all web developers must
learn.

Key features of javascript:-

1. Versatility:-Javascript can be used to develop
websites,games, mobile apps and more.
2. Client and server-side:- With framework like Node.js and
Express.js, Javascript is now used for developing server
side applications.
3. End to End solutions:- Javascript enable developers to
create complete solutions for various problems.
4. Constant Evolution:- Javascript continually evolves with
new features and standards.
5. Vibrant community:- A large community of users and
mentors actively contributes to Javascript growth

Variables in Javascript
Javascript variables are building blocks of any programming
language. In javascript, variables can be used to store reusable
values.
 List of variables:-
var Oldest knowledge to
declare var and var can be
uploaded.
let Block-scoped, can’t be
accessible out the
particular block and let
can be updated.

const Block-scoped, neither be

updated nor redclared.

Datatypes in Javascript:-
Datatypes in Javascript define the type of data stores in variable:-

• Numbers:- Represent both integer and floating point

numbers.
• String:- A string is a sequence of characters. In javascript,
strings can be enclosed within single or double quotes.
• Null:- This type has only one value: null. It is left intentionally
so that it shows something that does not exist.
• Undefined:- A variable that has not been assigned a value is
undefined.
• Symbol:- unlike other primitive datatypes, it does not have
any literal form. It is a built in object whose constructor
return a symbol that is unique.
Conditional statement of javascript :-

• If-:- executing code based on a condition.

• Else statement:- Alternative code execution when ‘if’
condition is not met.
• Else if statement:- Additional condition check ‘if’ and before
‘else’ statement.
• Switch statement:- Multicase conditional statement for
executing code.

Functions of Javascript
A function in javascript is a block of reusable code that perform
a specific task, can take inputs, and returns a result using the
return statement.

Looping in Javascript
Looping in programming languages is a feature that facilitates
the execution of a set of instructions/functions repeatedly
while some conditions evaluates to true.

• For-loop:- Executes code for a specific number of

iterations.
• While loop:- Represent a code while a condition is true.
• Do while loop:- Repeats code, ensuring atleast one
execution.
 Comments in Javascript
Javascript comments are used to explain the code to make it more
readable. It can be used to prevent the execution of section of
code if necessary.

• Single line comment:- single-line comment start with //

• Multi-line comment:- Multi-line comments start with /* and
end with */

Operators in Javascript
Javascript operators operate the operands, these are symbols to
manipulate a certain value or operand. Operators are used
performing specific mathematical and logical computations on
operands.

• Arithematic operators:- These are the operators that operate

upon the numerical values and return a numerical value.
• Assignment operators:- assignment operator is equal(=)
which assigns the value of right hand operand to its left hand
operands. That is if a=b assigns the value of b to a.
• Comparison operators:- It is used to perform logical
operations that determine the equality or difference
between the values.
• Logical operators:- It is used to make decisions based on
condition specified for the statement.
 9.Implementation of HTML,CSS and JS
projects.
• HTML

HTML is used to design the basic structure of the projects.

Firstly we enter the basic entities of all the required web
pages in html boiler code.

The boiler code is automatic generated function of VS code

editor.

We have option to use many other editor for coding but I use
VS code editor because it provide many inbuilt features and
make the coding compatible.

Boiler-code
Press ! symbol to get the emit abbreviation :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
We can add all the attributes in the body section of html to design
our project.

• Step-1 :- We have to create a folder in the VS code.

• Step-2:- Create three files in the folder which are named as
(a) Index.html
(b) Khushi.CSS
(c) Khushi.js
• Step-3:-we can do the structure coding of project in
index.html file.
For example:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MY PORTFOLIO</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="utility.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.6.0/css/all.min.css">
</head>
<body>
<header>
<div class="container">
<div class="khushi">
<img src="data:image/png;base64,
+tnTj4zdv6Cf5LJwXMu6yhzLasXYHlpY9Vw29BeoL23sUAGdpRIdnBlLQ0g9SBcYzOVoxV5+ =="
width="35px" height="35px">
</div>
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">CONTACTS</a></li>
</ul>
</div>
<div class="hero flex items-center justify-between">
<div class="left flex-1">
 <img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRYicWJhRmGC1cQukrhRinOXzIfSNmmNIe0BA&s"
width="400" height="500">
</div>
<div class="right flex-1">
<h6>KHUSHI GARG</h6>
<h1>I'M CREATIVE <SPAN>WEB DEVELOPER</SPAN></h1>
<P>A passionate full stack web developer having an experience of
building web and mobile application with javascript and some other cool libraries
and framework</P>
<div> <button class="btn">DOWNLOAD CV</button>
</div>
</div>
</div>
</div>

</header>
<section class="about">
<div class="vivek items-center justify-between">
<div class="flex-1">
<img src="c:\Users\HP\Downloads\screenshot-1725003690409.png">
</div>
<div class="flex-1">
<h1>About <span>Me</span></h1>
<h3>Hello! I'm Khushi</h3>
<p>I'm 3rd year student.I am pursuing B-Tech(CSE) from Hindu College
of Engineering,Sonepat.I am doing intership from well known and most adorable
Codsoft company. I have worked on various projects basis on basic html and css.
I am highly passionate and determined to become a full stack web
developer.I like to spend my most of the time in learning and practicing my skills.
I have achieved Diploma in C,C++ from Gurukul Technical with
80%.
My long term goal is to become a full stack web developer and
highly skilled person.
</p>
<div class="social">
<a href="#"><i class="fa-brands fa-square-twitter"></i></a>
<a href="#"><i class="fa-brands fa-square-whatsapp"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-sharp fa-light fa-globe-
pointer"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="services">
 <h1 class="section-heading"><span>OUR</span>SERVICES</h1>
<p>We provide high standard and most widely used website for your
business</p>
<div class="card-wrapper">
<div class="card">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRNqeHaqxtzqcAx4HEXzAOVvVr0cDcGJ0571g&s"
height="80px" width="80px">
<h2>Graphic Design</h2>
<p>There are many variations of passages of but the majority
have suffered alteration insome forms</p>
</div>
<div class="card">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRNqeHaqxtzqcAx4HEXzAOVvVr0cDcGJ0571g&s"
height="80px" width="80px">
<h2>Graphic Design</h2>
<p>There are many variations of passages of but the majority
have suffered alteration insome forms</p>
</div>
<div class="card">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRNqeHaqxtzqcAx4HEXzAOVvVr0cDcGJ0571g&s"
width="80px",height="80px">
<h2>Graphic Design</h2>
<p>There are many variations of passages of but the majority
have suffered alteration insome forms</p>
</div>
<div class="card">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRNqeHaqxtzqcAx4HEXzAOVvVr0cDcGJ0571g&s"
width="80px",height="80px">
<h2>Graphic Design</h2>
<p>There are many variations of passages of but the majority
have suffered alteration insome forms</p>
</div>
<div class="card">
<img src="https://encrypted-
tbn0.gstatic.com/imagesq=tbn:ANd9GcRNqeHaqxtzqcAx4HEXzAOVvVr0cDcGJ0571g&s"
width="80px" ,height="80px">
<h2>Graphic Design</h2>
<p>There are many variations of passages of but the majority
have suffered alteration insome forms</p>
</div>
<div class="card">
 <img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRNqeHaqxtzqcAx4HEXzAOVvVr0cDcGJ0571g&s"
width="80px",height="80px">
<h2>Graphic Design</h2>
<p>There are many variations of passages of but the majority
have suffered alteration insome forms</p>
</div>
</div>

</section>
<section class="freelancer">
<h1>I am available for freelance</h1>
<p>I try to provide high standard clean website for your business
solutions</p>
<button class="btn">DOWNLOAD CV</button>
</section>
</body>
</html>

Output:-

• HOME
• SERVICES
• ABOUT
• PRODUCTS
• CONTACTS
KHUSHI GARG

I'M CREATIVE WEB DEVELOPER

A passionate full stack web developer having an experience of building web and mobile application
with javascript and some other cool libraries and framework

DOWNLOAD CV

CSS
CSS is used for design the code and express in a interactive way to
the user. It deals with font, background , styling of buttons, etc.
Firstly, we have to link our html file with CSS file by using the
command
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="utility.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/lib

Code of CSS in projects:-

@import 'utility.css'
*{
padding:0;
margin:0;
box-sizing: border-box;
-webkit-font-smotthing:antialiased;
}
header{
background-color: #161616;
height:800px;
clip-path: polygon(0 0,100% 0,100% 100%,70% 90%,0 100%);
}
ul{
margin:0;
padding:0;
list-style: none;
height: 36px;
line-height: 36px;
background-color: #161616;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
li{
float:left;
border:1px solid #3DCFD3;
}
a{
display:block;
padding:0 28px;
color:white;
text-decoration: none;

}
a:hover{
background-color: orange;
}
.container{
display:flex;
flex-direction:row;
justify-content: center;
}
.khushi{
border:1px solid #3DCFD3;
height:36px;
}
.hero{
display:flex;
flex-direction: row;
justify-content: center;
}
.hero .right{
color:white;
line-height: 0.1rem;
}
.hero .right h6{
font-size:1.6rem;
color:#3DCFD3;
padding-top: 0;
margin-bottom: 0.1rem;
line-height:5px;
word-spacing: 0.5rem;
}
.hero .right h1{
font-size: 4rem;
font-weight: 100;
line-height: 1.2;
margin-bottom:2rem;
}
.hero .right h1 span{
color:#3DCFD3;
}
.hero .right p{
line-height:1.9;
margin-bottom: 2rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-right: 2rem;
}