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.
Continue reading Build a web app fast: Python, HTML & JavaScript resources