SlideShare a Scribd company logo
About
Coursera
DEPARTMENT OF COMPUTER ENGINEERING
INDUSTRIAL TRAINING PRESENTATION
“Full Stack Web
Development”
PRESENTED BY:- SUDHANSHU VIJAY
REG NO. :- PIET18CS139
YEAR :- 4th
Introduction
About
Coursera
Full
Stack
Development
Coursera Inc. is an American massive open online
course provider founded in 2012 by Stanford
University computer science professors Andrew
Ng and Daphne Koller. Coursera works with
universities and other organizations to offer
online courses, certifications, and degrees in a
variety of subjects.
Full
Stack
Development
Stages
of
Full
Stack
• Full stack development: It refers to the development of
both front end(client side) and back end(server side)
portions of web application.
• Full stack web Developers: Full stack web developers have
the ability to design complete web application and
websites. They work on the frontend, backend, database
and debugging of web application or websites.
Stages
of
Full
Stack
Backend
Full
Stack
Frontend
Backend
Backend
Introduction
to
Django
Back end: It refers to the server-side
development of web application or website
with a primary focus on how the website
works. It is responsible for managing the
database through queries and APIs by client-
side commands. This type of website mainly
consists of three parts front end, back end,
and database.
Introduction
to
Django
Pillars
Of
Django
Definition :
» “Django” is basically a web framework
created using python.
» “Django” is mainly use to create Backend of
a website by mixing python programming in
HTML, CSS, JS etc.
» “Django” provides a platform to develop web
applications rapidly and more securely.
Pillars
Of
Django
Django
Model
VIEW
DJANG
O
Django
Model
Django
View
Introduction To Django
Models
Advantages Of Django Models
Steps To Create Django Models
Django
View
Django
Templates
Creating Django Views
Class Based View V/S
Function Based Views
Django Views
Component
Django
Templates
Key
Features
What Are Django Templates?
Steps to Create Django Templates
Django Template Language
Key
Features
Frontend
Some of the
busiest sites
on the planet
use Django’s
ability to
quickly and
flexibly scale
to meet the
heaviest
traffic
demands.
Exceedingly
Scalable
Django takes
security seriously
and helps
developers avoid
many common
security mistakes,
such as SQL
injection, cross-
site scripting,
cross-site request
forgery and
clickjacking. Its
user
authentication
system provides a
secure way to
manage user
accounts and
passwords.
Reassuringly
Secure
Django includes
dozens of extras you
can use to handle
common Web
development tasks.
Django takes care of
user authentication,
content
administration, site
maps, RSS feeds, and
many more tasks —
right out of the box.
Fully Loaded
Django was
designed to
help
developers
take
applications
from concept
to completion
as quickly as
possible.
RidiculouslyFast
Frontend
What
is
HTML?
Frontend: It is the visible part of website or
web application which is responsible for user
experience. The user directly interacts with
the front end portion of the web application
or website.
What
is
HTML?
Explanation
of
basic
structure
HTMLis the standard markuplanguage for
Web pages.
HTMLwas invented by Tim Berners-Lee.
It is used for creating web pages, which are
displayedon world wide web.
It needs text editors likenotepad, Sublime,
ect. to write the code.
Explanation
of
basic
structure
Types
of
elements
in
html
•The <!DOCTYPE html> declaration defines
that this document is an HTML5 document.
•The <html> element is the root element of
an HTML page.
•The <head> element contains meta
information about the HTML page.
•The <title> element specifies a title for the
HTML page (which is shown in the browser's
title bar or in the page's tab).
•The <body> element defines the document's
body, and is a container for all the visible
contents, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
Types
of
elements
in
html
What
is
CSS?
An HTML element is defined by a
start tag, some content, and an end
tag:
<tagname>Content goes
here...</tagname>
<h1>My First Heading</h1>
1. CONTAINER TAG: Requires
opening and closing
both.<b>HTML</b>
2. EMPTY TAG: Doesn't require a
closing tag.Ex,<br>
What
is
CSS?
Types
of
style
sheets
• CSS stands for Cascading Style Sheets
• CSS is the language we use to style an HTML
document.
• CSS saves a lot of work. It can control the
layout of multiple web pages all at once.
Types
of
style
sheets
Advantages
of
CSS
There are three ways of inserting a style sheet:
1. External CSS- It is separate style file used to
define all style rules which is saved with
extension .css.
2. Internal CSS- In this, we define the style
rules in the same html page, where we
wants to style.
3. Inline CSS- We can define the style rule for a
single tag in html page itself.
Advantages
of
CSS
What
is
JavaScript?
• It save time to develop web pages.
• It is easy to maintain.
• It supports all type of web standers and
browsers.
• CSS efficiently works with search engines.
• CSS has wide variety of tags.
What
is
JavaScript?
JavaScript
Example
JavaScript is the world's most popular programming
language.
JavaScript is an object-based scripting language which is
lightweight and cross-platform.
It is a case-sensitive language.
JavaScript is a language that works with html to enhance
web pages and to make them interactive.
JavaScript
Example
How
to
write
code
Explanation of the code:
The text/javascript is the content type that
provides information to the browser about the
data.
The document.write() function is used to
display dynamic content through JavaScript.
<script type="text/javascript">
document.write("
JavaScript is a simple language for learners");
</script>
How
to
write
code
About
Projects
Apply in head section
•<html>
• <head>
• <script type="text/javascript">
• function msg(){
• alert("Hello Javatpoint");
• }
• </script>
• </head>
• <body>
• <p>Welcome to JavaScript</p>
• <form>
• <input type="button" value="click" onclick="msg()"/>
• </form>
• </body>
• </html>
Through external flie
•<html>
•<head>
•<script type="text/javascript" src="message.js"></script>
•</head>
•<body>
•<p>Welcome to JavaScript</p>
•<form>
•<input type="button" value="click" onclick="msg()"/>
•</form>
•</body>
•</html>
function msg(){
alert("Hello");
}
Message.
js
About
Projects
Certificate
चित्रहार
Queries
!
Certificate
Queries
!
Thank
You

More Related Content

What's hot (20)

PPTX
Internship presentation
Wasim Shemna
 
PPTX
Full stack web development
Crampete
 
PDF
A Basic Django Introduction
Ganga Ram
 
PPTX
Flutter
Himanshu Singh
 
PDF
Nodejs presentation
Arvind Devaraj
 
PPTX
JSON: The Basics
Jeff Fox
 
PPT
Advanced Web Development
Robert J. Stein
 
PPTX
Introduction to React JS
Arnold Asllani
 
PPTX
Introduction to MERN
ShyamMohanKunwar
 
PPTX
What Is Express JS?
Simplilearn
 
PPTX
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Jayant Surana
 
PPTX
Angularjs PPT
Amit Baghel
 
ODP
The Full Stack Web Development
Sam Dias
 
PPTX
Express JS Rest API Tutorial
Simplilearn
 
PPTX
MERN PPT
NeerajGupta96647
 
PPTX
Introduction to Node.js
Vikash Singh
 
PPTX
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
PPTX
Express js
Manav Prasad
 
Internship presentation
Wasim Shemna
 
Full stack web development
Crampete
 
A Basic Django Introduction
Ganga Ram
 
Nodejs presentation
Arvind Devaraj
 
JSON: The Basics
Jeff Fox
 
Advanced Web Development
Robert J. Stein
 
Introduction to React JS
Arnold Asllani
 
Introduction to MERN
ShyamMohanKunwar
 
What Is Express JS?
Simplilearn
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Jayant Surana
 
Angularjs PPT
Amit Baghel
 
The Full Stack Web Development
Sam Dias
 
Express JS Rest API Tutorial
Simplilearn
 
Introduction to Node.js
Vikash Singh
 
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
Express js
Manav Prasad
 

Similar to Full stack devlopment using django main ppt (20)

PPTX
221c82d4-5428-4047-8558-0467b34083e8.pptx
kurapativyshnavi3
 
PPTX
eswar.pptx
tonega7852
 
PDF
Vskills angular js sample material
Vskills
 
PPTX
Website/Web Applications / Static vs Dynamic Website / Web Browser /
Sachin Yadav
 
PDF
Full Stack Development Course in Gurgaon
digitallynikitasharm
 
PPTX
Curtin University Frontend Web Development
Daryll Chu
 
PDF
Fccwc326
Shannon Gallagher
 
PDF
Web development Hackathon
Al Sayed Gamal
 
PDF
GDG-USAR Tech winter break 2024 USAR.pdf
raiaryan174
 
PDF
Week 05 Web, App and Javascript_Brandon, S.H. Wu
AppUniverz Org
 
PDF
Practical Web Development 1st Edition Wellens Paul
baqrliminola
 
PPTX
14bb9a40-a45f-4cd7-8c59-30df2382659b.pptx
kurapativyshnavi3
 
PDF
Fundamental Internet Programming.pdf
Ashenafi Workie
 
PPT
Intro to-html-backbone
zonathen
 
PDF
A Complete Web Development Guide For Non-Technical Startup Founder
img lift
 
PPTX
What Are The Different Types Of Web Technologies.pptx
JuliusECatipon
 
PPTX
3. WEB TECHNOLOGIES.pptx B.Pharm sem 2 CAP
Vedika Narvekar
 
PDF
Web engineering notes unit 3
inshu1890
 
PPT
WebDev Simplified Day 1 ppt.ppt
SarikaPurohit1
 
PDF
nothing to share right now here. kindly lkeave this section right away thankuu
NitinSingh378454
 
221c82d4-5428-4047-8558-0467b34083e8.pptx
kurapativyshnavi3
 
eswar.pptx
tonega7852
 
Vskills angular js sample material
Vskills
 
Website/Web Applications / Static vs Dynamic Website / Web Browser /
Sachin Yadav
 
Full Stack Development Course in Gurgaon
digitallynikitasharm
 
Curtin University Frontend Web Development
Daryll Chu
 
Web development Hackathon
Al Sayed Gamal
 
GDG-USAR Tech winter break 2024 USAR.pdf
raiaryan174
 
Week 05 Web, App and Javascript_Brandon, S.H. Wu
AppUniverz Org
 
Practical Web Development 1st Edition Wellens Paul
baqrliminola
 
14bb9a40-a45f-4cd7-8c59-30df2382659b.pptx
kurapativyshnavi3
 
Fundamental Internet Programming.pdf
Ashenafi Workie
 
Intro to-html-backbone
zonathen
 
A Complete Web Development Guide For Non-Technical Startup Founder
img lift
 
What Are The Different Types Of Web Technologies.pptx
JuliusECatipon
 
3. WEB TECHNOLOGIES.pptx B.Pharm sem 2 CAP
Vedika Narvekar
 
Web engineering notes unit 3
inshu1890
 
WebDev Simplified Day 1 ppt.ppt
SarikaPurohit1
 
nothing to share right now here. kindly lkeave this section right away thankuu
NitinSingh378454
 
Ad

Recently uploaded (20)

PDF
AI TECHNIQUES FOR IDENTIFYING ALTERATIONS IN THE HUMAN GUT MICROBIOME IN MULT...
vidyalalltv1
 
PPTX
Knowledge Representation : Semantic Networks
Amity University, Patna
 
PDF
Data structures notes for unit 2 in computer science.pdf
sshubhamsingh265
 
PPTX
Biosensors, BioDevices, Biomediccal.pptx
AsimovRiyaz
 
PDF
Electrical Machines and Their Protection.pdf
Nabajyoti Banik
 
PPTX
Fundamentals of Quantitative Design and Analysis.pptx
aliali240367
 
PDF
methodology-driven-mbse-murphy-july-hsv-huntsville6680038572db67488e78ff00003...
henriqueltorres1
 
PDF
WD2(I)-RFQ-GW-1415_ Shifting and Filling of Sand in the Pond at the WD5 Area_...
ShahadathHossain23
 
PDF
Digital water marking system project report
Kamal Acharya
 
PPTX
Final Major project a b c d e f g h i j k l m
bharathpsnab
 
PDF
Bayesian Learning - Naive Bayes Algorithm
Sharmila Chidaravalli
 
PPTX
Alan Turing - life and importance for all of us now
Pedro Concejero
 
PPTX
Introduction to Internal Combustion Engines - Types, Working and Camparison.pptx
UtkarshPatil98
 
PDF
20ES1152 Programming for Problem Solving Lab Manual VRSEC.pdf
Ashutosh Satapathy
 
PPTX
Numerical-Solutions-of-Ordinary-Differential-Equations.pptx
SAMUKTHAARM
 
PDF
Module - 4 Machine Learning -22ISE62.pdf
Dr. Shivashankar
 
PPT
New_school_Engineering_presentation_011707.ppt
VinayKumar304579
 
PPTX
Basics of Electrical Engineering and electronics .pptx
PrabhuNarayan6
 
PDF
3rd International Conference on Machine Learning and IoT (MLIoT 2025)
ClaraZara1
 
PPT
Footbinding.pptmnmkjkjkknmnnjkkkkkkkkkkkkkk
mamadoundiaye42742
 
AI TECHNIQUES FOR IDENTIFYING ALTERATIONS IN THE HUMAN GUT MICROBIOME IN MULT...
vidyalalltv1
 
Knowledge Representation : Semantic Networks
Amity University, Patna
 
Data structures notes for unit 2 in computer science.pdf
sshubhamsingh265
 
Biosensors, BioDevices, Biomediccal.pptx
AsimovRiyaz
 
Electrical Machines and Their Protection.pdf
Nabajyoti Banik
 
Fundamentals of Quantitative Design and Analysis.pptx
aliali240367
 
methodology-driven-mbse-murphy-july-hsv-huntsville6680038572db67488e78ff00003...
henriqueltorres1
 
WD2(I)-RFQ-GW-1415_ Shifting and Filling of Sand in the Pond at the WD5 Area_...
ShahadathHossain23
 
Digital water marking system project report
Kamal Acharya
 
Final Major project a b c d e f g h i j k l m
bharathpsnab
 
Bayesian Learning - Naive Bayes Algorithm
Sharmila Chidaravalli
 
Alan Turing - life and importance for all of us now
Pedro Concejero
 
Introduction to Internal Combustion Engines - Types, Working and Camparison.pptx
UtkarshPatil98
 
20ES1152 Programming for Problem Solving Lab Manual VRSEC.pdf
Ashutosh Satapathy
 
Numerical-Solutions-of-Ordinary-Differential-Equations.pptx
SAMUKTHAARM
 
Module - 4 Machine Learning -22ISE62.pdf
Dr. Shivashankar
 
New_school_Engineering_presentation_011707.ppt
VinayKumar304579
 
Basics of Electrical Engineering and electronics .pptx
PrabhuNarayan6
 
3rd International Conference on Machine Learning and IoT (MLIoT 2025)
ClaraZara1
 
Footbinding.pptmnmkjkjkknmnnjkkkkkkkkkkkkkk
mamadoundiaye42742
 
Ad

Full stack devlopment using django main ppt

  • 1. About Coursera DEPARTMENT OF COMPUTER ENGINEERING INDUSTRIAL TRAINING PRESENTATION “Full Stack Web Development” PRESENTED BY:- SUDHANSHU VIJAY REG NO. :- PIET18CS139 YEAR :- 4th Introduction
  • 2. About Coursera Full Stack Development Coursera Inc. is an American massive open online course provider founded in 2012 by Stanford University computer science professors Andrew Ng and Daphne Koller. Coursera works with universities and other organizations to offer online courses, certifications, and degrees in a variety of subjects.
  • 3. Full Stack Development Stages of Full Stack • Full stack development: It refers to the development of both front end(client side) and back end(server side) portions of web application. • Full stack web Developers: Full stack web developers have the ability to design complete web application and websites. They work on the frontend, backend, database and debugging of web application or websites.
  • 5. Backend Introduction to Django Back end: It refers to the server-side development of web application or website with a primary focus on how the website works. It is responsible for managing the database through queries and APIs by client- side commands. This type of website mainly consists of three parts front end, back end, and database.
  • 6. Introduction to Django Pillars Of Django Definition : » “Django” is basically a web framework created using python. » “Django” is mainly use to create Backend of a website by mixing python programming in HTML, CSS, JS etc. » “Django” provides a platform to develop web applications rapidly and more securely.
  • 8. Django Model Django View Introduction To Django Models Advantages Of Django Models Steps To Create Django Models
  • 9. Django View Django Templates Creating Django Views Class Based View V/S Function Based Views Django Views Component
  • 10. Django Templates Key Features What Are Django Templates? Steps to Create Django Templates Django Template Language
  • 11. Key Features Frontend Some of the busiest sites on the planet use Django’s ability to quickly and flexibly scale to meet the heaviest traffic demands. Exceedingly Scalable Django takes security seriously and helps developers avoid many common security mistakes, such as SQL injection, cross- site scripting, cross-site request forgery and clickjacking. Its user authentication system provides a secure way to manage user accounts and passwords. Reassuringly Secure Django includes dozens of extras you can use to handle common Web development tasks. Django takes care of user authentication, content administration, site maps, RSS feeds, and many more tasks — right out of the box. Fully Loaded Django was designed to help developers take applications from concept to completion as quickly as possible. RidiculouslyFast
  • 12. Frontend What is HTML? Frontend: It is the visible part of website or web application which is responsible for user experience. The user directly interacts with the front end portion of the web application or website.
  • 13. What is HTML? Explanation of basic structure HTMLis the standard markuplanguage for Web pages. HTMLwas invented by Tim Berners-Lee. It is used for creating web pages, which are displayedon world wide web. It needs text editors likenotepad, Sublime, ect. to write the code.
  • 14. Explanation of basic structure Types of elements in html •The <!DOCTYPE html> declaration defines that this document is an HTML5 document. •The <html> element is the root element of an HTML page. •The <head> element contains meta information about the HTML page. •The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab). •The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • 15. Types of elements in html What is CSS? An HTML element is defined by a start tag, some content, and an end tag: <tagname>Content goes here...</tagname> <h1>My First Heading</h1> 1. CONTAINER TAG: Requires opening and closing both.<b>HTML</b> 2. EMPTY TAG: Doesn't require a closing tag.Ex,<br>
  • 16. What is CSS? Types of style sheets • CSS stands for Cascading Style Sheets • CSS is the language we use to style an HTML document. • CSS saves a lot of work. It can control the layout of multiple web pages all at once.
  • 17. Types of style sheets Advantages of CSS There are three ways of inserting a style sheet: 1. External CSS- It is separate style file used to define all style rules which is saved with extension .css. 2. Internal CSS- In this, we define the style rules in the same html page, where we wants to style. 3. Inline CSS- We can define the style rule for a single tag in html page itself.
  • 18. Advantages of CSS What is JavaScript? • It save time to develop web pages. • It is easy to maintain. • It supports all type of web standers and browsers. • CSS efficiently works with search engines. • CSS has wide variety of tags.
  • 19. What is JavaScript? JavaScript Example JavaScript is the world's most popular programming language. JavaScript is an object-based scripting language which is lightweight and cross-platform. It is a case-sensitive language. JavaScript is a language that works with html to enhance web pages and to make them interactive.
  • 20. JavaScript Example How to write code Explanation of the code: The text/javascript is the content type that provides information to the browser about the data. The document.write() function is used to display dynamic content through JavaScript. <script type="text/javascript"> document.write(" JavaScript is a simple language for learners"); </script>
  • 21. How to write code About Projects Apply in head section •<html> • <head> • <script type="text/javascript"> • function msg(){ • alert("Hello Javatpoint"); • } • </script> • </head> • <body> • <p>Welcome to JavaScript</p> • <form> • <input type="button" value="click" onclick="msg()"/> • </form> • </body> • </html> Through external flie •<html> •<head> •<script type="text/javascript" src="message.js"></script> •</head> •<body> •<p>Welcome to JavaScript</p> •<form> •<input type="button" value="click" onclick="msg()"/> •</form> •</body> •</html> function msg(){ alert("Hello"); } Message. js