Written in April 2013 for a Stanford web programming hackathon targeted at beginners.

Welcome to HackOverflow!

It's disappointing, but you're not going to learn all of web programming in a day. So don't expect yourself to :) But, you can learn a lot. You'll learn about what you started out trying to learn, and also about the less glamorous stuff like how to Google when you get stuck, how to install programming tools on your computer, and how to teach yourself what you need to build out your ideas. Try to remember that all these things are part of the process :)

So let's get started!

Feel free to enter this tutorial at any section according to your past experience, and exit at any point to go build that awesome idea you just had. We hope to give you the barebones of the different components of web programming (there are a lot!), rather than going in-depth on each section. The goal is for you to see how everything fits together, so that you can get started making web applications and flesh out the details later on.

Try to build something for each section! Even if it's just a little HTML page about your dog, it's great to have something to show for your learning.

Contents

Tips on learning CS stuff outside of class

This tutorial is largely self-directed so you can learn at your own pace, and keep going after the hackathon if you like. :) Feel free to work in pairs! Ask those around you for help if you get stuck and your googling didn't work, and help those around you too. Also feel free to flag down some of the mentors walking around. Good luck!

What do you want to know? Google it!

Seriously, try googling whatever you want to know -- "learn python", "css layout", "how to make a website" -- and chances are you'll find something useful. That said, there is a lot of low-quality information out there, so don't be surprised if you have to sift through tutorials and do multiple searches to find what you want.

This is actually one of the most incredibly useful skills you can develop as a coder :) You can learn anything!

I'm stuck and it's broken.

Is the installer spitting out an error message? Is something just not working? Without a TA or the LaIR, whatever will you do? First, check for syntax errors like missing braces or semicolons. Then, try googling the symptoms! Chances are you're not the first person to have run into this problem, so go ahead and Google for a relevant StackOverflow question or tutorial.

This can be really frustrating, but remind yourself it's just part of the process of learning something new, and everyone has to do it regardless of how smart they are. Plus, the more experience you gain, the better and faster you'll be and finding solutions.

Build stuff you're proud of

The best way to learn something is to do it. It's way more exciting to create a site or a game right away than to read through dull documentation on Javascript string processing for the sake of "learning Javascript." Plus, you can end up building some really awesome stuff.

So instead of setting out to "learn Javascript," think of an attainable goal. Say, making Hangman in Javascript. Then, start right away and Google just for the syntax and information you need to make it happen. It's fine if it's small or sort of silly to begin, just make sure you're building something. You'll be way more engaged, remember it better, have something to show off, and have way more fun :)

Don't get bogged down

As you're learning, try not to get bogged down in minutiae you won't remember anyway, like Python language philosophy when you just want to make something. Keep moving forward with your project -- it's okay if you don't learn 100% of everything at first, just get the parts you need and keep making progress. Breadth-first, not depth-first is often more rewarding :)

Web applications from ground up

Let's get set up

We're going to assume:

  • You have a text editor for code you can use -- if you're not sure, go download Sublime Text. It will do nice things like syntax highlighting and indentation that you won't get in Notepad or TextEdit.

I am a total beginner! HTML and CSS

You have done some programming before (say, CS106A), but you figured out pretty quickly that your FacePamphlet assignment is very different from building a site like Facebook. You probably have heard things like "HTML" and "CSS" bandied about, but honestly you aren't quite sure what those things are, or why they might be useful. You don't even know where to get started, or what to ask questions about. Awesome, this is the place for you!

We'll start with some HTML and CSS. HTML is the barebones of having stuff show up, and CSS is what makes it look pretty (as well as letting you give the HTML elements names). Try not to spend too much time in this section -- there's much more exciting stuff up ahead!

  1. Good news, HTML is simple. Get started with this basic HTML tutorial, but don't spend longer than 20 minutes on it (don't get bogged down!). You'll pick up plenty of HTML on the fly now you know the basic idea, and you can easily just Google "HTML how to make a list" instead of memorizing any tags, or use a quick reference when you need something. Tip: Feel free to right click and do "Inspect Element" to see the HTML of this page (and any other!).

  2. HTML is sort of boring. Let's make that page more exciting with CSS. Try this basic CSS tutorial, and again, try to move quickly through without trying to memorize things you can just Google later.

  3. A little more CSS! It's a good idea to check out the intermediate CSS tutorial -- don't try to memorize things, and feel free to skip the parts on background images, pseudo elements, and specificity. You can look at advanced CSS tutorial if you'd like to make rounded corners (!) and shadows -- the gradients and transformations are also fun, but by no means actually important :).

Great! Now you have a (admittedly rather woeful-looking) HTML page with CSS! The most important things to get from this section are the idea of HTML tags for markup, CSS selectors and attributes for basic styling, and CSS classes and ids. Move on to the next section and make it look better! (references for later: W3Schools HTML, W3Schools CSS and of course Google)

The page is ugly, not real-looking! Bootstrap framework

So you know the basics of HTML tags, CSS classes, and styling, but a red paragraph on a blue background is pretty far away from a real (post-1998) website. Now what? How can you learn to put the pieces together to make something that actually looks "real"? Start here!

We're going to start using some frameworks -- the idea is that other people did hard work we can use to get something good-looking. Of course, we could go become CSS experts and learn to make good-looking things from scratch, but right now that's sort of like baking the bread yourself when all you want is a sandwich. Frameworks get you 75% of the way there, and let you concentrate on making cool things. (Later on, you can become a CSS expert if you want.)

  1. Bootstrap! Twitter Bootstrap is one of the most common CSS frameworks around (there are a lot, and it's not worth arguing now which is best). Here's a quick bootstrap tutorial to get started. Feel free to browse through the Bootstrap getting started page -- there is excellent documentation on a ton of easy functionality for dropdown menus, tooltips, and carosels. Again, try to keep moving forward after you've spent a little time with getting the hang of it. You can always come back later :)

You can still use CSS to customize the appearance of your page within Bootstrap -- in fact, using the right-click "Inspect Element" feature on a Bootstrap webpage is a great way to learn CSS by seeing how they do things. Now you should have a reasonable looking web site with content you could show to people! Great work.

I want my webpages to do something! JQuery and Javascript

I know enough to make myself a simple home page that looks alright, but it sure is boring. I've heard that Javascript and JQuery can help make it more "dynamic and interactive", whatever that means. How do I learn to make something that people can interact with, not just look at?

Things are getting a little more complicated now. People spend years becoming experts in Javascript and JQuery, and there are some pretty amazing things you can do with them. We're just going to go for the basics, so you know what they are and a bit of how to use them, and can pick up more later on.

As background, Javascript is the language for all the interactivity and logic that you see on a page. It lets you change the CSS classes of elements on the fly (thus changing their styling, and even whether they appear or not), add and remove HTML elements, and is a full-on programming language so you could do something like write Hangman in it. It has no relation to Java -- a fun quote is "Java is to Javascript as car is to carpet." The story is that the Javascript namers wanted to piggyback on the popularity of Java at the time. Tables have turned, though, since Javascript is the most widely-used programming language now due to the popularity of the internet.

Problem is, Javascript is a pain to use for adding interactivity. That's where JQuery comes in. JQuery is a Javascript library, meaning it is a layer between you and Javascript that hides away the ugly Javascript parts and gives you nicer way to use the features. JQuery is really all you need to learn right now -- you can learn Javascript syntax for strings and lists and so on when there is something specific you want to do with it.

  1. Let's first get started with JQuery, an easy way to add some interactivity and animation to your page. Try this JQuery tutorial and start playing around with the examples. It's a long repetitive tutorial, so go through Section 4a and only go on after that if you want to. If you want another tutorial, check out the JQuery Getting Started tutorial and read the sections "Setup", "Hello JQuery" and "Find me: selectors and events."

  2. Optional: Check out building a game in Javascript if you do want to see more Javascript. Don't be intimidated by how weird it looks at first -- just try to compare it to things like arrays and functions that you learned for Java or other languages. It's the same basic building blocks.

That's actually enough for now on Javascript and JQuery! You can learn more as you need to -- again, just Google for what you don't know. Javascript becomes much more powerful once you see how it connects to other data in the next few steps. Also, at some point later on you might want to make a more formal study of the language, in which case I recommend Eloquent Javascript, a free online book, but it honestly won't stick unless you're using it to build something, so build things first :)

Can I get data from elsewhere? Ajax and APIs

Now we're going to make your website quite a bit more powerful by letting it connect to data elsewhere on the web. We'll use APIs, which is how sites (like Google or Twitter) to expose data to programmers. We'll also use AJAX, which is how you can fetch and send data without having to reload the page.

If you want, this section is not necessary for moving on -- so feel free to skip it and come back if you want to get started with a web backend right away.

  1. Try Making a Google-powered site-search tutorial and combine some JQuery and AJAX with Google. This is a pretty cool application of everything we've covered so far!

  2. For more APIs, check out How to use APIs from Google, Facebook, and Twitter! If you have a site in mind and want to see if you can access its data in your application, just google "New York Times API" or "Flickr API tutorial" and try to find a good tutorial

Awesome! There are tons of interesting APIs out there, and you can make some fun and useful apps just by combining different APIs or presenting the data in a new way (check out New York Times haikus).

I want a webapp, not just a website! Backend frameworks.

You've had enough of stand-alone webpages, even nice-looking and interactive ones with APIs. You want them to be more powerful, with data! It's time to move from the frontend (directly facing the user) to the backend with a database. You heard this involves web frameworks like Django and Ruby on Rails (or node.js), and databases like SQL. It's seems like a big jump, so let's get started!

Backend? It's where all the things sent down to the frontend come from. It's where Gmail figures out what email you're searching for, and what to send you in response. It's where Facebook figures out what to show on your news feed when you open the page. It's where you could personalize the webpage depending on the user, create a chat room to connect users, and more. Database? It's where your emails live, with information on whether they're read or unread. It's where Facebook stores a list of your friends. It's where you could store user accounts and their todo-lists, or any other information you wanted.

There are a bunch of web frameworks for doing backend stuff. Even after you've become proficient in one, it's interesting to try out another for comparison. Here are a few options.

  1. If backend stuff is new to you, I recommend this Ruby on Rails tutorial for getting started (and the links at the bottom for more). It takes you step by step, and there are commands for both Windows and Mac/Linux.

  2. Node.js is another way of writing backend code (normally done in Python, or Java, or Ruby) in Javascript with some new ideas of how to do things. Here's a quick tutorial on how to make a many-person drawing game!, or you can deploy an app on the internet for everyong using Heroku (for free!)

  3. Flask is another great option, and it's easy to get started quickly using Python

  4. Optional: If you want something more heavyweight, check out Google App Engine! There's a version for Java Google App Engine and Python Google App Engine so pick your favorite.

Nice work! It's been a whirlwind tour across web programming, and hopefully you have a better sense of what's out there.

Now, please, please go build something :) Maybe it's a personal To Do List app, maybe it's a puppy-cuteness rating site, maybe it's a customized present for your grandparent or roommate. Try to put together some of the pieces from this tour, and as always Google when you get stuck or don't know how to do something. You'll learn so much more from creating something than you will from reading passively. Have fun :)

Cool bonuses

Maybe you already know about building websites, maybe you want a break, or maybe you're just curious what else is out there. Here are some fun things you can try!

Wordpress blog for a personal page

Build a personal page with Wordpress! This is totally something you can set up in a day, and start blogging your thoughts (and experiences learning web programming!).

I want a domain name!

See if your full name is available at Namecheap, or buy another website! Most are just ten dollars a year, so go ahead and splurge :)

HTML5 Canvas and building a game in Javascript

HTML5 Canvas is a cool way to draw and animate things, and works much like the GraphicsProgram from CS106A. Try building a snake game!. Don't worry if you don't know Javascript -- if you've done some programming (say, CS106A), you can mostly follow along and pick it up as you go.

Scraping websites!

Try googling or looking up BeautifulSoup, a Python library. I've used this for scraping the guitar chords of favorite songs, for example. I wrote up a set of slides that you can use to get started! Other applications are at ScraperWiki.

Firebase

Firebase is a neat way to store data from Javascript so that it sticks around for later, and live-updates for different people looking at your site. It is pretty easy to get started, and you don't have to do anything like set up a database. I would just read the first three steps of their quickstart guide, and then skim the examples and to get started.

Coffeescript

Coffeescript compiles into Javascript, and looks much more like Python for readability and ease of use. Check it out!. It does require installing the Coffeescript compiler on your computer, which often requires installing NPM, a package manager (ie, thing for installing and keeping track of other things) from Node.js.

Congrats!

Get in touch (@sophiawestwood) if you have any suggestions for improvement, or if you want to share what you built!