PROJECT REPORT

ON

WEBSITE DEVELOPMENT

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE OF ENGINEERING

OF IKG PUNJAB TECHNICAL UNIVERSITY, JALANDHAR

SUBMITTED TO SUBMITTED BY

MRS. AMANDEEP KAUR Gaurav singh rawat

2002429

DEPARTMENT OF CSE, DEPARTMENT OF CSE,

CEC LANDRAN CEC LANDRAN
 (I) INTRODUCTION

1.INTRODUCTION OF THE PROJECT:

Web development is the process of building websites and web pages using the different technologies and
tools that happen behind the scenes to make the website look great.

Web development is the work involved in developing a website for the Internet (World Wide Web) or
an intranet (a private network). Web development can range from developing a simple single static
page of plain text to complex web applications, electronic businesses, and social network services. A more
comprehensive list of tasks to which Web development commonly refers, may include Web
engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web
server and network security configuration, and e-commerce development.

There are different technologies and tech stacks on which web development is possible some of the well-
known are MEAN and MERN stack.

For web development, one should be familiar with HTML,CSS, JavaScript and some backend and front-end
frameworks like node.JS and React.

Figure 1:
WEV DEVELOPMENT:

Web development refers to the building, creating, and maintaining of websites. It includes aspects such as
web design, web publishing, web programming, and database management. It is the creation of an
application that works over the internet i.e. websites.
The word Web Development is made up of two words, that is:

Web: It refers to websites, web pages or anything that works over the internet.
Development: Building the application from scratch.

Web Development can be classified into two ways:

 Frontend Development
 Backend Development

The frontend and backend have been explained briefly in the next few pages including the tables shown in
figure 2 and figure 3 which represent the roadmaps to the frontend and backend respectively.
FRONTEND DEVELOPMENT:

Frontend Development: The part of a website that the user interacts directly is termed as front end. It is
also referred to as the ‘client side’ of the application.

Frontend Roadmap:The roadmap for frontend is shown in figure 2

Figure 2:

HTML: HTML stands for HyperText Markup Language. It is used to design the front end portion of
web pages using markup language. It acts as a skeleton for a website since it is used to make the
structure of a website.

CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to
simplify the process of making web pages presentable. It is used to style our website.

JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our website

used in frontend here.

Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites and
web applications. It is the most popular CSS framework for developing responsive, mobile-first
websites. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for
all sizes of screens (Desktop, Tablets, Phablets, and Phones).

Frontend Frameworks and Libraries:

AngularJS
React.js
VueJS
jQuery
Bootstrap
Material UI
Tailwind CSS
jQuery UI
Some other libraries and frameworks are: Handlebar.js Backbone.js, Ember.js etc.
BACKEND DEVELOPMENT:

Backend Development: Backend is the server side of a website. It is the part of the website that users
cannot see and interact. It is the portion of software that does not come in direct contact with the users. It is
used to store and arrange data.

Backend Roadmap: The roadmap for backend is shown in figure 3

Figure 3

PHP: PHP is a server-side scripting language designed specifically for web development.

Java: Java is one of the most popular and widely used programming language. It is highly scalable.

Python: Python is a programming language that lets you work quickly and integrate systems more
efficiently.

Node.js: Node.js is an open source and cross-platform runtime environment for executing JavaScript
code outside a browser.
Back End Frameworks: The list of back end frameworks
are: Express, Django, Rails, Laravel, Spring, etc.

Web Development Tutorials

HTML
CSS
JavaScript
jQuery
BootStrap
React JS
AngularJS
PHP
Node.js
 2.TECHNOLOGY USED :

HTML:

Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online
applications. A hypertext is a text that is used to reference other pieces of text, while a markup language is
a series of markings that tells web servers the style and structure of a document.

HTML is not considered a programming language as it can’t create dynamic functionality. Instead, with
HTML, web users can create and structure sections, paragraphs, and links using elements, tags, and
attributes.

CSS :

CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages,
including colours, layout, and fonts, thus making our web pages presentable to the users.

CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any
XML-based markup language. Now let’s try to break the acronym:

 Cascading: Falling of Styles

 Style: Adding designs/Styling our HTML tags
 Sheets: Writing our style in different documents
 3.OBJECTIVES OF PROJECT:

As the world is adopting cutting edge technologies, internet has become ever popular. A good website is
now considered as the reflection of an organization. Through the website we can create virtual class
room, take/attend online exam, showcase research & articles etc.

The key objectives of web development are mentioned below:

1) Understand the principles of creating an effective web page, including an in-depth consideration
of information architecture.

2) Become familiar with graphic design principles that relate to web design and learn how to
implement theories into practice.

3) Develop skills in analyzing the usability of a web site.

4) Understand how to plan and conduct user research related to web usability.

5) Learn the language of the web: HTML and CSS.

6) Learn CSS grid layout and flexbox.

7) Learn techniques of responsive web design, including media queries.

8) Develop skills in digital imaging (Adobe Photoshop.)

9) Develop basic programming skills using Javascript and jQuery.

10) Be able to embed social media content into web pages

 4. ADVANTAGES OF WEB DEVELOPMENT:

The advantages of web development are as follows:

1) Runs on any OS: It’s programmed to run on any OS . It must appropriately adapt to iOS, Android,
and Windows Phone — amongst other operating systems.

2) Runs using easy URL: These apps run on the device’s own browser through an easy URL.

3) Need not be downloaded: They don’t got to be downloaded and installed from app stores like Google
Play or Apple’s App Store. This translates into money-saving since having an immediate link through
an internet app is free.

4) Need not be updated like apps: They may also open websites. This suggests that they don’t require to
be updated within the way common apps do.

5) Cost Efficient: The most important benefit you’ll draw faraway from it’s its price. Web app
development is that the cheaper quite app development. It consists of making a link or several links
between the appliance and an URL. Developing a native app or an interpreted app entails a better
cost but its chances to succeed are far greater.
 5. DISADVANTAGES OF WEB DEVELOPMENT:

The disadvantages of web development are mentioned below:

1. Creates problem if website is not responsive: The website responsiveness means the website data
displays on every platform and every size of screens correctly.

2. If your website undergoes any quite issue, your application are going to be in trouble too. Don’t
assume that your web app will work perfectly if you don’t have a top quality corporate website.
For instance, if the web site’s URL takes a while to load or if uncomfortable ‘cookies’ show up
when entering the website, accessing it through the appliance will entail an equivalent issues. The
matter isn’t inherent to your web app. It’s rather located within the website’s development.

3. Internet connection is compulsory: An Internet connection are going to be an absolute must run it.
Otherwise, you’ll not be ready to browse the website.

4. It will also lose visibility because it won’t get on display within the stores.

5. In addition, there’ll be some access restrictions on certain hardware features of the device it’s
running on.
(II) PROJECT DESIGN PHASE
 (III) IMPLEMENTATION PHASE

Code of the project is as follows:\

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chandigarh group of school | HOME</title>
<link rel="stylesheet" href="project.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>

<h1> Chandigarh group of school </h1>

<div class = "web">
<nav>
<a href="https://www.cgc.edu.in/">HOME</a> &nbsp;&nbsp; | &nbsp;&nbsp;
<a href="https://www.shiksha.com/college/chandigarh-group-of-colleges-cgc-landran-
45524">COLLEGE REVIEW</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="https://www.cgc.edu.in/placement">COLLEGE STATUS </a>&nbsp;&nbsp;|
&nbsp;&nbsp;
<a href="https://www.cgc.edu.in/cgc-landran-fee-structure">FEES STRUCTURE</a>

</nav>
<br>

<main>
<section>
<h2>
WHERE OPPORTUNITY LIE !!
 </h2>
<img src="image/Campus View full of Chandigarh Group of Colleges Mohali_Campus-
View.jpg" height="35%" width="40%" alt="" class="center">
<b><p>Chandigarh Group of school, Landran has become a synonym to excellence.
Situated on the National Highway 205A, Chandigarh Group of Colleges bespeaks A-class
educational facilities.
CGC, Landran has come a long way in the field of education. In the year 2001,
it got incepted with a hope to bridge the gap between inquisitive minds and education.
Initially, Engineering was the flagship program at CGC, Landran and with time, more &
more programs got added to the curriculum.
Currently, the school offers 40+ programs under seven domains namely Engineering,
Biotechnology, Computer Application, Management, Education, Pharmacy,
and Hotel Management.</p></b>
</section>
<br>
<br>
<br>
<br>
<div class = " mile">
<ul><h1> CGC Landran GOING TO EXTRA MILES</h1></ul>

<img src="image/14b9a783a595b850b4d2bbca8aa774ff.jpg" height="35%" width="40%" alt=""

class="center"><br>
<br>
<br>

<h1>Latest News
</h1>
<br>
<h2> <div class = " mile">
<img src="image/203b14b1186e57c22eb43acfe10febd7.jpg" height=" 80%"; width="50%";></div>
</h2>
<br>
<br>
<br>

<h1> FESS STRUCTURE</h1>

<br>
<br>
<table>
<tr>
<th>Course </th>
<th>Fess</th>
<th>Elegibilty</th>
</tr>
<tr>
<td>BTECH</td>
<td>92,000</td>
<td>10+2</td>

</tr>
<tr>
<td>BBA</td>
<td>49,900</td>
<td>10+2</td>

</tr>

<tr>
T<td>MBA</td>
<td>92,000</td>
<td>GRADUATION</td>
</tr>

<tr>
<td>BCA</td>
<td>49,750</td>
<td>10+2</td>

</tr>

<tr>
<td>B.PHARMA</td>
<td>82,250</td>
<td>10+2</td>
 </tr>
</table>
<br>
<br>
<br>

<h1>ENQUIRY COLOMN</h1>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" font size="100px"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="fname">Mobile number:</label>
<input type="text" id="mnum" name="mnum"><br><br>
<label for="fname">AGE:</label>
<input type="text" id="age" name="age"><br><br>
<label for="fname">Type of course:</label>
<input type="text" id="course" name="course" ><br><br>
<input type="submit" id ="submit" value="Submit">
</form>
</div>
</main>

</header>
<h1>
Top Recruiter
</h1>
<div class="company">
<h2>AMAZON</h2>
<br>
<H2>GOOGLE</H2>
<br>
<H2>MICROSOFT</H2>
<br>
<H2>TCL</H2>
<br>
<H2>INFOSYS</H2>
<br>
</div>

<footer>

<p>creator: GAURAV RAWAT

</p><br>
<p>creator: HAVISHA BISHT
</p><br>
<p>creator: HARSHIT BUGHRA
</p><br>

<h3>REGISTRATION OPEN 2021</h3>

<h3> CONTACT US</h3>
<div class ="footer">
<a href="https://www.facebook.com/CGCPunjab/" >facebook </a> &nbsp;&nbsp;
<a href="https://www.instagram.com/cgc_landran_punjab/?hl=en">Instagram
</a>&nbsp;&nbsp;
<a href="https://twitter.com/cgcpunjab/status/1236216858778324992" > Twitter </a>
</div>
</footer>
</body>
</html>
CSS CODE:

table, th, td {
border: 5px solid rgb(20, 103, 172); width: 50%; height: 40%; ;
text-align: center;
font-size: 200%;

}
article, aside,figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}

h1{
font-size: 500%;
text-align: center;
background: rgba(0, 128, 0, 0.3);
color: blue;
background-color: aqua;
padding: 0%;
margin-top: 0%;
margin-bottom: 2%;
}

h2{ font-size: 250%;

text-align: center;
color: black;
background-color: bisque;
;
}
nav {
list-style-type: none;
font-size: 150%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333; }
 nav a {
color: white;
text-align: center;
padding: 70px 50px;
text-decoration: none;
}

.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}

.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
nav a:hover {
background-color: lightgreen;
}

.center{
border: 5px solid #555;
align-items: center;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.center{
border: 5px solid #555;
align-items: center;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

p{
font-size: 200%;
}

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
font-size: 100%;
border: 2px solid red;
border-radius: 4px;
background: rgba(0, 128, 0, 0.3)
}

label{
width: 100%;
font-size: 200%;
}

.submit{
width: 100%;
font-size: 200%;

.web{
background-color: rgb(0, 255, 255,0.2);}
.mile{
background-color: rgba(200, 255, 0, 0.2);
}
 footer {
background-color: aqua;
font-size: 100%;
text-align: center;
}

.company{
background-color: rgb(0, 255, 255,0.2);
color: black;
}

.footer{
font-size: 200%;
}

footer a:hover{
font-size: 150%;
background-color: lightgreen;
}
Screenshots of the project are as follows:
 (IV) CONCLUSION

1. There are many reasons building a website requires that we obtain the right tools and resources.
2. Standardization is one factor. When we use the right tools, we are assured that our pages would be
standard and acceptable to every visitor.
3. By using standard resources and tools, our visitors are able to view our web pages no matter what
browser they use. Our pages would load faster and we would also be able to maintain the pages
we have created with ease.
4. Using the right resources for our web design jobs will make our websites contemporary. They can
easily integrate into current technologies and software. Our users would derive added value from
our websites and contribute to its growth.
5. The right resources also make it easy for surfers to use our site. The standard tools used for
creating the website will ensure that things such as navigation, menus and layout conform to
current practices with which every web user is familiar with.
6. Our pages become attractive if we use the right tools. They can display correctly in the browser
and your visitors would be glad to visit again because you appealed to then.
7. Search engines would index your website if the pages conform to their rules. Standard tools like
blogs will produce pages that understand how search engines index pages so you will have the
added advantage of increase visibility o the web.
8. Web tools make your web design job easy. Coding can take away a lot of time and produce fatal
errors if you are not proficient. GUI interfaces take away all the incidences of errors and labor,
and give you something manageable.
9. Speed of implementation comes with the right tools. You can create a website and launch it in an
hour with the right resources. You save on time, effort and never miss important deadlines.
10. Now that you are equipped with the right knowledge you can go about your web design with the
assurance that you are going to produce something appealing and acceptable to most browsers.

(V) REFERENCES

1. www.youtube.com
2. www.geeksforgeeks.com
3. www.w3school.com