Written in April 2013 for a Stanford web programming hackathon targeted at beginners.
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.
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!
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!
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.
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 :)
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.
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!
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!).
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.
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)
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.)
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.
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."
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.
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!
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).
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.
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.
Flask is another great option, and it's easy to get started quickly using Python
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 :)
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!
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!).
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 :)
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.
Get in touch (@sophiawestwood) if you have any suggestions for improvement, or if you want to share what you built!