This document summarizes an industrial training presentation on web development given by two students. It began with an introduction to the 8-week online training through Internshala from July 1st to August 24th. The presentation covered topics like what is web development, the differences between front-end and back-end development, common front-end technologies like HTML, CSS, and Bootstrap, back-end technologies like SQL and PHP, and details of a personal website the students created using these skills. In conclusion, the students said the training gave them valuable technical skills and experience, and that web development is a field with many opportunities.

1. MCKV INSTITUTE OF ENGINEERING
ECE DEPARTMENT
WEB DEVELOPMENT
PRESENTED BY:-
ABHIJIT PRASAD
(B.TECH/ECE/19/048)
SUDHANSHU SHEKHAR
(B.TECH/ECE/19/043)
INDUSTRIAL TRAINING PRESENTATION

2. ABOUT TRAINING
• Mode of Training : Online from Internshala
• Start date : 1st July 2022
• End date : 24th August 2022
• Duration :EIGHT weeks

3. CONTENT
• What is web development ?
• Website
• Webpage
• Front end development
• Front end development technologies
• Back - end development
• Back - end development technologies
• Project details
• Conclusion

4. WHAT IS WEB DEVELOPMENT ?
• Web development usually refers to developing the website for the internet
(world wide web ) or for an intranet ( private network ) .
• It is also known as web programming .
• It is the creation of dynamic web applications .
Examples of web applications are social networking sites like Facebook or
e-commerce sites like Amazon .
• There are two broad divisions of web development - front - end development
(also called client - side development ) and back - end development (also called
server - side development )

5. What is website and how does it works ?
❏ A website is a combination of different web pages linked together in a certain
fashion according to the designer's will and organizational need served through the
same domain name server. Website is typically written in HTML and hosted 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 URLs 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 the different parts of a website .

6. 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 entering 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 .
Dynamic 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 20 / 6.59r to generate unique content each time the page is loaded

7. FRONT END DEVELOPMENT
• Front - end development refers to producing a web application so that a user
can see and interact with them directly .
• The objective of designing a site is to ensure that when the users open up
the site they see the information in a format that is easy to read and relevant
• A front - end developer architects and develops websites and applications
using web technologies , which run on the Open Web Platform or act as
compilation input for non - web platform environments
• Also known as client - side development
• The technologies we can use are :
HTML ( Hypertext markup language )
CSS ( Cascading Style Sheet )
BOOTSTRAP

8. FRONT END DEVELOPMENT TECHNOLOGIES
HTML
❖ HTML stands for Hyper Text Markup Language
❖ It is the standard markup language for creating Web pages
❖ It Describes the structure of a Web page and consists series of elements .
❖ Its elements tells the browser how to display the content.
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 other text elements within the
body will also get the same color ( unless we specify something else ) .

9. ❖ 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
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 , buttons ,
tables , navigation , modals ,image carousels and many other , as well as optional JavaScript
plugins
❖ Bootstrap also gives you 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

10. BACK END DEVELOPMENT
● Back - end development controls what goes on behind the scenes of a
web application .
● Also known as server - side development
● Backend usually consists of three parts : a server , an application and a
database .
● Users can't see how the backend works but this code is what
communicates the database information to the browser ,
● Back end development technologies : SQL and PHP

11. BACK END DEVELOPMENT TECHNOLOGIES
SQL
► SQL stands for Structured Query Language . It is designed for managing data in a
relational database management system ( RDBMS ) .
► SQL is a database language , it is used for database creation , deletion , fetching rows , and
modifying rows , etc. SQL is based on relational algebra and tuple relational calculus .
► All DBMS like MySQL , Oracle , MS Access , Sybase , Informix , PostgreSQL , and SQL
Server use SQL as standard database language . SQL is just a query language ; it is not a
database . To perform SQL queries , we need to install any database , for example ,
Oracle , MySQL , MongoDB , PostGre SQL , SQL Server , DB2 , etc.
► With SQL , we can query our database in several ways , using English - like statements .
► It allows the user to describe and define the data in the database and manipulate it when needed .
► It allows the user to create a view , stored procedure , function in a database .
► It allows the user to set permission on tables , procedures , and views .

12. PHP
• PHP is an acronym for " PHP : Hypertext Preprocessor "
• PHP is a widely - used , open source scripting language
• PHP scripts are executed on the server
• PHP is free to download and use
• PHP can generate dynamic page content and can create , open , read , write ,
delete , and close files on the server .
• PHP can collect form data and can add , delete , modify data in your database .
• PHP can send and receive cookies .
• PHP can be used to control user - access and to encrypt data .
• PHP files can contain text , HTML , CSS , JavaScript , and PHP code .
• PHP code is executed on the server , and the result is returned to the browser as plain HTML .
• It is deep enough to run the largest social network ( Facebook ) !

13. PROJECT DETAILS :
❏ PROJECT NAME : PERSONAL SITE
❏ SERVER : GITHUB
❏ USER INTERFACE DESIGN : HTML,CSS
❏ WEB BROWSER : google chrome , opera pc and
mobile(responsive website)

14. HTML Code

16. CSS Code

21. https://abhijitprasad4.github.io/css_resume/
Look of the website:
Link for the website:

22. CONCLUSION
• As a conclusion , I can say that this training was a great experience . Thanks to
this project , I acquired deeper knowledge concerning my technical skills.
• There are huge opportunities available for the students who want to work in
this field . Many private and public organizations hire web designer for their
online work and website development .
• An experienced person in this field can also work as a freelancer ; there
are many online companies which provide online projects to the individuals .

23. THANK YOU