A

MINI PROJECT REPORT

ON
“MAKING A WEBSITE (WEB DEVELOPMENT)”
A Synopsis Submitted in Partial Fulfilment of the
Requirements for the degree of
BACHELOR IN TECHNOLOGY
IN
ELECTRONICS AND COMMUNICATION ENGINEERING

Submitted by: - Submitted To: -

Aniket Singh (1716531003) Mr. Prabhat Gupta
Abhay Singh (1716531002) Assistant Professor
Mayank Harchand (1616531008) Electronics & Communication
Engineering

DEPARTMENT OF ELECTRONICS & COMMUNICATION ENGINEERING

KANPUR INSTITUTE OF TECHNOLOGY, KANPUR
INDIA
JANUARY-2021
 ACKNOWLEDGEMENT

It gives us immense pleasure to present the report of the undertaken during the Bachelor of Technology final
year. We would like to express our deep and sincere gratitude to our project guide Ms. Pooja Ramesh
Chandra for providing us excellence guidance, encouragement and inspiration throughout the mini project
work. Her logical thinking and understanding in “WEB DEVELOPMENT” have greatly influenced us in
our project work. It was a great experience working with her because of her jolly nature and friendly nature.
We are highly thankful to her for her immense support in all stages in our stay in KIT Kanpur, giving us full
freedom to carry out our work in our own way.
We would like to give special thanks to DR. SWETA TRIPATHI, Head of Department Electronics &
Communication Engineering for her immense support in all kind of work and all the support we needed in
KIT Kanpur.

Name: - ANIKET SINGH

Roll No.: - 1716531003
Signature: -
Date: -

Name: - ABHAY SINGH

Roll No.: - 1716531002
Signature: -
Date: -

Name: - MAYANK HARCHAND

Roll No.: -1616531008
Signature: -
Date: -
 DECLARATION

We hereby declare that this is our own work and that to the best of our knowledge and belief. It
contains no material previously published or written by another person nor material which to a
substantial extent has been accepted for the award of degree or other institute higher learning
except where the acknowledgement has been made in the text.

Name: - ANIKET SINGH

Roll No.: - 1716531003
Signature: -
Date: -

Name: - ABHAY SINGH

Roll No.: - 1716531002
Signature: -
Date: -

Name: - MAYANK HARCHAND

Roll No.: -1616531008
Signature: -
Date: -
 ABSTRACT

In this project our aim is to make a website and our website majorly focus on sports related content, so it’s a
sport website which will carry all the information related to every sport or game in the upcoming future.
And apart from making a website we will also learn web development because it’s highly demand in website
field.
However, for our mini project we made a dummy website by using the help of HTML AND CSS
LANGUAGUE to demonstrate you how HTML and CSS actually works.
 TABLE OF CONTENT

CONTENT PAGE NO.

INTRODUCTION ……………………………………………………………….6

BUILDING OF OUR WEBSITE………………………………………………...6

INTRO ABOUT WEBSITE……………………………………………………...6

HTML LANGUAGE……………………………………………………………..7

CSS LANGUAGE………………………………………………………………..8

JAVASCRIPT LANGUAGE……………………………………………………..9

MAKING OF WEBSITE USING HTML AND CSS……………………………11

HTML CODE…………………………………………………………………….11

CSS CODE……………………………………………………………………….14

OUTPUT…………………………………………………………………………18

REFRENCE OF MAKING THE PROJECT…………………………………….20

CONCLUSION…………………………………………………………………..20
 INTRODUCTION
This project is made with the purpose of making a sport related website and to learn web development by
doing practical work in the website as well as this minor project is an essential part of our major project so
the most important part is to make this website commercially effective website.

BUILDING OF OUR WEBSITE

The making our website needs some of the elementary things as given below: -
HTML LANGUAGE
CSS LANGUAG
VISUAL STUDIO CODE TO MAKE OUR WEBSITE
GOOGLE CHROME TO RUN OUR WEBSITE

INTRO ABOUT WEBSITE

A website is a set of related web pages typically served from a single web domain.
A website is a collection of Web pages, images, videos or other digital assets that is hosted on one or more
webservers, usually accessible via the internet.
The pages of a website can usually be accessed from a common root URL called the homepage and usually
reside on the same physical server.
The URLs of the pages organize them into a hierarchy, although the hyperlinks between them control how
the reader perceives the overall structure and how the traffic flows between the different parts of the site.
Web Domain: - Simply put, a domain name (or just "domain") is the name of a website. It's what comes
after "@" in an email address, or after "www." in a web address. If someone asks how to find you online,
what you tell them is usually your domain name.
Examples of domain names are:
google.com
wikipedia.org
youtube.com
URL: - A URL (Universal Resource Locator) is a complete web address used to find a particular web page.
While the domain is the name of the website, a URL will lead to any one of the pages within the website.
Every URL contains a domain name, as well as other components needed to locate the specific page or piece
of content.
Web development is the building and maintenance of websites; it's the work that happens behind the scenes
to make a website look great, work fast and perform well with a seamless user experience
Web design refers to the design of websites that are displayed on the internet. It usually refers to the user
experience aspects of website development rather than software development.
Three layers of web design: - HTML (Hyper Text Markup Language)
CSS (Cascading Style sheet)
JAVASCRIPT

HTML LANGUAGE

Hypertext Markup Language (HTML)is the set of

markup
symbols or
codes
inserted
into a
file

intended for display on the Internet. The markup tells web browsers how to display a web page's words and
images.
WITH HTML WITHOUT HTML

Without any markup to give your page content structure, the browser renders
unformatted and disorganisation text
HTML provides the structure to the website. HTML tags give structure and meaning to the content.
Some of the HTML tags: -

<p></p> - to organize text into paragraphs

<table></table> - to display table

<form></form> - to define form for user input

<img></img> - to add image

CSS LANGUAGE
CSS stands for Cascading Style Sheets. CSS describes how
HTML elements are to be displayed on screen.
Some of the CSS demo are given below: -

p{
color: red;
}

#title {
font-style: italic;
border: 1px dotted blue;
}

.title {
font-weight: bold;
background: yellow;
}

Things we can change with CSS: -

Colours
Font
Font size
Backgrounds
Spacing sizes
Borders
Positions (layout)

Things we can’t change with CSS: -

Content
Markup
 JAVASCRIPT LANGUAGE

JavaScript is a text-based programming

language used both on the client-side
and server-side that allows you to make
web pages interactive. Where HTML
and CSS are languages that give
structure and style to web pages,
JavaScript gives web pages interactive
elements that engage a user.
Given below are the things we can do with JavaScript: -

Validate values entered in the form fields.

 Load information automatically when its needed

MAKING OF WEBSITE USING HTML AND CSS

From this slide we are going to make a website using HTML and CSS to give you the demo how to make a
website using HTML and CSS
The things which are going to use in this miniproject are given below: -
HTML Language
CSS Language
Visual studio (platform where we write our codes)
Google chrome

HTML CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
 <title> Sports Website </title>
</head>
<body>
<nav class="navbar background">
<ul class="nav-list">
<div class="logo"><img src="img/2.jpg" alt="Logo"></div>
<li><a href="#home">Home</a></li>
<li><a href="#home">About</a></li>
<li><a href="#home">Services</a></li>
<li><a href="#home">Contact Us</a></li>
</ul>
<div class="rightNav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">search</button>
</div>
</nav>
<section class="background firstsection">
<div class="box-main">
<div class="firstHalf">
<p class="text-big">The Sportic content is here</p>
<p class="text-small">Welcome to the world of sports where we are going
to cover every king of sports and games</p>
<div class="buttons">
<button class="btn">Subscribe</button>
<button class="btn">Watch</button>
</div>
</div>

<div class="secondHalf">
<img src="img/2.jpg" alt="Logo Image">
</div>
</div>
</section>
<section class="section">
<div class="paras">
<p class="sectiontag text-big">SPORT</p>
<p class="sectionSubtag text-small">Sport includes all forms of competitive phys
ical activity or games which,[1] through casual or organized participation, at least in pa
rt aim to use, maintain or improve physical ability and skills while providing enjoyment t
o participants, and in some cases, entertainment for spectators.[2] Sports can bring posit
ive results to one's physical health. Hundreds of sports exist, from those between single
contestants, through to those with hundreds of simultaneous participants, either in teams
or competing as individuals. In certain sports such as racing, many contestants may compet
e, simultaneously or consecutively, with one winner; in others, the contest (a match) is b
etween two sides, each attempting to exceed the other. Some sports allow a "tie" or "draw"
, in which there is no single winner; others provide tie-breaking methods to ensure one wi
nner and one loser. A number of contests may be arranged in a tournament producing a champ
ion. Many sports leagues make an annual champion by arranging games in a regular sports se
ason, followed in some cases by playoffs.
Sport is generally recognised as system of a
ctivities which are based in physical athleticism or physical dexterity, with the largest
major competitions such as the Olympic Games admitting only sports meeting this definition
,[3] and other organisations such as the Council of Europe using definitions precluding ac
tivities without a physical element from classification as sports.[2] However, a number of
competitive, but non-physical, activities claim recognition as mind sports. The Internatio
nal Olympic Committee (through ARISF) recognises both chess and bridge as bona fide sports
, and SportAccord, the international sports federation association, recognises five non-
physical sports: bridge, chess, draughts (checkers), Go and xiangqi,[4][5] and limits the
number of mind games which can be admitted as sports.[1]</p>
</div>
<div class="thumbnail">
<img src="img/3.jpg" alt="Logo Image" class="imgFluid">
</div>
</section>
<section class="section section-left">
<div class="paras">
<p class="sectiontag text-big">ELECTRONIC SPORT</p>
<p class="sectionSubtag text-small">Esports (also known as electronic sports,
e-sports, or eSports) is a form of sport competition using video games.[1] Esports often t
akes the form of organized, multiplayer video game competitions, particularly between prof
essional players, individually or as teams. Although organized competitions have long been
a part of video game culture, these were largely between amateurs until the late 2000s, wh
en participation by professional gamers and spectatorship in these events through live str
eaming saw a large surge in popularity.[2][3] By the 2010s, esports was a significant fact
or in the video game industry, with many game developers actively designing and providing
funding for tournaments and other events.
The most common video game genres associat
ed with esports are multiplayer online battle arena (MOBA), first-person shooter (FPS), fi
ghting, card, battle royale and real-time strategy (RTS) games. Popular esport franchises
include League of Legends, Dota, Counter-Strike, Overwatch, Street Fighter, Super Smash Br
os. and StarCraft, among many others. Tournaments such as the League of Legends World Cham
pionship, Dota 2's International, the fighting game-specific Evolution Championship Series
(EVO) and Intel Extreme Masters are among the most popular in esports. Many other competit
ions use a series of league play with sponsored teams, such as the Overwatch League. Altho
ugh the legitimacy of esports as a true sporting competition remains in question, they hav
e been featured alongside traditional sports in some multinational events in Asia, with th
e International Olympic Committee also having discussed their inclusion into future Olympi
c events.</p>
</div>
<div class="thumbnail">
<img src="img/4.jpg" alt="Logo Image" class="imgFluid">
</div>
</section>
<section class="section">
<div class="paras">
<p class="sectiontag text-big">Sport History</p>
<p class="sectionSubtag text-small">Artifacts and structures suggest sport in
China as early as 2000 BC.[15] Gymnastics appears to have been popular in China's ancient
past. Monuments to the Pharaohs indicate that a number of sports, including swimming and f
ishing, were well-developed and regulated several thousands of years ago in ancient Egypt.
[16] Other Egyptian sports included javelin throwing, high jump, and wrestling. Ancient Pe
rsian sports such as the traditional Iranian martial art of Zourkhaneh had a close connect
ion to warfare skills.[17] Among other sports that originated in ancient Persia are polo a
nd jousting.
Motorised sports have appeared since the a
dvent of the modern age.Swimmers perform squats as warm-up exercise prior to entering the
pool in a U.S. military base, 2011
 A wide range of sports were already establ
ished by the time of Ancient Greece and the military culture and the development of sport
in Greece influenced one another considerably. Sport became such a prominent part of their
culture that the Greeks created the Olympic Games, which in ancient times were held every
four years in a small village in the Peloponnesus called Olympia.[18]</p>
</div>
<div class="thumbnail">
<img src="img/5.jpg" alt="Logo Image" class="imgFluid">
</div>
</section>
<section class="contact">
<h2 class="text-center"> Contact Us</h2>
<div class="form" >
<input class="form-input" type="text" name="name" id="name" placeholde
r="Enter Your Name" >
<input class="form-input" type="text" name="phone" id="phone" placeholde
r="Enter Your Phone" >
<input class="form-input" type="email" name="email" id="email" placeholde
r="Enter Your Email" >
<textarea class="form-input" name="text" id="text" cols="30" rows="10" pl
aceholder="Elaborate your concern"></textarea>
<button class="btn btn-dark">Submit</button>
</div>
</section>
</body>
</html>

CSS CODE

@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
*{
margin: 0;
padding: 0;
}

.logo{
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img{
width: 33%;
border: 3px solid black;
border-radius: 50px;
}
.navbar{
display: flex;
align-items: center;
justify-content: center;
position: sticky;
 top: 0;
cursor: pointer;
}

.nav-list{
width: 70%;
display: flex;
align-items: center;
}

.nav-list li{
list-style: none;
padding: 26px 30px;
}

.nav-list li a{
text-decoration: none;
color: white;
font-size: 20px;
font-family: 'Ubuntu', sans-serif;

.nav-list li a:hover{
text-decoration: none;
color: blueviolet;
}

.rightNav{

width: 30%;
text-align: right;
padding: 0 23px;
}

#search{
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}

.background{
background: rgba(0, 0, 0, 0.7) url('../img/1st.png');
background-size: cover;
background-blend-mode: darken;
}
.firstsection{
height: 100vh;
}
.box-main{
display: flex;
justify-content: center;
align-items: center;
 color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 50%;
margin: auto;
height: 80%;

.firstHalf{
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}

.secondHalf img{
width: 70%;
border: 4px solid black;
border-radius: 150px;
display: block;
margin: auto;
}

.text-big{
font-size: 41px;

.text-small{
font-size: 18px;
}

.btn{
padding: 8px 20px;
margin: 8px 3px;
border: 2px solid black;
border-radius: 8px;
background: none;
color: white;
cursor: pointer ;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
}

.btn-sm{
padding: 8px 10px;
vertical-align: middle;
font-size: 16px;
}

.btn-dark{
color: black;
border: 2px solid grey;
}
.section{
height: 550px;
display: flex;
align-items: center;
justify-content: space-evenly;
max-width: 80%;
margin: auto;
font-family: 'Ubuntu', sans-serif;
}

.section-left{
flex-direction: row-reverse;
}

.paras{
padding:0px 65px ;
}
.sectiontag{
padding: 16px 0;
}
.sectionSubtag{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.thumbnail img{
width: 250px;
border: 2px solid black;
border-radius: 26px;
margin-top: 19px ;

.contact{

height: 533px;

.text-center{
text-align: center;
padding-top: 30px;
font-family: 'Ubuntu', sans-serif;
font-size: 35px;
}

.form{
max-width: 1200px;
margin: 25px auto;
}

.form-input{
margin: 26px 0;
padding: 5px 3px;
width: 100%;
font-size: 19px;
border: 2px solids grey;

OUTPUT
 Reference of making this project

The reference of making this project is given below: -

Internet
HTML5 and CSS3 All-in-One For Dummies by Andy Harris
Our respective professors
And last but not least our batch colleagues.

Conclusion

The conclusion of this mini project is to learn about web development and we did learn that from making a
static website by using HTML and CSS language.
However as per of our major project, our main website is personal, dynamic and in future will be
commercial which we also made in these times will be going to merge with our major project and in that
project web development, software development and many other things we have to do and for that project
this project was necessary.
In the end we will thanks to our respective Dr. Shweta Tripathi mam, our respective coordinate sir Mr.
Prabhat Gupta sir and our Guider of this project Ms. Pooja Ramesh Chandra for helping us in this project