SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
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
ABOUT TRAINING
• Mode of Training : Online from Internshala
• Start date : 1st July 2022
• End date : 24th August 2022
• Duration :EIGHT weeks
CONTENT
• What is web development ?
• Website
• Webpage
• Front end development
• Front end development technologies
• Back - end development
• Back - end development technologies
• Project details
• Conclusion
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 )
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 .
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
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
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 ) .
❖ 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
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
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 .
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 ) !
PROJECT DETAILS :
❏ PROJECT NAME : PERSONAL SITE
❏ SERVER : GITHUB
❏ USER INTERFACE DESIGN : HTML,CSS
❏ WEB BROWSER : google chrome , opera pc and
mobile(responsive website)
HTML Code
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
CSS Code
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
https://abhijitprasad4.github.io/css_resume/
Look of the website:
Link for the website:
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 .
THANK YOU

Más contenido relacionado

Was ist angesagt?

Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack DevelopmentDhilipsiva DS
 
web development.pptx
web development.pptxweb development.pptx
web development.pptxMohdArbazraza
 
Full Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxFull Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxRamudgarYadav
 
Front end web development
Front end web developmentFront end web development
Front end web developmentviveksewa
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Sandip Jadhav
 
Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Jayant Surana
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewResponsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewAidan Foster
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designingAanand Bohara
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 

Was ist angesagt? (20)

Introduction to MERN
Introduction to MERNIntroduction to MERN
Introduction to MERN
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack Development
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
web development
web developmentweb development
web development
 
Full Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxFull Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptx
 
Front end web development
Front end web developmentFront end web development
Front end web development
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Wordpress ppt
Wordpress pptWordpress ppt
Wordpress ppt
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)
 
Web developnment
Web developnment Web developnment
Web developnment
 
Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.
 
Web development
Web developmentWeb development
Web development
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewResponsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designing
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Introduction to flutter
Introduction to flutter Introduction to flutter
Introduction to flutter
 

Ähnlich wie INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx

WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxRajnirani18
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentpuneetbatra24
 
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptxMINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptxLakshmiPandey19
 
uuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptxuuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptxSHAIKIRFAN715544
 
webdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptxwebdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptxsitesite4
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxssuser485fb2
 
Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.JohnLagman3
 
seminar Presentation final.pptx
seminar Presentation final.pptxseminar Presentation final.pptx
seminar Presentation final.pptxSyedSafwanAhmed1
 
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Harshith Rockx
 
project web development
project web developmentproject web development
project web developmentlucky sharma
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxchitrachauhan21
 
Internship review
Internship reviewInternship review
Internship reviewPAWAN KUMAR
 

Ähnlich wie INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx (20)

WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end development
 
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptxMINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
 
WebTechnology presentation.pptx
WebTechnology presentation.pptxWebTechnology presentation.pptx
WebTechnology presentation.pptx
 
uuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptxuuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptx
 
webdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptxwebdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptx
 
Mini Project PPT.pptx
Mini Project PPT.pptxMini Project PPT.pptx
Mini Project PPT.pptx
 
ppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptxppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptx
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
 
Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.
 
web devs ppt.ppsx
web devs ppt.ppsxweb devs ppt.ppsx
web devs ppt.ppsx
 
seminar Presentation final.pptx
seminar Presentation final.pptxseminar Presentation final.pptx
seminar Presentation final.pptx
 
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
 
UI Web Development.pptx
UI Web Development.pptxUI Web Development.pptx
UI Web Development.pptx
 
MobileStore.pptx
MobileStore.pptxMobileStore.pptx
MobileStore.pptx
 
dot net unit-1.pdf
dot net unit-1.pdfdot net unit-1.pdf
dot net unit-1.pdf
 
project web development
project web developmentproject web development
project web development
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
1_Intro_toHTML.ppt
1_Intro_toHTML.ppt1_Intro_toHTML.ppt
1_Intro_toHTML.ppt
 
Internship review
Internship reviewInternship review
Internship review
 

Último

Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 

Último (20)

Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 

INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx

  • 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)
  • 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 .