Table of Contents Show
The goal of this guide is to help anyone teach themselves to build a modern web application. More specifically, Iâm writing for people who have never programmed at all before, people who know some HTML and CSS, and Computer Science students who have yet to make something outside of the classroom.
From what Iâve heard, most CompSci classes are primarily useful for acing algorithm-driven interviews and gaining a deeper knowledge of computer science theory. But even if classes did a fantastic job teaching real-world modern technologies, as some do, they will still leave you unequipped for future technologies.
The web, and software development in general, change at a remarkably fast pace. Five years ago, PHP was the modern way to develop web apps, mobile apps did not exist, and there was no Heroku. Five years from now, the most popular web frameworks of today are likely to be woefully out of date.
Thatâs why learning how to learn to code is better than learning to code. I donât want to teach you Django or Rails, but rather how to teach yourself Django or Rails. But I also want to tell you: for starters, learn Django or Rails. Itâs important to know whatâs current today, whatâs coming up tomorrow, and what your path as a developer should be. I hope to give you as helpful and objective an overview as I can muster.
How to Learn
In general, the steps I have taken to learning to code are:
- Pick something to build
- Decide which language/framework(s) to use (ie; Ruby/Rails)
- For each technology/framework:
- Learn the basics in a tutorial
- Try to build a small piece of your project
- Google things you donât know how to do
- Google errors you run into
- Repeat (i) and (ii). A lot.
- Repeat (b) and (c). Mostly (c).
- Repeat (1)
In other words: learn, build, google.
An important corollary: going through a few tutorials on a programming language does not mean you have âlearnedâ that language! It means you (hopefully) understand the basic grammar and a few common words, but itâll be awhile until youâre stringing together beautiful and powerful sentences.
That is as it should be: whatâs important to get from the tutorials is a basic understanding of the purposes, functioning, and syntax of each language and framework. Trying to learn all the words/features/uses of the language will be a waste of your time: instead, try to build something and google the words/features/uses you donât know. If youâre using a popular tool like Django, Rails, jQuery, or HTML/CSS, you wonât have a problem finding the answer.
When going through tutorials, never copy and paste. Always type out what you see yourself. For some reason, this really helps, and Iâve seen it recommended by a number of people.
What to Make
Itâs important to have a solid idea of something to build in mind. The Ruby on Rails tutorial Iâll recommend walks you through building a simple version of Twitter. While a structured tutorial like this is important, and I recommend you follow it by the book, that is not enough.
You need at least one extra project that is not directly related to the tutorial. Itâs important to have something that requires learning beyond the bounds of the code youâre told to write, and makes you apply the concepts learned on your own. Itâs also important to have something to show (to employers, friends, your mom), and something built with code from a tutorial isnât going to impress anybody.
As you follow along the tutorial, if you have epiphanies related to your app (web, mobile, desktop, whatever), feel free to write some code. But itâs more important to have something that you can hit the ground running with once youâre done with the tutorial.
So what to make? It should be something you genuinely want to use, and something you donât think you can easily build. You want to push yourself; you can always google what you donât know. Itâs also fine if you switch projects multiple times; each project brings new challenges, which means more things to learn.
Itâd be best to build something you and your friends would actually use, so you also learn how to build for users.
If you need some ideas, here are a few:
- re-do coursegrapher.com. Greg Terrono and I built it in 48 hours at a PennApps hackathon; it was his first web app and my second. People are still using it (over 2000 so far), but the data is old (it doesnât pull automatically from the penncoursereview api). Itâs also missing features: why canât you load arbitrary lists of classes to evaluate, rather than just one major at a time? Why canât you see course names rather than numbers, or link to the penncoursereview.com page?
If youâre not a Penn student, you might also think about making something similar for your school.
Bonus: If your work is great, Iâll consider passing on the reigns for coursegrapher.com. - Make a visual apartment-searching site for your college area. Consider trying to sell it to a local real estate developer for a few grand. Or not.
- Simple site to check if a movie or show is on Netflix, Hulu, or Amazon Video. Consider including info from Rotten Tomatoes and/or IMDB.
- Campus event listing service
- Personal homework tracker (enter items from syllabus at the beginning of the semester, remind whatâs coming up when, customized to how youâd want it to be)
- Real-time review of the dining-hallsâ food tonight
- Whatever PennApps Labs doesnât build from this list.
- Re-implement something from a prior hackathon (ask before copying someoneâs idea!)
- If you want a real startup idea, Iâd recommend this article.
Some tips for once youâve chosen something:
- Have a coding buddy on your early projects. Not for tutorials, but for early projects youâre working on. Pair program (one person types, the other is like a backseat driver). I did this early on with somewhat more experienced people (me driving, them steering) and it helped tremendously. Youâll gain a better understanding of what youâre doing by explaining it to the other person, not to mention theyâll learn what you know and vice versa.
- Break your app down into the smallest bits and pieces you can, and then make them one at a time, testing to make sure they work every step of the way (I personally use one hell of a lot of print statements and console.log()âs). For example, if youâre making an app that gets movie ratings from IMDB and Rotten Tomatoes, I might have a flow like this: connect to IMDB -> get information on Anchorman -> process info on Anchorman -> display info -> get/display info for any movie (not just Anchorman) -> repeat process for Rotten Tomatoes -> get list of movies from IMDB -> get list of movies from RT -> find a way to combine them -> create completing searchbox for them -> deploy, smile.
What to Learn
Iâm only going to focus on Web development (ie; not mobile), because thatâs all I know and thatâs where a majority of work gets done. If youâre interested in making mobile apps, PhoneGap allows you to build native mobile apps using the Web technologies described below.
So what does it take to build a modern Web Application?
- A good text editor (for writing your code)
- Front End (stuff that happens in your usersâ browser)
- HTML and CSS
- Some Design sense and creativity
- Javascript
- Back End (stuff that happens on your server)
- A Language & Framework
- A Server
- Git (for keeping track of your code)
This probably looks like more than it really is. For starters, HTML and CSS are super easy, and you donât really have to get started with front-end javascript off the bat at all.
A Good Text Editor
I recommend Sublime Text 2. Itâs super easy to use, lightweight, cross-platform (OSX, Windows, Linux), surprisingly powerful, has lots of great packages, and you can use Vim or Emacs within it. It has an unlimited free trial period, which Iâm still using. When you start earning money, you can pay the $60 to remove the occasional âbuy meâ popup.
You donât really have to learn anything to use Sublime Text, but if you start looking there are a lot of great features. Go download/install it, and when anyone tells you to edit some code, open it with Sublime.
Down the line:
Vim and Emacs are incredibly powerful text editors. Theyâre what the pros use. They also take a very long time to learn. When the time is right, you might want to use one of them inside Sublime or instead of it. That time has not yet come for me.
Front End
The âfront endâ is what your users see. Everything that happens inside the browser, aka âclient-sideâ, aka âin the clientâ is front-end. Browsers are very particular about the technologies they allow: HTML is how you structure your page, CSS is how you make it pretty, and Javascript is how you make it do stuff. Thereâs Flash and a few other outdated things too, but you shouldnât use them.
Browser compatibility:
Each browser does things a wee bit differently, and some old browsers donât do things well at all. Namely, Internet Explorer. IE sucks. The old versions mangle web pages in strange ways, and donât adopt any of the new standards, like HTML5. Whether or not youâre going to support old IE versions for anything beyond your landing page is an important decision to make. Itâs such a pain that I wouldnât recommend it, at least for now.
HTML and CSS
HTML and CSS are not programming languages. They are code, and they are important, but they do not *do* anything other than declare the structure, content, and look of a web page. In part because of this, they tend to be very easy to learn.
In fact, many people reading this already know some basic HTML. Thatâs all you need. Because of fantastic front-end frameworks like Bootstrap (which I use in every project!) and Foundation, most of the heavy-lifting of proper positioning and responsive design are done for you.
If you really have no idea what HTML and CSS are, or if youâre a designer at heart and really want to understand this stuff, take a tutorial or two (donât like those? Google!). But once you understand the basics, I find it far more efficient to build and google, build and google. Donât waste your time reading more than you need.
Basic Design Sense
Design is important. Most projects you make starting out will ultimately just be for your portfolio: theyâll help you get hired or find other people to work with on new projects. Even though every other technical person out there knows that the most advanced projects can have the ugliest front ends, theyâll still subconsciously judge you if they see something without a pretty face.
You donât have to be an artist to make a website look half-decent. To start with, use Bootstrap. But do not stop there! The look of vanilla bootstrap has lost its charm to most devs who have seen every new hack out there sport the signature black topbar and blue buttons. These sites have a good list of Bootstrap resources, and I also recommend you take a look at Google Web Fonts for headers and subtlepatterns for backgrounds. This article does a decent job of summing this stuff up.
Other Resources:
Google Web Fonts for headers, subtlepatterns for backgrounds, Smashing Magazine for resources, advice, and examples.
Javascript
Javascript is the programming language of the browser, and an increasing amount of work is being pushed to usersâ browsers, so the language has surged in popularity and importance in recent years. That said, Iâm not sure itâs the right thing to learn off the bat; instead, Iâd recommend going through your first tutorial on the backend framework, building something for a while, and then coming back and taking a short javascript tutorial to get you off the ground. From there, you know the drill: build and google, build and google.
Javascript is relatively easy to learn, but difficult to master, so once youâve been using it casually for a few months and have started to get more intense, Iâd recommend reading Javascript: The Good Parts by Douglas Crockford. Until that date, the ease of use provided by libraries like jQuery (which you should use!) should get you where you need to go.
When youâre ready to get started, Iâve heard mixed things about the codecademy javascript tutorial, though it seems to be the most popular beginnerâs intro these days. Eloquent Javascript (free online book) has been recommended to me for a more comprehensive beginnerâs guide. If youâre already a programmer but want to learn the particulars of javascript, check out the Mozilla Developer Networkâs (re)introduction. I actually never took a javascript tutorial, instead skipping straight ahead to the build and google stage.
Down the line:
While Iâm not recommending you pay much attention to Javascript right at the beginning, itâs very important long-term. The CoffeeScript language, which compiles to Javascript, is something you may want to look into once youâre familiar with the standard way of getting things done. Backbone.js is a powerful, lightweight framework for building large, Javascript-heavy web pages and has surged in popularity since its recent inception. Lastly, remember to read The Good Parts.
Back End
The âBack Endâ is your server. Server code is protected from the public eye (unless itâs open-source) and, with proper security, from public fiddling.
Choosing a language
The nice thing about the server is you get to choose what language you run on it. You can choose anything you want. But there are only two languages you should consider to learn on: Python and Ruby. It doesnât matter if you already know some Java from class or PHP from a project 5 years ago; theyâre not the best tools for the job. Use Python or Ruby.
Future Reference:
Node.js allows Javascript to run as your backend instead of Python or Ruby, and itâs a fantastic and fast-growing tool, but the Node ecosystem isnât quite ready yet for beginners. Iâd encourage you to look into Node frameworks in a year or two, but theyâre not mature enough yet to be your first. The possible exception could be Meteor, an incredible full-stack (front and back-end) framework built to be realtime and easy to use. Itâs a different paradigm, though.
Go is also looking like the tool for pros; also not ready for beginners yet.
Python and Ruby are both modern, powerful scripting languages with clear, simple, concise syntax and terrific communities. Each has a large, tremendously popular and well-structured web framework at the core of their web communities: Django for Python and Rails for Ruby. I use and prefer Python, but that shouldnât sway you. Hereâs my attempt at an objective comparison.
Regardless of your initial thoughts after reading this, Iâd recommend trying both out a little bit and seeing which you prefer. Both options are great; you really canât go wrong. As my friend Dan Getelman says, your priorities should be: 1) just choosing one, 2) choosing what your friends / likely collaborators know, 3) choosing what gels with you personally.
Python/Django:
Python, named after Monty Python, has a remarkably simple, clean, readable syntax. In part because of the ease of reading and writing Python, as well as its impressive speed and power (for a scripting language), Python has become very popular in a very wide variety of disciplines, including finance, science, data analysis, natural language processing, and statistics. Python tends to outstrip Ruby in these areas.
Django, Pythonâs most popular web framework, is generally regarded to be very âpythonicâ: that is, the code is readable and things are transparent and logical. It is often easier to write maintainable code with Django than Rails, in part since the inner workings of Django are more transparent. Django is also often considered more of a library than a framework, because many of the modules are not interdependent; itâs easy to eschew Djangoâs Forms module in favor of another option without breaking the Models, for example.
Django can be a better choice when youâre starting a project involving lots of data analysis, or if you prefer a pythonic philosophy.
Ruby/Rails:
To be honest, Iâve never heard of Ruby outside of the context of web development. Itâs my impression that the language was first widely popularized by Rails. I personally find the syntax less clean and pleasant than Python, but it still certainly beats languages like Java, C++, or PHP. There are Ruby Gems (libraries) for a tremendous variety of tasks, and they are supposed to be easier to install and use than Python libraries.
Ruby on Rails came out a year or two before Django and is more popular. Itâs my impression that Ruby in general, and Rails in particular, can be said to live by the motto âeasy is better than simpleâ. Rails is famous for doing a lot of âmagicâ for the developer, including some mysterious thing called metaprogramming, in which the framework literally writes code for you. This means getting started with a new project in Rails is supposed to be incredibly fast and easy. The downside is that once things move past the honeymoon phase, Rails can become more of a pain; the code can be less maintainable, and customizing Rails to do what you want can be more difficult.
Rails is probably the best choice if you prefer things to be easier and faster rather than simpler and clearer.
Learning Python/Django
First, basic Python. Then, basic Django. Then, build and google, build and google!
(quick note: use Python 2.7, not Python 3)
If youâve never programmed at all before, and youâre thinking about trying to have a serious go at development (which I encourage!), Iâd recommend Udacityâs CS 101, taught in Python. Rather than just teaching the basic mechanics, itâll thoroughly explain the underlying concepts as well. This means it moves a lot more slowly; the class is 7 units long, and each one takes several hours to get through. If you really like the course, you might consider taking Udacityâs Web Development course as well, which teaches Google App Engineâs webapp2 framework, before or instead of learning Django (the frameworks are pretty similar).
If you have a little bit of experience in another programming language, or you have access to a friend in computer science whoâs willing to patiently explain all the concepts to you, I might recommend a less comprehensive beginning tutorial. Codecademy (interactive, new), Khan Academy (a bit faster, kind of scatterbrained), and TheNewBoston (funny, really breaks it down, where I learned Python) are all intended for beginners but are a bit faster-paced than Udacity.
If youâre an experienced programmer but donât yet know Python, the above resources are likely to be too basic and might test your patience. Googleâs Python Class is a decent resource for folks who just need to learn the particulars of Python syntax; for a more thorough introduction, consider Dive Into Python. You might also be able to just skip straight ahead to a Django tutorial and pick it up as you go; Python is a very straightforward language (itâs been referred to as âpseudocode that executesâ).
In any case, donât worry about thoroughly knowing Python. Thatâll come through practice. All you need is enough to get you started.
Once you have a grasp of Pythonâs syntax, general use, and philosophy, itâs time to learn Django. Since Django is a large library that does a lot, youâll want to follow along with a real tutorial, and spend some time on it.
I learned Django with djangobook.com. At the time, it was a wonderful resource; indeed, it was probably the most popular way to learn Django. Unfortunately, the authors have long since stopped working on the project. The most recent version the book covers is 1.0, but the current version of Django is 1.4 and 1.5 is due out soon. A recent shift has moved the book to be open-source, but not much has changed since then.
It used to be that there was a fascinating comment system that allowed users to comment on individual paragraphs, making it easy for mistakes to be noted, debated, and corrected by the community. When the new authors took over, they did not continue this feature. A few changes have been made to the new open-source version of djangobook, but not nearly enough for it to be up-to date.
So while djangobook.com is probably still a great resource, use it at your risk. If you choose to do so, youâre welcome to email me when you run into troubles.
Instead, you should probably head to the Official Django Tutorial. Itâs a bit stodgier but a great resource nonetheless.
When youâre ready to deploy (eg; put your app on the internet for all to see), youâll want a tool that does the annoying server work for you. Google App Engine is what I use; go here to learn how to use it with Django. Heroku is also quite popular, but doesnât work as well for Django as it does for Rails. Amazon recently released a Python version of a free Heroku-like tool called Elastic Beanstalk; I donât know anyone who has used it but it looks cool.
Down the line:
Flask is an increasingly popular Python microframework for the web. Itâs far smaller and simpler than Django, and is regarded as an especially terrific backend for frontend-heavy, ajax-driven sites. I donât recommend Flask for beginners, despite its simplicity and ease of use, because it expects you to know what youâre doing: itâs BYOB (bring your own batteries). Django comes with batteries included and has sound design principles built-in. Once youâve made a large site with Django, youâll know what to do with Flask, and learning it will take a few hours at most (trust me, Iâve been there).
Great Python libraries: requests (for interacting with APIs), numpy (math), scipy (science/data), opencv (computer vision), BeautifulSoup or pyquery (web scraping), Python Imaging Library, pandas (data analysis)
Learning Ruby on Rails
I donât know Ruby, so unfortunately all I can offer is some resource Iâve heard great things about: ruby.railstutorial.org (where most folks get started), guides.rubyonrails.org (the official one), and railscasts.com (I think for more advanced usage).
When youâre ready to deploy, use Heroku. It was built for Rails and the two play together marvelously.
Down the line:
Sinatra is basically Rubyâs Flask (see âDown the lineâ, above), but even more hipster (apparently itâs most popular in portland?). Comments made about Flask basically apply here.
Thanks
I hope this has been useful. Iâd really appreciate any questions or comments you might have.Â
You should also check out some similar posts from a few friends of mine: Zain Shah on Medium, Edward Lando in the Huffington Post and Dan Shipper on his blog.Â
NOTES TO SELF on things I want to change (hey, why not make them public!)
- talk more about the role of codecademy and how they (and others) fit in
- emphasize Flask/Sinatra as viable options more. Look for relevant tutorials.
- talk more about value of pairing, coding buddies