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 ar
e 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 competit
ive physical activity or games which,[1] through casual or organized participation
, at least in part aim to use, maintain or improve physical ability and skills whi
le providing enjoyment to participants, and in some cases, entertainment for spect
ators.[2] Sports can bring positive results to one's physical health. Hundreds of
sports exist, from those between single contestants, through to those with hundred
s of simultaneous participants, either in teams or competing as individuals. In ce
rtain sports such as racing, many contestants may compete, simultaneously or conse
cutively, with one winner; in others, the contest (a match) is between 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 winne
r and one loser. A number of contests may be arranged in a tournament producing a
champion. Many sports leagues make an annual champion by arranging games in a regu
lar sports season, followed in some cases by playoffs.
Sport is generally recognised as sys
tem of activities which are based in physical athleticism or physical dexterity, w
ith 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 activities without a physical element from classifica
tion as sports.[2] However, a number of competitive, but non-physical, activities
claim recognition as mind sports. The International Olympic Committee (through ARI
SF) recognises both chess and bridge as bona fide sports, and SportAccord, the int
ernational sports federation association, recognises five non-physical sports: bri
dge, chess, draughts (checkers), Go and xiangqi,[4][5] and limits the number of mi
nd 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 takes the form of organized, multiplayer video game competitions, pa
rticularly between professional players, individually or as teams. Although organi
zed competitions have long been a part of video game culture, these were largely b
etween amateurs until the late 2000s, when participation by professional gamers an
d spectatorship in these events through live streaming saw a large surge in popula
rity.[2][3] By the 2010s, esports was a significant factor in the video game indus
try, with many game developers actively designing and providing funding for tourna
ments and other events.
The most common video game genres
associated with esports are multiplayer online battle arena (MOBA), first-person s
hooter (FPS), fighting, card, battle royale and real-time strategy (RTS) games. Po
pular esport franchises include League of Legends, Dota, Counter-Strike, Overwatch
, Street Fighter, Super Smash Bros. and StarCraft, among many others. Tournaments
such as the League of Legends World Championship, Dota 2's International, the figh
ting game-specific Evolution Championship Series (EVO) and Intel Extreme Masters a
re among the most popular in esports. Many other competitions use a series of leag
ue play with sponsored teams, such as the Overwatch League. Although the legitimac
y of esports as a true sporting competition remains in question, they have been fe
atured alongside traditional sports in some multinational events in Asia, with the
International Olympic Committee also having discussed their inclusion into future
Olympic 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 s
port 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 fishing, were well-developed and regulated several thousand
s of years ago in ancient Egypt.[16] Other Egyptian sports included javelin throwi
ng, high jump, and wrestling. Ancient Persian sports such as the traditional Irani
an martial art of Zourkhaneh had a close connection to warfare skills.[17] Among o
ther sports that originated in ancient Persia are polo and jousting.
Motorised sports have appeared sin
ce the advent 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 alread
y established by the time of Ancient Greece and the military culture and the devel
opment 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 i
n 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" placeho
lder="Enter Your Name" >
<input class="form-input" type="text" name="phone" id="phone" place
holder="Enter Your Phone" >
<input class="form-input" type="email" name="email" id="email" plac
eholder="Enter Your Email" >
<textarea class="form-input" name="text" id="text" cols="30" row
s="10" placeholder="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;

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