Scribd
Upload
187 views

Bikaner Technical University, Bikaner: Web Development

The document summarizes an industrial training project on web development. It discusses training details, including topics covered (web development), mode (online), and duration (12 weeks). It then summarizes key concepts in web development like websites, web pages, and front-end and back-end development. Specific front-end technologies learned are listed as HTML, CSS, JavaScript, and Bootstrap. An e-commerce website project on dogs is described that uses HTML, CSS, Bootstrap for design and Google Chrome as the browser.

Uploaded by

Mukul Purohit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
187 views

Bikaner Technical University, Bikaner: Web Development

The document summarizes an industrial training project on web development. It discusses training details, including topics covered (web development), mode (online), and duration (12 weeks). It then summarizes key concepts in web development like websites, web pages, and front-end and back-end development. Specific front-end technologies learned are listed as HTML, CSS, JavaScript, and Bootstrap. An e-commerce website project on dogs is described that uses HTML, CSS, Bootstrap for design and Google Chrome as the browser.

Uploaded by

Mukul Purohit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

GOVERNMENT ENGINEERING COLLAGE, BIKANER

BIKANER TECHNICAL UNIVERSITY, BIKANER

Web DEVELOPMENT
A
Industrial Training and Project Presentation

submitted in partial fulfillment for the award of the Degree of


Bachelor of Technology in Department of Computer Science and Engineering

Submitted To Submitted By
Mr. Rishi Raj Vyas Mukesh kir
Assistant Professor B.Tech CSE-A3
Dept. Of CSE 20EEBCS064
Training Details:

. Topic : Web Development

. Mode of Training : Online

. Platform : Udemy Online Training

. Start Date : 2 April , 2021

. End Date : 10 July , 2021

. Duration : 12 Weeks

. Number of hours : 55
What is Web Development :

It is the process of developing a web site which includes functionlity creation


and usability testing for that website.

What is website and how does it works ?

. A website is a combinations of different web pages linked together in a certain


fashion according to the designer’s will organizational need served through the
same domain name server . Website is typically written in HTML , and busted on
single web server for its access through network.

. Each website is provided with a unique uniform resource locator (URL) and
accessed through the Hypertext transfer protocol (HTTP) responsible for making
communication possible between client machine and the server by the application
of different browsers.

. The URL,s of the Web pages are responsible for organizing website into a hierarchy
and the hyperlinks between them controls how the reader perceives the overall
structure and flow of traffic between parts of website.
WEB PAGE

. A web page is a document which is commonly written in HTML, that is viewed


and translated by a web browser. A web page can be identified by centering an
URL.

. A web page may contain text , graphics , and hyperlinks to other web pages and
files.

. A web page can be of :


. Static type or
. Dynamic type

. Static Web Page : Static Web pages contain the same prebuilt content each time
the page is loaded. Standard HTML pages are static Web pages . They contain
HTML , code , which defines the structure and content of the Web page. Each
time an HTML , page is loaded , it looks the same.

. Dyanamic Web Page : Other types of Web pages, such as PHP , ASP , and JSP pages
are dynamic web pages . These pages contain “server-side” , code , which allows
the server to generate unique content each time the page loaded .
Web Development can be typically divided into two classes/Parts:

. Front – End Development


. Back – End Development

. Front – End Development : It is the process of creating the layout of a web.


Its the part that the users see and interact with. Its typically coded using
HTML/CSS/JavaScript. There are also a few tools and frameworks that can be
used , like Bootstrap and Angular.js.

. Back – End Development : It is the creation of the functional part of a web.


Its what makes the website functional. Another part of the Backend
development is interacting with the Database .

Some of the most famous Backend languages are :


PHP/JAVA/PYTHON/PERL. There are also a few frameworks such as Ruby On
Rails/Django/Node.js .
FRONT – END TECHNOLOGIES LEARNT

Technologies I have Learnt so far in this training are :

. HTML/HTML5

. CSS/CSS3

. JAVA-SCRIPT

. BOOTSTRAP5

FRONT – END DEVELOPMENT

CLIENT
SIDE
HTML

. HTML is an acronym which stands for Hyper Text Markup Language

which is used for creating web pages and web applications.

. HTML describes the structure of a Web page.

. HTML consists of a series of elements.

. HTML elements tell the browser how to display the content.

. HTML , elements label pieces of content such as “this is a heading”.

“this is a paragraph” , “this is a link” , etc.


A simple HTML Document :

<!DOCTYPE html>

<html>

<head>

<title> Page Title </title>

</head>

<body>

<h1> My First Heading </h1>


<p> My First paragraph </p>

</body>

</html>
CSS

. CSS stands for Cascading Style Sheets .

. CSS describes how HTML elements are to be displayed on screen , paper


, or in other media .

. CSS is used to define styles for our web pages , including the design , layout
and variations in display for different devices and screen sizes.

. The word cascading means that a style applied to a parent element will also
apply to all children elements within the parent . So , if we set the color of
the body text to “blue” , all headings , paragraphs , and text elements within
the body will also get the same color (unless we specify something else) .

. CSS can be added to HTML , documents in 3 ways :


. Inline – by using the style attribute inside HTML , elements.
. Internal – by using a <style> element in the <head> section.
. External – by using a <link> element to link to an external CSS file.
JAVASCRIPT

. JavaScript is a scripting or programming language that allows you to implement


complex features on web pages — every time a web page does more than just
sit there and display static information for you to look at — displaying timely
content updates, interactive maps, animated 2D/3D graphics, scrolling video
jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third
layer of the layer cake of standard web technologies.

. JavaScript is a scripting language that enables you to create dynamically


updating content, control multimedia, animate images, and pretty much
everything else. (Okay, not everything, but it is amazing what you can achieve
with a few lines of JavaScript code.)
What is JavaSript doing on your page ?

. Here we'll actually start looking at some code, and while doing so, explore
what actually happens when you run some JavaScript in your page.

. Let's briefly recap the story of what happens when you load a web page in
a browser (first talked about in our How CSS works article). When you
load a web page in your browser, you are running your code (the HTML,
CSS, and JavaScript) inside an execution environment (the browser tab).
This is like a factory that takes in raw materials (the code) and outputs a
product (the web page).
BOOTSTRAP

. Bootstrap is a free front – end framework for faster and easier web development.

. Bootstrap includes HTML , and CSS based design templates for typography, forms,
tables , navigation, modals , image carousels and many other , as well as optional
JavaScript plugins.

. Bootstrap also gives us the ability to easily create responsive designs.

. Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.

. Advantages of Bootstrap :
. Easy to use

. Responsive features

. Mobile – first approach

. Browser - compatibility
Project Details :

. Project Name : E- commerce Website on a Dog

. Language Used : JavaScript

. User Interface Design : HTML , CSS , Bootstrap

. Web Browser : Google Chrome


Project Description

. In this project I make a E – commerce website for a Dog.

. The website is consist of HTML ,CSS ,Bootstrap code.

. The HTML , CSS and Bootstrap part of the code decides how the website
looks.

. The main pages that I have designed for the website are :

. Index.html
. Style.css

Now Let’s have a look to the website and its


working !

Link :  https://mukesh567.github.io/TinDog-Completed-Website/
Project front page looks like :

You might also like