Build a web app fast: Python, HTML & JavaScript resources

Wanna build a web app fast? Know a little bit about programming but want to build a modern web app using well-supported, well-documented, and universally accessible languages? You’ll love these Python, HTML/CSS, and JavaScript resources.

I’ve been sharing these documents with friends who ask me, “I want to start programming and build a web app, where do I start?”. These resources have also been useful to existing programmers who know C, C++ or Java, but who want to embrace dynamic and web-based programming.

Python Resources

Python is the core backend and web programming language used at Parse.ly. It also happens to be a quickly-growing language with wide adoption in the open source community, and it is a very popular choice for web startups. (Update from the future in 2021: Python rose to the #1 spot in a popular programming language index; it’s safe to say it is now one of the most widely-used languages across all use cases.)

I’ve written a blog post with some original materials for learning Python, import this — learning the Zen of Python with code and slides.

This is a good starting point, but you may also find these resources very helpful:

  • For absolute beginners, “Learn Python the Hard Way”. This teaches Python using a series of programming examples, but it really assumes you have no programming background whatsoever. After going through the examples in LPTHW, it may be a good idea to supplement your understanding with Think Python.
  • For existing programmers, “Dive into Python 3”. This teaches Python from the starting point that you have already programmed in a mainstream language like C or Java, and want to know what makes Python really cool. Similar audience to my “Zen of Python” slides. At this point, you may be curious about whether to learn Python 2.7 or Python 3; the quick answer is that Python 3 is preferred. See Python2orPython3 on Python wiki to see the differences.
  • For advanced programmers, “Python Essential Reference, 4th Edition”. Unfortunately, this book costs money, but it’s basically the best book on Python on the market, and it’s very comprehensive for Python 2.7. But it’s very dense and weighs in at 717 pages, so this is only for those who want to go deep on Python. (Update from the future in 2021: The author of “Python Essential Reference” has released an updated rewrite of his book, that shrinks its size and focuses on Python 3, which is called Python Distilled. Give that one a try if you want to skip over Python 2.7!)
  • For cheap advanced programmers, “Official Python Tutorial”. Though the Python tutorial doesn’t have the best narrative style nor the best real-world examples, for advanced programmers, it will teach the reality of the language in a comprehensible way. And it is kept up-to-date with new Python releases. And, it’s free.

HTML/CSS Resources

In order to build up web applications, you’ll need to write your front-ends in HTML and CSS. These technologies have evolved over the years, but the basic principles remain from when they emerged nearly a decade ago. HTML is the markup language of the web, and you’ll see a lot of tutorials refer to HTML4, which is basically the markup standard all web browsers and websites work off. Don’t be confused by the HTML5 moniker, which often refers to much more than simply the markup — usually, it’s referring to a set of JavaScript APIs that are becoming standard in browsers, along with enhanced audio/video support and a few new “semantic markup” tags that have been added.

Since HTML is basically useless without CSS, you can get by with a short tutorial on HTML and then more advanced tutorials on CSS styling. Here’s what I recommend.

Learn the basics of HTML from MDC’s Introduction to HTML and Wikipedia’s page on HTML. This is a rare case where using Wikipedia is actually a perfect way to get the right background because half the battle with understanding HTML is understanding its history.

An excellent new guide to HTML & CSS together has been published by Shay Howe in 2013.

These look like a great first stop.

You can also use these dedicated resources for CSS specifically:

  • For absolute beginners: Use W3C’s official tutorial on Starting with HTML + CSS. This was written all the way back in 2004, but provides the basics with screenshots and real code examples, so is a great way to get started.
  • For existing programmers: Mozilla has done a great job putting together a quick and readable tutorial that gives you the basics at a glance.
  • For advanced programmers: You’ll want to buy the best book on the subject, CSS Mastery. It has the best explanation of the box model and browser rendering engine’s that I’ve seen, and covers all the edge cases nicely.
  • For cheap advanced programmers: You’ll need to look over the MDC (Mozilla) CSS Reference. Pay particularly close attention to articles on the Box Model and the Visual Formatting Model.

JavaScript Resources

Aside from Python, every Parse.ly engineer also knows JavaScript, even if it is only begrudgingly. For better or for worse, JavaScript has become the world’s most popular programming language.

JavaScript is definitely the language of the web. It is also a language that has, over the last few years, developed a nice bit of great documentation for learning the language. Here are some resources you can use to get up to speed:

  • For absolute beginners: “Eloquent JavaScript” introduces you to both modern programming techniques and JavaScript at the same time. It is thus a great book for beginners. There is also a print version available.
  • For existing programmers: The Mozilla Developer Network (MDN) contains the web’s best and most official documentation of HTML, CSS, and JavaScript. This guide, “A Re-Introduction to JavaScript”, presents the language to an audience that already knows how to program, and focuses specifically on the “gotcha” parts of the language.
  • For advanced programmers: A must-read is the short (but costly) “JavaScript: The Good Parts”. Douglas Crockford basically reintroduced the world to JavaScript as a modern programming language. He is a bit of a curmudgeon when it comes to programming style, but this makes sense since he is also the author of JSLint, an important tool used in JS development for static code checking.
  • For cheap advanced programmers: Douglas Crockford, author of the above “Good Parts” book, has also given a series of public video lectures on JavaScript at Yahoo! headquarters. These are freely available online and actually present much of the same content in “Good Parts”, just in a condensed form. Warning for the cheap: though the videos are very good, the book goes into more depth and spends less time on the history of the language. Also, Matt Might’s JavaScript, Warts and workarounds is an excellent summary to some of the most important “bad parts” of JavaScript.

JavaScript “frameworks”

Though knowing JS is important to do anything web-facing, you can also leverage some frameworks to help you out. The ones I recommend are the venerable jQuery JavaScript library and the Twitter Bootstrap HTML/CSS/JavaScript components. See:

jQuery adds common utilities for DOM manipulation, HTTP/JSON server requests, basic animations, and dynamic CSS.

Bootstrap builds on jQuery and adds a common, simple UI component library using pure HTML, CSS and JavaScript. This provides a grid system for layout; nicely-designed stylesheets for typography, tables, lists, and buttons, plus JavaScript components that add dynamic behavior such as tabs, dropdowns, modal dialogs, navigation bars, and more. (Update from the future in 2021: As of Bootstrap 5, it’s no longer required to use jQuery with Bootstrap, but it’s still perfectly well-supported, so feel free to do so!)

Note on JavaScript frameworks

This post was originally written in 2012 and updated over the years. I have made a strong effort over the years to ensure the suggestions in this post are timeless and work well regardless of when you are beginning your journey of learning web development.

2017-2018 was an inflection point for JavaScript frameworks in the open source community. You will read a lot in modern tutorials saying that, instead of jQuery and Bootstrap, you should use something like React or Vue.js. If you are an HTML, CSS, and JavaScript beginner, I strongly recommend against this.

These frameworks are complex, even for advanced programmers like me. They are primarily built to support a style of web development known as Single-Page Applications. This is an important frontend development practice and will be increasingly important as more and more web applications are built, but it won’t replace web sites. SPAs are overkill for building simple web sites and web applications. And, they are hard to learn for beginners.

If you move on from making websites to making full-fledged web applications, there will be a straightforward level-up path, and you won’t have wasted time learning about how HTML, CSS, and JavaScript work. Especially for making basic websites with dynamic behavior, it’s still extremely common to use “simple” JavaScript with jQuery and Bootstrap, and those sites are easier to reason about, to test, and to deploy. Don’t be confused by the modern tutorials that send you down the SPA rabbit hole.

One other concern related to this regards which version of JavaScript to use on modern websites, to ensure good browser compatibility. The modern browser compatibility picture is much better than the 2012 one. However, the modern recommendation is to use a version of JavaScript known as “ECMAScript 5” (ES5), whose browser compatibility is summarized here. Essentially, ES5 is supported in Microsoft Internet Explorer 11 and later, as well as every other major browser platform (Chrome, Safari, Firefox, etc.) Thanks to a patch that Microsoft released in 2016 that urged IE8, IE9, and IE10 users to upgrade to IE11, that is the only “old browser” you likely need to worry about. Meanwhile, Microsoft is also pushing its users in the direction of its more modern browser engine, Microsoft Edge, which is the default browser of Windows 10 and Windows 11. (Update from 2021: IE11 will likely be a thing of the past in mid-to-late 2022, since Microsoft has announced that “the Internet Explorer 11 desktop application will be retired and go out of support on June 15, 2022”.)

Versions of JavaScript that were released in the mid-2010s — which go by the monikers like “ES6”, “ES2016”, and “ES2017” — should only be used if you use a Babel build toolchain, which is beyond the scope of this article. (Update from the future: If you are interested in a tangent on this topic, you can check out my other post, “JavaScript: The Modern Parts.”) This is because JavaScript, as a language, is now evolving with annual releases, without any consideration for backwards compatibility to older browsers, except insofar that those browsers can be targeted via a code translation technique known as transpilation. However, if you use the new features without this toolchain in place, you will write code that will break on a large percentage of your users. So, you can safely stick with ES5 while you’re still in learning mode.

OK: take a deep breath. You’re learning the building blocks of a modern web application: backend / frontend programming languages and their associated code libraries. Let’s aim to solidify this knowledge using modern web frameworks.

Putting it all together: Python web frameworks

If you already know the basics of Python, HTML/CSS, and JavaScript, there are only a few more things you need to know to get basic web applications working. These are: view functions, template engines, databases, and a web server.

To understand the needs for these, let’s think about what happens when you type a search into Google’s search box. Google has some code running on its servers that retrieves pages, related searches, and advertisements that match your query (e.g. “best Python web frameworks“). It then renders a search engine result page that shows ads and documents that matched your query as an HTML/CSS page with a little JavaScript.

Put simply, a view function lets a web developer respond to user queries and interactions with dynamically rendered response pages. Typically, a view function will query a database, which is where persistent data may live that the user is aiming to retrieve. There are a slew of database technologies and depending on the requirements of a web application, they may combine several database technologies to respond to requests. It will then take the retrieved information and render it into a page that the user can view. This rendering process is the job of the template engine, which is able to plug dynamic values into page templates. Google likely has a single result page template, but depending on your query (and potentially, user profile data), the template will be populated with different results and advertisements. Finally, the web server is a piece of software that receives the requests (e.g. responds to google.com and to the URL for searching), executes the view functions, and returns the responses to the browser. The web server is like the glue that binds everything together.

To summarize: view functions are bits of Python code that are bound to handling web requests and doing something in response. Template engines are systems that allow rendering dynamic HTML/CSS/JavaScript depending on data accessed by the view function. Databases are stores of persistent data that are typically queried by view functions and passed along to template engines for plugging those values into parts of the page. And web servers put it all together.

Now that you understand these basics, you have to face an unfortunate truth: lots of different web frameworks exist that provide this functionality.

Since you only want to develop web apps fast, I’m only going to briefly cover three of these frameworks, and their relative trade-offs. These are: Django, Tornado, and Flask.

Django

Django is, by far, the most popular web framework for Python. It has excellent documentation and is very opinionated in how you should structure your web application. There are also a number of books written about it and a slew of open source modules and extensions.

Django has been used for a number of use cases: enterprise software-as-a-service web applications; consumer-facing, page-oriented software; rapid web application prototypes; content management systems; the list goes on and on.

Let’s evaluate it on the important functionality areas above:

  • View Functions: They are defined either as plain Python functions or classes defined inside modules, typically a module called “views.py” living within a Django “application”, which is nothing more than a Python package that contains that file. They are mounted to certain URLs using a special URL dispatcher using regular expression patterns.
  • Template Engine: Django has its own template engine designed to be user-friendly even to non-programmers. In this respect, the language is somewhat limited and quirky, and does not really re-use your knowledge of Python for templating. Many advanced programmers end up Jinja2 instead of the default template engine, which is officially supported by the Django project as of Django 1.8.
  • Database: Django is very opinionated about your database engine. It was written with the idea that everyone would use a SQL database system of some sort, such as MySQL, Postgres, or SQLite. It provides an object-relational mapper system, or ORM, which makes it easy to define new data storage objects through what are called Models. It also provides an excellent and customizable automatic admin interface that allows instance data to be created and managed using web-based interface, complete with support for search, filtering, bulk operations, and the like. Despite these advantages, the Django ORM is derided by SQL purists as having a worse architecture than the more widely respected SQLAlchemy project.
  • Web Server: There is no web server bundled in Django, save a development server not meant to be used in production. This leaves it up to you to integrate Django with a number of WSGI-compliant web servers that are out there, including Apache, nginx, gunicorn, and others.

At Parse.ly, we use Django for our main web application, but swap the default template engine for Jinja2. Though we have a Postgres database that benefits a bit from Django’s ORM and admin interface, the bulk of our data is stored in Amazon S3 and Elasticsearch, with Redis used for caching. Thus, we do not leverage the ORM much in our web application. (See my related article, “On multi-form data”, for an explanation of why we combine databases in this way.) Further, for other parts of our system that require access to our Postgres DB, we sometimes reach for SQLAlchemy. For production deployments, we run Django under nginx and uWSGI.

Tornado

Tornado is a web framework that was released by Facebook after its acquisition of Friendfeed. It has a significant architectural difference from Django in that it is built to solve the C10k problem: the challenge of building web servers to handle thousands of simultaneous web connections at one time. As a result, it bundles its own web server and expects you to use it.

Traditional web frameworks like Django expect that every web request will be handled by a separate web server thread. With thousands of simultaneous connections, this can overwhelm your web server with excessive memory usage, causing the server to slow down or even crash. Tornado is written the same way as other asynchronous web servers like nginx and NodeJS. As a result, it has the same scaling benefits: it can handle thousands of concurrent requests while keeping memory of your server stable.

This architectural difference has ramifications throughout your codebase, however. Tornado view functions tend to look different, and the usage of databases tends to be entirely different, too. So this isn’t the best choice for beginners, unless you know for a fact that your application is going to involve lots of concurrent connections from the get-go. Examples of this include: web chat systems, telephony applications, API servers, mobile backends, or some classes of “real-time” web applications.

Tornado has a nice user guide intended for beginners. The O’Reilly book, Introduction to Tornado, is also an excellent (and quick) read that goes through most the facilities available in the framework.

  • View Functions. Tornado view functions are implemented via classes known as Handlers, which are subclasses of tornado.web.RequestHandler. Similarly to Django, there is a URL dispatcher called the Application that maps URL regex patterns to Handlers. Unlike Django view functions, Tornado view functions are not meant to do much work. The reason for this is that all view functions run in a single thread, and thus any long-running code will slow down your entire web server. Instead, the responsibility of the function is to delegate work to other asynchronous services handled by Tornado’s server. The primary candidate here is to have Tornado make an asynchronous HTTP request to some other service. There are also some databases and database drivers that are written in an “asynchronous” style which you can use reliably with Tornado, but in general, the idea is to avoid database queries in your view functions.
  • Template Engine: The approach to Tornado’s template engine is minimal and meant to optimize for your existing knowledge of Python. Templates are just HTML/CSS/JavaScript with special sequences that embed Python expressions inside them. Their template overview describes this well, and their reference page goes into more detail.
  • Database: As mentioned earlier, Tornado doesn’t expect your view functions to hit a database often since this could slow your entire web server down. As a framework, it expects data querying to be “your problem”. Instead, I have seen most people put Tornado in front of other HTTP services that might be written using blocking frameworks like Django or Flask. I have also seen usage of async-friendly data stores such as MongoDB and Elasticsearch. Elasticsearch uses HTTP as the client interface, so it is easy to hit these directly using Tornado’s built-in HTTP client. MongoDB has an official asynchronous driver called Motor, meant for use specifically with Tornado. Async drivers continue to become more common, especially thanks to the work in Python 3 on asyncio and Tornado’s asyncio bridge; for example, Tornado’s blog engine example uses psycopg2 directly, which, as of modern versions, supports async. For databases whose drivers do not support async operation with an event loop, Tornado provides a mechanism to automatically leverage thread pools via the tornado.concurrent module and the @run_on_executor decorator.
  • Web Server: Tornado bundles its own web server, which is perhaps the most powerful and convenient aspect of the framework. The beautiful thing about this is that the exact same web server you run locally for development is the one you can run in production.

Flask

Flask is the simplest web framework of these, and it is just as popular, both for rapid prototypes and for production use cases. The author of the framework has a PyCon presentation explaining its motivation.

Funny enough, it was built out of an April Fool’s joke where the author “zipped up” two of his existing projects — Jinja2 (template engine) and Werkzeug (HTTP library) — and glued them together with a small Python file, thus declaring it a new web “microframework”.

The joke became a real open source project which is notable for its simplicity, respect of Python’s facilities, strong documentation, and ease of use. Due to its reliance on existing, high-quality Python modules, the actual web framework is only approximately 1,000 lines of code. The quickstart application requires only a single Python file which, when run, gives you a working development web server that renders a dynamic response. For all these factors and more, it is my preferred web framework for new web applications, especially those that wouldn’t benefit from Django’s admin interface or Tornado’s concurrent request scaling.

  • View Functions: View Functions are as simple as it gets in Flask. They are simply plain Python functions. They are mounted to URL patterns using a Python Decorator called route. This includes support for Variable Rules which tend to be much more comprehensible compared to regex-based routes as in Django and Tornado. Similarly to Django, view functions in Flask are where the bulk of your application’s logic will go, including things like database queries.
  • Template Engine: Flask is meant to be used with Jinja2, an excellent and well-documented template engine that is also widely used by Django developers as a drop-in replacement for that framework’s template engine. It strikes a balance between Django’s template language, meant to be understood by non-programmers (see Template Designer Documentation) while also having good interoperability with Python code and support for a wide range of control structures.
  • Database: This is the least opinionated part of the Flask framework; it makes no recommendation as to what database to use, considering this to be beyond the scope of a core web framework. That said, the Flask Extension Registry contains some modules that help integrate Flask with this or that database technology, such as Flask-SQLAlchemy (provides support for all SQL data stores) and Flask-PyMongo (provides support for MongoDB connections). However, you can just easily query databases by simply importing appropriate Python client libraries which often exist for that particular DB — and that is, indeed, “The Flask Way” of doing this.
  • Web Server: Though no web server is bundled in the framework, it can be deployed even more easily than Django to any number of WSGI-compliant web servers, as described in the Deployment Options section of their documentation. The built-in debug-mode development server is extremely handy for local development, supporting full stack traces and even an embedded Python interpreter for inspecting the state of variables at the time of the web server crash.

I also want to mention one extension available in the Flask community, that I personally think is especially helpful for when you begin learning web development. This is Frozen-Flask. The idea behind Frozen-Flask is that, for many websites, you want the benefit of code re-use that comes from a template engine like Jinja, but you don’t necessarily need a database. If your website is entirely content, just structured and organized with common styles and common JavaScript, then it fits this pattern. So, rather than using a Python-based web server in production, we can use Python only during development. We will use Python and Flask as a code generator, to generate a bunch of static HTML, CSS, and JavaScript code. And then we’ll deploy that static code to production, as plain files.

This gives you the benefit of local development with a Flask web server, where code changes to your templates and view functions will be reflected instantaneously. But, then, when you are ready to deploy your website, you can “freeze” all of your pages (render all your templates as plain HTML files), and deploy those static pages to a simple web server (e.g. nginx) or content delivery network (e.g. GitHub Pages, Cloudflare Pages, or Netlify).

Steven Loria has a great example Flask project for this, as well as a nice blog post that describes the setup.

Conclusion: pick a stack

This article has lots of resources that can help you pick a stack, but I have some opinions about how you can get started easily.

  • Use Python 3. The Python community has mostly moved on from Python 2.7.x to Python 3.x versions. Flask is fully Python 3 compatible, Django has made Python 3 the default language of its documentation, and Tornado 4.0+ include Python 3 specific features that make it easier to use the framework with Python 3’s new async and await keywords. What’s more, mostly all of Python’s most popular projects are ported. (For more background, here’s a link from the future in 2021: Python 3 is here, and the sky is not falling.) Python 3… just do it!
  • Target simple server-side-rendered HTML and CSS pages. The goal of your web application is to generate HTML pages that make use of CSS for styling and JavaScript for on-page behavior. Though you’ll need to be aware of HTML5 and CSS3 eventually, the lion’s share of web pages today target earlier versions of these standards (such as HTML4 and CSS2), which is perfectly OK. The changes to HTML and CSS have been evolutionary and incremental. You can also avoid the various preprocessors for CSS, such as Sass, SCSS, or LESS — those sorts of advanced developer techniques will come later. Take it slow; one thing builds on another. The other main thing to avoid is the world of single-page applications (SPAs) or progressive web applications (PWAs), two advanced JavaScript techniques for rendering web browser content dynamically that rely extensively on the browser’s dynamic DOM and runtime JavaScript environment, rather than on the browser’s standard HTML and CSS page response rendering capabilities. By avoiding these, you’ll keep it simple, and you’ll find it easier to learn web development in bite-size chunks.
  • Use jQuery and Bootstrap. You’ll hear a lot of developers nay-saying jQuery, but it’s still one of the most widely installed JavaScript libraries on the entire web, and its approach to dynamic page manipulation has been ingrained everywhere. You’ll also run across jQuery code commonly, especially in open source plugins and example code. Among JavaScript and CSS frameworks, jQuery and Bootstrap will cover the largest number of use cases while having the most available online tutorials and examples. As I mentioned above, you can save React, Vue, and other “SPA-style” frameworks for much later in your learning path.
  • Start with Flask, switch as necessary. If you are just getting started with web development, you’ll be able to assemble an application with the above components easily in Flask. You may not know yet whether your application requires thousands of concurrent requests (as provided by Tornado), or, whether you would benefit from an extensive ecosystem of open source plugins; a full-featured data model for a SQL database; or, an auto-generated administrative interface (all benefits in Django). So defer those decisions to when you are better able to make them in an informed and careful way.
  • Pick the simplest database possible, upgrade later. Since Flask doesn’t impose any database on you, you can choose to pick the simplest database that could possibly work. This even includes the simplest option: “no database at all”, e.g. a static website with Frozen-Flask. But if your web application needs a database, some good candidates for your early days are SQLite, MongoDB, or Redis. As you start to understand your requirements more, you may need to upgrade to a full-fledged SQL RDBMS such as Postgres or a full-text index such as Elasticsearch. But you won’t know for sure until you fully understand the form of your data, so why lock into heavyweight solutions up-front?
  • Pick a host that matches your system administration skill level. You will need a Linux server available to you to deploy your app, and for that I suggest simple hosting providers such as DigitalOcean (works on the “VPS” or “VM” model, which means you need to know quite a bit about Linux system administration) or Opalstack (works on the “shared hosting model”, which means you don’t have to hand-configure, nor maintain, your own Linux server, but you still get full ssh access). You will hear a lot of people mention Amazon Web Services (AWS) or Google Cloud Platform (GCP), but I recommend you only switch to AWS or GCP later, once you understand their quirks and tradeoffs vs simpler providers (as well as benefits). Setting your server up may require some knowledge of UNIX and system administration which is beyond you. If that is the case, you should definitely start with a shared hosting provider like Opalstack, since it has good Python support and pre-fabricated deployment setups for Django, uWSGI, and nginx available. (BTW, as of 2024, I’m still happily using DigitalOcean and Opalstack myself. Also, a note for old-timers: Opalstack was created by the same team that originally brought you Webfaction, one of the most popular original Django shared hosts.) If you don’t mind paying a premium to have someone else host all your infrastructure for you, you may also want to consider a PaaS provider such as Heroku or Google Cloud Run. Personally I don’t recommend these services for economic and complexity reasons, but they have many proponents.
  • Develop locally, deploy simply. Each of these web frameworks have workflows for developing locally. You should use those until you get comfortable with the frameworks. That said, the day will come where you want to see your web application live on a real web server. For that moment, if you are developing with Django or Flask, I recommend you deploy to uWSGI behind nginx. Flask has docs for this, so does Django. To actually push your code to your servers, I recommend you start with extremely simple UNIX tools: rsync and ssh. With rsync, you can copy your Python project quickly to your server, and thanks to rsync’s incremental copy, it will only copy changed files. For example: rsync -Pav myproject/ remoteserver:myproject/. With ssh, you can execute remote commands on your server such as ssh remoteserver sudo restart nginx to restart your nginx web server. Once you start to need fancier deployment options, you can upgrade to Fabric, a Python-based deployment tool, replacing your rsync command with project tools and replacing your ssh commands with calls to run().
  • Don’t develop on Windows. This is unfortunate but true. If you really must use Windows, I recommend you read up on the Windows Subsystem for Linux and the support for running Ubuntu under Windows. I don’t have personal experience with this, but, traditionally, the lack of support for UNIX tools on Windows puts it at a significant disadvantage for building modern web applications that deploy to Linux servers running Python. Another option you can investigate is virtualization, which will let you use a third-party application to run a Linux guest virtual machine. These include virtualbox, vagrant, qemu, and VMWare Workstation.

I look forward to seeing the web apps you build and deploy.


Note that for a past PyCon, I converted this blog post into a full-blown tutorial. You can find the code, slides, and video in this post, which covers all my “suggested” technologies, like Twitter Bootstrap, jQuery, Flask, Jinja2, MongoDB, Fabric, nginx, supervisor, uWSGI, etc. Despite the age of this tutorial, all of the technologies used are still well-maintained (just at more modern versions) and are still solid production choices.

Note also that in recent years, I started playing around with the piku open source project, and the extensive README.md I published on GitHub via the webappfast-piku repo explains how you can use piku to setup a deployment stack similar to the one described in this article, but on your own DigitalOcean VPS or local Linux homelab server. I still think the piku project is cool, but I still use DigitalOcean + Opalstack myself, rather than piku, for my hobby webapp projects as of 2024.

42 thoughts on “Build a web app fast: Python, HTML & JavaScript resources”

  1. excellent compilation of resources. This is exactly at the level I was looking for. I was leaning towards Django, but wil, Flask a deeper look.

    thanks, Andrew for taking the time.
    Ram

  2. This is a great resource. I’ve been looking for a great summary and some firm and well explained advice on which frameworks to start with, and how they fit together.

    Thanks!
    -Aaron

  3. Its refreshing to read a very well written article with an opinion and the facts and arguments to support it. On top of the guide, what a great resource on web technologies. Thanks for sharing!

  4. Nice article. For the beginners I would suggest adding web2py to the list of python frameworks. I am new to web development and like how easy web2py makes many things. To the list of hosts, you can add PythonAnywhere. There servers are a little slow at the moment of writing this, but make it easy to deploy the application on the web.

  5. I appreciate you taking the time to write up this nice article. As I have begun my search into understanding web app development and looking to dive into it myself this has helped piece together the various parts I have already researched and provide great links to resources for learning. Your stack recommendation is very much welcome, I already know a bit of html and css, I’m going to dive into python, although I was surprised to see you recommend flask over django as everyone else has been pushing django hard. I’ll have to research these frameworks even more.

    I don’t recall seeing anything on Google App Engine, a similar service to Amazon EC2 and Heroku except it starts out free and Google handles all of the tough server side bits like scaling and resource management. It is my understanding Google App Engine has an API that you work into your code for database management as opposed to setting up an actual database like SQL, according to Google this is supposed to be easier than creating a database.

  6. Actually, it’s quite possible to develop python web applications on windows, if you set up paths correctly, you’ll be able to use python, pip and all of the other neat functions that come with python.

  7. I would like to disagree with developing on windows.

    I full time develop my Python websites under windows, then deploy through git repos to my linux servers, running nginx for live use

  8. Love the way the tutorial is put together (plus the whole advanced + “cheap advanced” bit). A huge problem with learning web app development is designing or following a definitive + effective study course. This should solve that problem.

    Thanks

  9. Python 3 is ready 🙂 In fact, its so ready that its already on version 3.3 with lots of goodies such as improved generators (yield from)

    Tornado is already implemented for Python 3. Use it!

  10. Exactly what I was looking for. Couldn’t find that many articles about setting up a env for python webapp.

    Thanks for the great article.

  11. Thank you for this write-up. I’m really interested in the development of web apps, but besides understanding JavaScript and Python, I had no idea where to start.

  12. Pingback: Quora
  13. This is a brilliant post, explained with the right choice of words.
    Thanks a lot, you rock!

  14. Really really nice and informative post. I’m doing the web app for my course project, it gives me direction.

  15. Thanks man! I’m starting back into the programming realm and this page REALLY brings me up to speed. Thanks for taking the time in putting this together and thank God I took the time to listen to Him – to get on and meet your site! 😀

  16. Thank you for the great resource! I am developing some resources in Python to be deployed to websites and I need the web information. I will do some research on everything you have suggested. Thanks again.

  17. Thanks so much for your article! Very useful to understand the links between the different components of a web app!

  18. This is a wonderful article, thanks for sharing this!

    I was wondering if the advice to stick to HTML 4 and CSS 2 is still valid in 2015, or if it is time to move on?

    Thanks again!

  19. Thank you for that great overview! I’m just getting started with Flask and SQLite – I’m having difficulties with understanding how to best integrate it with something like Backbone.js, but I’m really pleased with how pleasant Python programming is, compared to PHP.

  20. @Phil It’ll depend on your use case and whether you need full browser compatibility with older browsers, but since HTML5 and CSS3 are evolutions of their predecessors, I think the advice still stands.

  21. @John Jacobson That’s a great question. For beginners today, I would suggest one of Atom (https://atom.io/), VSCode (https://code.visualstudio.com/), or Sublime Text (https://www.sublimetext.com/). I personally use vim, which is very much a “UNIX old-timer” tool. But I also keep Atom around as a good visual text editor with built-in support for everything you’d need.

    I have heard from colleagues that among these, VSCode is very easy on beginners because it has especially good support for everything in the world of HTML, CSS, JavaScript, Python, and terminals, built right into the editor.

Leave a Reply

Your email address will not be published. Required fields are marked *