Repository navigation
Expand file tree
/
Copy pathweb-development.html
More file actions
191 lines (190 loc) · 13.3 KB
/
Copy pathweb-development.html
File metadata and controls
191 lines (190 loc) · 13.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Matt Makai">
<meta name="description" content="Web development is the catch-all term for activities involved with websites and web apps. Learn more on Full Stack Python.">
<link rel="shortcut icon" href="//static.fullstackpython.com/fsp-fav.png">
<title>Web Development - Full Stack Python</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link href="theme/css/f.min.css" rel="stylesheet">
</head>
<body>
<div style="padding: 0 0 20px 0; margin: 0 0 20px 0; background-color: #22B24C;">
<div class="container">
<p class="banner"><a href="https://www.gumroad.com/l/python-deployments" style="color: #fff">Learning Python web development? Check out the just-updated Guide to Deployments book</a>!</p>
</div>
</div> <a href="https://github.com/makaimc/fullstackpython.com"><img style="position: absolute; top: 0; right: 0; border: 0;" src="/theme/img/fork.png" alt="Fork me on GitHub"></a>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="logo-header-section">
<a href="/" style="text-decoration: none; border: none;"><img src="theme/img/logo.png" height="52" width="52" class="logo-image" style="padding-top: 1px;" alt="Full Stack Python logo"></a>
<span class="logo-title"><a href="/">Full Stack Python</a></span>
</div>
</div>
</div><div class="row">
<div class="col-md-8">
<h1>Web Development</h1>
<p>Web development is the umbrella term for conceptualizing, creating,
<a href="/deployment.html">deploying</a> and operating web applications and
<a href="/application-programming-interfaces.html">application programming interfaces</a>
for the Web.</p>
<h2>Why is web development important?</h2>
<p>The Web has grown a mindboggling amount in the number of sites, users and
implementation capabilities since the
<a href="http://info.cern.ch/hypertext/WWW/TheProject.html">first website</a> went live
in <a href="http://home.cern/topics/birth-web">1989</a>. Web development is the concept
that encompasses all the activities involved with websites and web
applications.</p>
<h2>How does Python fit into web development?</h2>
<p>Python can be used to build server-side web applications. While a
<a href="/web-frameworks.html">web framework</a> is not required to build web apps,
it's rare that developers would not use existing open source libraries to
speed up their progress in getting their application working.</p>
<p>Python is not used in a web browser. The language executed in browsers
such as Chrome, Firefox and Internet Explorer is
<a href="/javascript.html">JavaScript</a>. Projects such as <a href="http://pyjs.org/">pyjs</a>
can compile from Python to JavaScript. However, most Python developers are
write their web applications in a combination of Python, which is executed
on the server side and JavaScript, which is downloaded to the web browser
client and executed there.</p>
<h3>Web development resources</h3>
<ul>
<li>
<p><a href="http://radar.oreilly.com/2014/01/web-application-development-is-different-and-better.html">Web application development is different and better</a>
provides some context for how web development has evolved from writing
static HTML files into the complex JavaScript client-side applications
produced today.</p>
</li>
<li>
<p>While not Python-specific, Mozilla put together a
<a href="https://developer.mozilla.org/en-US/Learn">Learning the Web</a> tutorial
for beginners and intermediate web users who want to build websites.
It's worth a look for general web development learning.</p>
</li>
<li>
<p>The <a href="http://www.evolutionoftheweb.com/">Evolution of the Web</a> visualizes
how web browsers and related technologies have changed over time as well as
the overall growth of the Internet in the amount of data transferred. Note
that the visualization unfortunately stops around the beginning of 2013 but
it's a good way to explore what happened in the first 24 years.</p>
</li>
<li>
<p>Web development involves HTTP communication between the server, hosting
a website or web application, and the client, a web browser. Knowing
how web browsers works is important as a developer, so take a look at
this article on
<a href="https://medium.com/@camaelon/what-s-in-a-web-browser-83793b51df6c">what's in a web browser</a>.</p>
</li>
<li>
<p><a href="https://medium.com/@zengabor/three-takeaways-for-web-developers-after-two-weeks-of-painfully-slow-internet-9e7f6d47726e">Three takeaways for web developers after two weeks of painfully slow Internet</a>
is a must-read for every web developer. Not everyone has fast Internet
service, whether because they are in a remote part of the world or they're
just in a subway tunnel. Optimizing sites so they work in those situations
is important for keeping your users happy.</p>
</li>
</ul>
<h3>Let's get started. What do you want to learn right now?</h3>
<div class="row">
<div class="col-md-4">
<div class="well select-next">
<a href="/web-frameworks.html" class="btn btn-success btn-full"><svg width="28" height="30" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M553 1399l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23l-393 393 393 393q10 10 10 23t-10 23zm591-1067l-373 1291q-4 13-15.5 19.5t-23.5 2.5l-62-17q-13-4-19.5-15.5t-2.5-24.5l373-1291q4-13 15.5-19.5t23.5-2.5l62 17q13 4 19.5 15.5t2.5 24.5zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z" fill="#fff"/></svg></a>
<p class="under-btn">I want to learn how to code a Python web application using a framework.</p> </div>
</div>
<div class="col-md-4">
<div class="well select-next">
<a href="/deployment.html" class="btn btn-success btn-full"><svg width="28" height="30" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1792 640q0 26-19 45l-512 512q-19 19-45 19t-45-19-19-45v-256h-224q-98 0-175.5 6t-154 21.5-133 42.5-105.5 69.5-80 101-48.5 138.5-17.5 181q0 55 5 123 0 6 2.5 23.5t2.5 26.5q0 15-8.5 25t-23.5 10q-16 0-28-17-7-9-13-22t-13.5-30-10.5-24q-127-285-127-451 0-199 53-333 162-403 875-403h224v-256q0-26 19-45t45-19 45 19l512 512q19 19 19 45z" fill="#fff"/></svg></a>
<p class="under-btn">I've built a Python web app, now how do I deploy it?</p> </div>
</div>
<div class="col-md-4">
<div class="well select-next">
<a href="/web-design.html" class="btn btn-success btn-full"><svg width="28" height="30" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M576 576q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1024 384v448h-1408v-192l320-320 160 160 512-512zm96-704h-1600q-13 0-22.5 9.5t-9.5 22.5v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5v-1216q0-13-9.5-22.5t-22.5-9.5zm160 32v1216q0 66-47 113t-113 47h-1600q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1600q66 0 113 47t47 113z" fill="#fff"/></svg></a>
<p class="under-btn">How do I improve an app's user interface?</p> </div>
</div>
</div><div id="mc_embed_signup">
<form action="//mattmakai.us2.list-manage.com/subscribe/post?u=b7e774f0c4f05dcebbfee183d&id=b22335388d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h4>Sign up here to receive an email with major updates to this site and Python tutorials delivered to your inbox once a month.</h4>
<div class="row">
<div class="col-md-9">
<input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b7e774f0c4f05dcebbfee183d_b22335388d" tabindex="-1" value=""></div>
</div>
<div class="col-md-3">
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue';"></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-offset-1 col-md-3" id="sidebar">
<div class="panel panel-success">
<div class="panel-body">
<a href="http://www.deploypython.com/"><img src="//static.fullstackpython.com/fsp-deployment-guide.png" alt="The Full Stack Python Guide to Deployments" width="100%"></a>
<p style="font-size: .8em; margin-top: 10px;">Searching for a complete, step-by-step deployment walkthrough? Learn more about <a href="http://www.deploypython.com/">The Full Stack Python Guide to Deployments book</a>.
</p>
</div>
</div><div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-head">Email Updates</h3>
</div>
<div class="panel-body">
<div id="mc_embed_signup">
<form action="//mattmakai.us2.list-manage.com/subscribe/post?u=b7e774f0c4f05dcebbfee183d&id=b22335388d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h5>Sign up to get a monthly email with Python tutorials and major updates to this site.</h5>
<input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b7e774f0c4f05dcebbfee183d_b22335388d" tabindex="-1" value=""></div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue'; margin-top: 5px;">
</div>
</form>
</div>
</div>
</div> <div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">Chapters</a></h3>
</div>
<div class="list-group">
<a href="/introduction.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>1. Introduction</a><a href="/development-environments.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>2. Development Environments</a><a href="/python-programming-language.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>3. Core Language</a> <a href="/web-development.html" class="list-group-item smaller-item active" style='font-family: "Helvetica Neue",sans-serif;'>» 4. Web Development</a>
<a href="/web-frameworks.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>5. Web Frameworks</a><a href="/data.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>6. Data</a><a href="/application-programming-interfaces.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>7. Web APIs</a><a href="/deployment.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>8. Deployment</a><a href="/testing.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>9. Testing</a><a href="/change-log.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>13. Change Log</a><a href="/table-of-contents.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",san-serif;background-color:#22B24C; color: #fff;'>...or <span style="border-bottom: 1px dotted;">view the full table of contents</span>.</a> </div>
</div>
<div class="panel panel-success">
<div class="panel-heading"><h3 class="panel-head">Web Development</h3></div>
<div class="panel-body">
Major updates are tweeted via
<a href="https://twitter.com/fullstackpython">@fullstackpython</a>.
<hr/>
Need more detailed tutorials than you see here?
<a href="http://www.deploypython.com/">Learn more about The Full Stack Python Guide to Deployments book.</a>
</div>
</div>
</div></div>
<hr/>
</div>
<div class="container">
<div class="footer pull-right">
<a href="http://www.mattmakai.com/" class="underline">Matt Makai</a>
2016
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-19910497-7', 'auto');
ga('send', 'pageview');
</script>
<script type='text/javascript'>
var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, {'hitCallback': function () { document.location = url; } }); }
</script>
</body>
</html>