SlideShare a Scribd company logo
1 of 19
Basics Of Web
Technology &
Programming Concepts
Program : Internship Training Presentation
[ B.Tech CSE, 4th Year 7th Sem ]
CONTENTS
 What is Web Development?
 Front end development
 Front end development technologies
 Back end development
 Back end development technologies
 Who is a Web Developer?
 Types of Web Developer
 How a website works?
 Difference Between Web Developer and Web Designer
WHAT IS WEB DEVELOPMENT
Web Development usually refers to developing the website for the
Internet (World Wide Web) or for an Intranet (Private network). 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, Flipkart, etc.
There are two broad division of Web Development –
 Front-end Development (also called Client-side Development)
 Back-end Development (also called Server-side Development).
FRONTEND
DEVELOPMENT
FRONTEND DEVELOPMENT
Front end development refers to producing a web
application so that a user can see and interact with them directly. It is also
known as Client side development. It focuses on the visual elements a
website that a user will interact with.
A front end developer has one general responsibility: to
ensure that website visitors can easily interact with the page. They do this
through the combination of design, technology and programming to
code a website's appearance, as well as taking care of debugging.
The common technologies we can use in front-end
development are:
 HTML
 CSS
 JAVASCRIPT
FRONTEND DEVELOPMENT TECHNOLOGIES
HTML was first created by Tim Berners-Lee, starting in 1989. It
stands for Hyper Text Markup Language. Hypertext means that the document
contains links that allow the reader to jump to other places in the document.
A Markup Language is a way that computers speak to each other
to control how text is processed and presented. It describes the structure of a
web page and consists series of elements. Its elements tells browser how to
display the content.
It's code is written in Notepad or any text editor but save it as
.htmor .html extension..
Header
Nav
Body
Footer
HTML 5
FRONTEND DEVELOPMENT TECHNOLOGIES
CSS was first proposed by Hakon Wium Lie on October 10, 1994
at CERN (European Organization for Nuclear Research). Cascading Style Sheets
(CSS) describes how HTML elements are to be displayed on screen.
CSS saves a lot of work. It can control the layout of multiple web
all at once. It is also responsible for responsive layouts of a website. It is also
written in any text editor but save as .css extension.
FRONTEND DEVELOPMENT TECHNOLOGIES
JavaScript was invented by Brendan Eich in 1995. JavaScript is
the Programming Language for the Web. JavaScript can update and change
both HTML and CSS. JavaScript is responsible for the Functioning of the
website.
It is a scripting language that enables us to create dynamically
updating content, control multimedia, animate images, and pretty much
everything else. It is also written in any text editor but add the .js extension.
BACKEND
DEVELOPMENT
BACKEND DEVELOPMENT
Backend development controls what goes on behind
the scenes of the web applications. It is also known as server side
development. Backend usually consists of three parts:
 A server
 An Application
 A Database
Users can't see how the backend works but this code is
what communicates the database information to the browser.
Common Backend development technologies are:
 PHP
 SQL
BACKEND DEVELOPMENT TECHNOLOGIES
PHP is an acronym for "PHP: Hypertext Pre-processor".
PHP is a widely-used, open source scripting language. PHP scripts are
executed on the server. PHP is free to download and use. PHP is a
server side scripting language that is embedded in HTML It is used to
manage dynamic content, databases, session tracking, even build
entire e-commerce sites.
BACKEND DEVELOPMENT TECHNOLOGIES
SQL stands for Structured Query Language. SQL let us
access and manipulate databases. SQL became a standard of the
American National Standards Institute (ANSI) in 1986, and of the
International Organization select for standardization (ISO) in 1987.
SQL is a database language, it is used for database creation, system
database deletion, fetching rows, and modifying rows, etc.
It can retrieve data and executes queries against the
database. Every website is supported by a database at the backend.
Each time a user submits information or searches something in the
website, data gets stored and retrieved from the database. SQL is the
language for querying and storing data in the database..
WHO IS WEB DEVELOPER?
A web developer is a programmer who specializes in the
development of World Wide Web applications using a client-server model. The
applications typically use HTML, CSS and JavaScript in the client, PHP, C#,
Python, Node.js or Java in the server, and http for communications between
client and server.
Web developers typically do the following:
 Meet with clients or management to discuss the needs and design of a
website.
 Create and test applications for a website. Write code for the website, using
programming languages such as HTML, CSS, etc.
 Work with other team members to determine what information the site will
contain.
 Work with graphics and other designers to determine the website's layout.
Integrate graphics, audio, and video into the website.
 Monitor website traffic.
TYPES OF WEB DEVELOPER
There are 3 kinds of Web Developers –
 Front-End Developer: They are responsible for how a website looks. They create the site's layout and integrate
graphics, applications (such as a retail checkout tool), and other content. They also write web design programs in
a variety of computer languages, such as HTML or JavaScript.
 Back-End Developer: They are responsible for server-side web application logic and integration of the work front-
end developers do.
 Full-Stack Developer: A full-stack web developer is a person who can develop both client and server software.
They perform the task of both Front end and Back End Developer.
THREE TYPES OF
DEVELOPER
HOW WEBSITE WORKS?
When you type a web address into your browser:
 The browser goes to the DNS server, and finds the real address of
the server that the website lives on.
 The browser sends an HTTP request message to the server, asking
it to send a copy of the website to the client.
 If the server approves the client's request, the server sends the
client a "200 OK" message, which means "Of course you can look
at that website! Here it is", and then starts sending the website's
files to the browser as a series of small chunks called data packets.
 The browser assembles the Data Packets into a complete web
page and displays it to you.
WEB DEVELOPER vs WEB DESIGNER
Web Developer
 Web Developers are more technical in nature.
 Web development refers to building user-
friendly websites based on client's
specifications.
 They transform designs into fully functional
websites.
 Web development refers to the functionality
of thewebsite on how it works.
 Languages used are HTML, PHP, JavaScript,
CSS, Python, Ruby, jQuery etc.
Web Designer
 Web Designers are very creative in nature.
 Web designers are the aesthetic element.
 They transform the ideas into visually
appealing designs.
 Web designs refers to how the websites
looks and feels on the outside.
 Web designing tools include Abobe
Photoshop, Illustrator, Dreamweaver, Sketch
etc.
THANK YOU

More Related Content

What's hot

Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web DevelopmentParvez Mahbub
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersLemi Orhan Ergin
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiTemitayo Fadojutimi
 
Front end development session1
Front end development session1Front end development session1
Front end development session1marwa Ayad Mohamed
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxRajnirani18
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
web development.pptx
web development.pptxweb development.pptx
web development.pptxMohdArbazraza
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
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
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development47ishu
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web developmentCrampete
 
Web Devlopment ppt.pptx
Web Devlopment ppt.pptxWeb Devlopment ppt.pptx
Web Devlopment ppt.pptxAartiVerma64
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)admecindia1
 

What's hot (20)

Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
 
Front end development session1
Front end development session1Front end development session1
Front end development session1
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 
Working of web
Working of webWorking of web
Working of web
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
Wordpress ppt
Wordpress pptWordpress ppt
Wordpress ppt
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Web development
Web developmentWeb development
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
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
Web Devlopment ppt.pptx
Web Devlopment ppt.pptxWeb Devlopment ppt.pptx
Web Devlopment ppt.pptx
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 

Similar to Basics of Web Development.pptx

Web development ppt
Web development pptWeb development ppt
Web development pptParasJain222
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxlearnEnglish51
 
Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.JohnLagman3
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxssuser485fb2
 
webdevelopmentppt-2210923044639 (1).pptx
webdevelopmentppt-2210923044639 (1).pptxwebdevelopmentppt-2210923044639 (1).pptx
webdevelopmentppt-2210923044639 (1).pptxsubhalaxmibarik478
 
webdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptxwebdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptxsitesite4
 
uuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptxuuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptxSHAIKIRFAN715544
 
​Web ​Development
 ​Web ​Development ​Web ​Development
​Web ​DevelopmentFariha Tasnim
 
Web Design & Development !BATRA COMPUTER CENTRE
Web Design & Development !BATRA COMPUTER CENTREWeb Design & Development !BATRA COMPUTER CENTRE
Web Design & Development !BATRA COMPUTER CENTREjatin batra
 
Web development presentation.pptx
Web development presentation.pptxWeb development presentation.pptx
Web development presentation.pptxManjeetAgarwal
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonMukalele Rogers
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web DevelopmentSWAGATHCHOWDARY1
 
Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptxmalise2997
 
Front end web development
Front end web developmentFront end web development
Front end web developmentviveksewa
 
The Guide to Website Development for Beginners.pdf
The Guide to Website Development for Beginners.pdfThe Guide to Website Development for Beginners.pdf
The Guide to Website Development for Beginners.pdfConnect Solutions
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and developmentgherryta
 

Similar to Basics of Web Development.pptx (20)

Web development ppt
Web development pptWeb development ppt
Web development ppt
 
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.
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
 
webdevelopmentppt-2210923044639 (1).pptx
webdevelopmentppt-2210923044639 (1).pptxwebdevelopmentppt-2210923044639 (1).pptx
webdevelopmentppt-2210923044639 (1).pptx
 
webdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptxwebdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptx
 
uuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptxuuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptx
 
UI Web Development.pptx
UI Web Development.pptxUI Web Development.pptx
UI Web Development.pptx
 
​Web ​Development
 ​Web ​Development ​Web ​Development
​Web ​Development
 
WebTechnology presentation.pptx
WebTechnology presentation.pptxWebTechnology presentation.pptx
WebTechnology presentation.pptx
 
Web Design & Development !BATRA COMPUTER CENTRE
Web Design & Development !BATRA COMPUTER CENTREWeb Design & Development !BATRA COMPUTER CENTRE
Web Design & Development !BATRA COMPUTER CENTRE
 
Web development presentation.pptx
Web development presentation.pptxWeb development presentation.pptx
Web development presentation.pptx
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptx
 
Front end web development
Front end web developmentFront end web development
Front end web development
 
minor web.pptx
minor web.pptxminor web.pptx
minor web.pptx
 
Presentation 5 (1).pptx
Presentation 5 (1).pptxPresentation 5 (1).pptx
Presentation 5 (1).pptx
 
The Guide to Website Development for Beginners.pdf
The Guide to Website Development for Beginners.pdfThe Guide to Website Development for Beginners.pdf
The Guide to Website Development for Beginners.pdf
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and development
 

Recently uploaded

Introduction to Data Visualization,Matplotlib.pdf
Introduction to Data Visualization,Matplotlib.pdfIntroduction to Data Visualization,Matplotlib.pdf
Introduction to Data Visualization,Matplotlib.pdfsumitt6_25730773
 
Worksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptxWorksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptxMustafa Ahmed
 
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...manju garg
 
Online electricity billing project report..pdf
Online electricity billing project report..pdfOnline electricity billing project report..pdf
Online electricity billing project report..pdfKamal Acharya
 
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdfAldoGarca30
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxSCMS School of Architecture
 
Online food ordering system project report.pdf
Online food ordering system project report.pdfOnline food ordering system project report.pdf
Online food ordering system project report.pdfKamal Acharya
 
AIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsAIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsvanyagupta248
 
Post office management system project ..pdf
Post office management system project ..pdfPost office management system project ..pdf
Post office management system project ..pdfKamal Acharya
 
Linux Systems Programming: Inter Process Communication (IPC) using Pipes
Linux Systems Programming: Inter Process Communication (IPC) using PipesLinux Systems Programming: Inter Process Communication (IPC) using Pipes
Linux Systems Programming: Inter Process Communication (IPC) using PipesRashidFaridChishti
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.Kamal Acharya
 
8086 Microprocessor Architecture: 16-bit microprocessor
8086 Microprocessor Architecture: 16-bit microprocessor8086 Microprocessor Architecture: 16-bit microprocessor
8086 Microprocessor Architecture: 16-bit microprocessorAshwiniTodkar4
 
fitting shop and tools used in fitting shop .ppt
fitting shop and tools used in fitting shop .pptfitting shop and tools used in fitting shop .ppt
fitting shop and tools used in fitting shop .pptAfnanAhmad53
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdfKamal Acharya
 
Introduction to Robotics in Mechanical Engineering.pptx
Introduction to Robotics in Mechanical Engineering.pptxIntroduction to Robotics in Mechanical Engineering.pptx
Introduction to Robotics in Mechanical Engineering.pptxhublikarsn
 
Ground Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementGround Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementDr. Deepak Mudgal
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxSCMS School of Architecture
 
Digital Communication Essentials: DPCM, DM, and ADM .pptx
Digital Communication Essentials: DPCM, DM, and ADM .pptxDigital Communication Essentials: DPCM, DM, and ADM .pptx
Digital Communication Essentials: DPCM, DM, and ADM .pptxpritamlangde
 

Recently uploaded (20)

Introduction to Data Visualization,Matplotlib.pdf
Introduction to Data Visualization,Matplotlib.pdfIntroduction to Data Visualization,Matplotlib.pdf
Introduction to Data Visualization,Matplotlib.pdf
 
Worksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptxWorksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptx
 
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
 
Online electricity billing project report..pdf
Online electricity billing project report..pdfOnline electricity billing project report..pdf
Online electricity billing project report..pdf
 
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
 
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak HamilCara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
 
Online food ordering system project report.pdf
Online food ordering system project report.pdfOnline food ordering system project report.pdf
Online food ordering system project report.pdf
 
AIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsAIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech students
 
Post office management system project ..pdf
Post office management system project ..pdfPost office management system project ..pdf
Post office management system project ..pdf
 
Linux Systems Programming: Inter Process Communication (IPC) using Pipes
Linux Systems Programming: Inter Process Communication (IPC) using PipesLinux Systems Programming: Inter Process Communication (IPC) using Pipes
Linux Systems Programming: Inter Process Communication (IPC) using Pipes
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.
 
8086 Microprocessor Architecture: 16-bit microprocessor
8086 Microprocessor Architecture: 16-bit microprocessor8086 Microprocessor Architecture: 16-bit microprocessor
8086 Microprocessor Architecture: 16-bit microprocessor
 
fitting shop and tools used in fitting shop .ppt
fitting shop and tools used in fitting shop .pptfitting shop and tools used in fitting shop .ppt
fitting shop and tools used in fitting shop .ppt
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdf
 
Introduction to Robotics in Mechanical Engineering.pptx
Introduction to Robotics in Mechanical Engineering.pptxIntroduction to Robotics in Mechanical Engineering.pptx
Introduction to Robotics in Mechanical Engineering.pptx
 
Ground Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementGround Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth Reinforcement
 
Signal Processing and Linear System Analysis
Signal Processing and Linear System AnalysisSignal Processing and Linear System Analysis
Signal Processing and Linear System Analysis
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
 
Digital Communication Essentials: DPCM, DM, and ADM .pptx
Digital Communication Essentials: DPCM, DM, and ADM .pptxDigital Communication Essentials: DPCM, DM, and ADM .pptx
Digital Communication Essentials: DPCM, DM, and ADM .pptx
 

Basics of Web Development.pptx

  • 1. Basics Of Web Technology & Programming Concepts Program : Internship Training Presentation [ B.Tech CSE, 4th Year 7th Sem ]
  • 2. CONTENTS  What is Web Development?  Front end development  Front end development technologies  Back end development  Back end development technologies  Who is a Web Developer?  Types of Web Developer  How a website works?  Difference Between Web Developer and Web Designer
  • 3. WHAT IS WEB DEVELOPMENT Web Development usually refers to developing the website for the Internet (World Wide Web) or for an Intranet (Private network). 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, Flipkart, etc. There are two broad division of Web Development –  Front-end Development (also called Client-side Development)  Back-end Development (also called Server-side Development).
  • 5. FRONTEND DEVELOPMENT Front end development refers to producing a web application so that a user can see and interact with them directly. It is also known as Client side development. It focuses on the visual elements a website that a user will interact with. A front end developer has one general responsibility: to ensure that website visitors can easily interact with the page. They do this through the combination of design, technology and programming to code a website's appearance, as well as taking care of debugging. The common technologies we can use in front-end development are:  HTML  CSS  JAVASCRIPT
  • 6. FRONTEND DEVELOPMENT TECHNOLOGIES HTML was first created by Tim Berners-Lee, starting in 1989. It stands for Hyper Text Markup Language. Hypertext means that the document contains links that allow the reader to jump to other places in the document. A Markup Language is a way that computers speak to each other to control how text is processed and presented. It describes the structure of a web page and consists series of elements. Its elements tells browser how to display the content. It's code is written in Notepad or any text editor but save it as .htmor .html extension..
  • 8. FRONTEND DEVELOPMENT TECHNOLOGIES CSS was first proposed by Hakon Wium Lie on October 10, 1994 at CERN (European Organization for Nuclear Research). Cascading Style Sheets (CSS) describes how HTML elements are to be displayed on screen. CSS saves a lot of work. It can control the layout of multiple web all at once. It is also responsible for responsive layouts of a website. It is also written in any text editor but save as .css extension.
  • 9. FRONTEND DEVELOPMENT TECHNOLOGIES JavaScript was invented by Brendan Eich in 1995. JavaScript is the Programming Language for the Web. JavaScript can update and change both HTML and CSS. JavaScript is responsible for the Functioning of the website. It is a scripting language that enables us to create dynamically updating content, control multimedia, animate images, and pretty much everything else. It is also written in any text editor but add the .js extension.
  • 11. BACKEND DEVELOPMENT Backend development controls what goes on behind the scenes of the web applications. It is also known as server side development. Backend usually consists of three parts:  A server  An Application  A Database Users can't see how the backend works but this code is what communicates the database information to the browser. Common Backend development technologies are:  PHP  SQL
  • 12. BACKEND DEVELOPMENT TECHNOLOGIES PHP is an acronym for "PHP: Hypertext Pre-processor". PHP is a widely-used, open source scripting language. PHP scripts are executed on the server. PHP is free to download and use. PHP is a server side scripting language that is embedded in HTML It is used to manage dynamic content, databases, session tracking, even build entire e-commerce sites.
  • 13. BACKEND DEVELOPMENT TECHNOLOGIES SQL stands for Structured Query Language. SQL let us access and manipulate databases. SQL became a standard of the American National Standards Institute (ANSI) in 1986, and of the International Organization select for standardization (ISO) in 1987. SQL is a database language, it is used for database creation, system database deletion, fetching rows, and modifying rows, etc. It can retrieve data and executes queries against the database. Every website is supported by a database at the backend. Each time a user submits information or searches something in the website, data gets stored and retrieved from the database. SQL is the language for querying and storing data in the database..
  • 14. WHO IS WEB DEVELOPER? A web developer is a programmer who specializes in the development of World Wide Web applications using a client-server model. The applications typically use HTML, CSS and JavaScript in the client, PHP, C#, Python, Node.js or Java in the server, and http for communications between client and server. Web developers typically do the following:  Meet with clients or management to discuss the needs and design of a website.  Create and test applications for a website. Write code for the website, using programming languages such as HTML, CSS, etc.  Work with other team members to determine what information the site will contain.  Work with graphics and other designers to determine the website's layout. Integrate graphics, audio, and video into the website.  Monitor website traffic.
  • 15. TYPES OF WEB DEVELOPER There are 3 kinds of Web Developers –  Front-End Developer: They are responsible for how a website looks. They create the site's layout and integrate graphics, applications (such as a retail checkout tool), and other content. They also write web design programs in a variety of computer languages, such as HTML or JavaScript.  Back-End Developer: They are responsible for server-side web application logic and integration of the work front- end developers do.  Full-Stack Developer: A full-stack web developer is a person who can develop both client and server software. They perform the task of both Front end and Back End Developer.
  • 17. HOW WEBSITE WORKS? When you type a web address into your browser:  The browser goes to the DNS server, and finds the real address of the server that the website lives on.  The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client.  If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets.  The browser assembles the Data Packets into a complete web page and displays it to you.
  • 18. WEB DEVELOPER vs WEB DESIGNER Web Developer  Web Developers are more technical in nature.  Web development refers to building user- friendly websites based on client's specifications.  They transform designs into fully functional websites.  Web development refers to the functionality of thewebsite on how it works.  Languages used are HTML, PHP, JavaScript, CSS, Python, Ruby, jQuery etc. Web Designer  Web Designers are very creative in nature.  Web designers are the aesthetic element.  They transform the ideas into visually appealing designs.  Web designs refers to how the websites looks and feels on the outside.  Web designing tools include Abobe Photoshop, Illustrator, Dreamweaver, Sketch etc.