A Lab Project Report On

WEB DEVELOPMENT
Is Submitted to Joginpally BR Engineering College (UGC Autonomous) , Hyderabad.
In partial fulfillment of the requirements for the award of the degree of

BACHELOR OF TECHNOLOGY

IN
INFORMATION TECHNOLOGY

SUBMITTED BY

A.Varun Reddy (23J21A1202)

K.Chiranjeevi (23J21A1217)

M.Prashanth (23J21A1223)
Under the guidance of

Mr. K.VENKAIAH

Assistant Professor

DEPARTMENT OF INFORMATION TECHNOLOGY

JOGINPALLY B.R. ENGINEERING COLLEGE

(UGC Autonomous)
Accredited by NAAC with A+ Grade, Recognized under Sec. 2(f) of UGC Act. 1956
Approved by AICTE and Affiliated to Jawaharlal Nehru Technological University, Hyderabad Bhaskar
Nagar, Yenkapally, Moinabad, RangaReddy, Hyderabad, Telangana- 500075.
2024-2025
 JOGINPALLY B.R ENGINEERING COLLEGE
(UGC Autonomous)
Accredited by NAAC with A+ Grade, Recognized under Sec. 2(f) of UGC Act. 1956
Approved by AICTE and Affiliated to Jawaharlal Nehru Technological University, Hyderabad
Bhaskar Nagar, Yenkapally, Moinabad, RangaReddy, Hyderabad, Telangana- 500075.

CERTIFICATE

This is to certify that the Lab Project entitled “WEB DEVELOPMENT ” is the bonafide work
carried out by A.Varun Reddy (23J21A1202), K.Chiranjeevi (23J21A1217), M.prashanth
(23J21A1223) of II B.Tech IT, under our guidance and supervision. The Lab Project Report is
submitted to Joginpally BR Engineering College (UGC Autonomous) Hyderabad in partial
fulfilment of requirements of the award of the degree of Bachelor of Technology in Information
Technology during the academic year 2024-2025.

INTERNAL GUIDE HEAD OF THE DEPARTMENT

Mr. K. VENKAIAH Mr.T.SHESHAGIRI
Assistant Professor Associate Professor

Principal
 ACKNOWLEDGEMENT

We would like to take this this opportunity to place it on the record that this lab progect would
never have taken shape but for the cooperation extended to us by certain individuals. Though it
is not possible to name all of them,it would be un pardonable on our part if we do not mention
some of very important persond

We express our hearted thank you to our principal Dr. B Venkata Ramana Reddy , principal of
JOGINPALLY BR ENGINEERING COLLEGE for giving us spontaneous encourage for
completing the Lab project.

We are really thank you to our HOD Mr. T.Sheshagiri for his time to time, much needed
valuable guidance throughout our Lab project.

We would like to express our sincere gratitude to our LAB PROJECT INTERNAL GUIDE
Mr.K.Venkaiah who has guided and supported us through every stage in the Lab Project.

A.Varun Reddy (23J21A1202)

K.Chiranjeevi (23J21A1217)
M.Prashanth (23J21A1223)
 DECLARATION

We hereby declare that our Lab Project entitled “WEB DEVELOPMENT” is the work done
during the academic year 2024-2025, II year - I-Sem and our Lab Project is submitted in
partial fulfilment of the requirements for the award of B.Tech degree in Information
Technology from JOGINPALLY B.R. ENGINEERING COLLEGE (UGC Autonomous),
Hyderabad.

A.Varun Reddy
(23J21A1202)
K.Chiranjeevi
(23J21A1217)
M.Prashanth
(23J21A1223)
 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 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 w
e 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 comp
etitive physical activity or games which,[1] through casual or organized parti
cipation, at least in part aim to use, maintain or improve physical ability an
d skills while providing enjoyment to participants, and in some cases, enterta
inment for spectators.[2] Sports can bring positive results to one's physical
health. Hundreds of sports exist, from those between single contestants, throu
gh to those with hundreds of simultaneous participants, either in teams or com
peting as individuals. In certain sports such as racing, many contestants may
compete, simultaneously or consecutively, with one winner; in others, the cont
est (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 pro
vide tie-breaking methods to ensure one winner and one loser. A number of cont
ests may be arranged in a tournament producing a champion. Many sports leagues
make an annual champion by arranging games in a regular sports season, followe
d in some cases by playoffs.
Sport is generally recognised as
system of activities which are based in physical athleticism or physical dexte
rity, with the largest major competitions such as the Olympic Games admitting
only sports meeting this definition,[3] and other organisations such as the Co
uncil of Europe using definitions precluding activities without a physical ele
ment from classification as sports.[2] However, a number of competitive, but n
on-physical, activities claim recognition as mind sports. The International Ol
ympic Committee (through ARISF) recognises both chess and bridge as bona fide
sports, and SportAccord, the international sports federation association, reco
gnises five non-physical sports: bridge, chess, draughts (checkers), Go and xi
angqi,[4][5] and limits the number of mind games which can be admitted as spor
ts.[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 electro
nic sports, e-sports, or eSports) is a form of sport competition using video g
ames.[1] Esports often takes the form of organized, multiplayer video game com
petitions, particularly between professional 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, when participation b
y professional gamers and spectatorship in these events through live streaming
saw a large surge in popularity.[2][3] By the 2010s, esports was a significant
factor in the video game industry, with many game developers actively designin
g and providing funding for tournaments and other events.
The most common video game gen
res associated with esports are multiplayer online battle arena (MOBA), first-
person shooter (FPS), fighting, card, battle royale and real-time strategy (RT
S) games. Popular 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 fighting game-specific Evolution Championship Series (EVO)
and Intel Extreme Masters are among the most popular in esports. Many other co
mpetitions use a series of league play with sponsored teams, such as the Overw
atch League. Although the legitimacy of esports as a true sporting competition
remains in question, they have been featured alongside traditional sports in s
ome multinational events in Asia, with the International Olympic Committee als
o 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 sugge
st sport in China as early as 2000 BC.[15] Gymnastics appears to have been pop
ular in China's ancient past. Monuments to the Pharaohs indicate that a number
of sports, including swimming and fishing, were well-developed and regulated s
everal thousands of years ago in ancient Egypt.[16] Other Egyptian sports incl
uded javelin throwing, high jump, and wrestling. Ancient Persian sports such a
s the traditional Iranian martial art of Zourkhaneh had a close connection to
warfare skills.[17] Among other sports that originated in ancient Persia are p
olo and jousting.
Motorised sports have appeared
since 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 al
ready established by the time of Ancient Greece and the military culture and t
he development of sport in Greece influenced one another considerably. Sport b
ecame such a prominent part of their culture that the Greeks created the Olymp
ic 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" pla
ceholder="Enter Your Name" >
<input class="form-input" type="text" name="phone" id="phone" p
laceholder="Enter Your Phone" >
<input class="form-input" type="email" name="email" id="email"
placeholder="Enter Your Email" >
<textarea class="form-input" name="text" id="text" cols="30"
rows="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;
padding: 5px 3px;
width: 100%;
font-size: 19px;
border: 2px solids grey;
border-radius: 6px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
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 Mr. K.Venkaiah our respective coordinate and our Guider of
this project for helping us in this project