Everything there is to know about programming and making websites, vol. 1
August 14, 2011 12:44 AM   Subscribe

I want to learn about programming and making websites. Where to start, and how to proceed from there?

I know a few html tags, I know what CSS is, and I know what Python is, as well as JavaScript, Perl, Ruby, etc. A vague sense of what PHP, MySQL, Lamp, Apache are.

I also know about W3C, HTML Dog, Learning Python, Think like a Computer Scientist, Learning to Program (by Alan Gauld), Python Programming, the MIT courses, the HeadFirst books, etc.

But where do I start? In what order? Does it matter? Do I just pick one book or course and start there? Would it be stupid to read one of the HeadFirst books while reading Python Programming? While doing one of the MIT courses? While reading about CSS?

I think I can guess what the answers are going to be, but I'd like to hear your input, just the same.
posted by Busoni to Technology (18 answers total) 71 users marked this as a favorite
Best answer: (This is from the perspective of a web designer that knows HTML, CSS and JS but is not a programmer)

Start with HTML and go from there. HTML dog is a good resource. Try to make a website for a personal project using only HTML. Learn how to style it with CSS.

I started with Designing with Web Standards, The Zen of CSS design and Transcending CSS. All of these books are terribly out of date now. Beware of old resources. CSS tricks is a good site to follow. The HTML5 doctor too. But they cater to an audience that already knows most things so if you're feeling overwhelmed don't worry.

Download Wordpress and see how the default theme fits together. Set up a local development environment and play around with changing a theme or creating your own theme from scratch. Read the documented HTML5 boilerplate.

If you're ready to get into the programming pick up Learn to program. I learned Javascript (at least the basics) through Jeremy Keith's DOM scripting. Javascript is hard to start with. Some people recommend a language that is actually documented and can be learned from a book. I've never learned how to program and stuck to design and front-end development so my advice ends here.
posted by wolfr at 2:17 AM on August 14, 2011

Just jump in feet first. Figure out what you want to make, get the resources (books, websites, etc) in front of you, and just muddle through, learning as you go.

If you've got buddies who do this stuff for a living, maybe sit down with them and let them help you nail down the scope of your starter project. Maybe they'd even be willing to work with you as you build it - answering questions, etc.

I find a lot of the stuff in the books is in-one-ear-out-the-other unless I'm using it *as* I'm reading it to accomplish a specific goal.

When browsing for books, look for ones (eg ones like this) that structure what they're teaching around specific exercises.

One particular topic I don't see mentioned in your lists above is databases, which is pretty key for most web stuff. One thing to think about for your learning project might be to structure it around some kind of publicly-available data set that interests you - whether it's stock prices, weather data, baseball stats, etc.
posted by colin_l at 3:02 AM on August 14, 2011 [1 favorite]

Response by poster: But there's not much reason to read a bunch of stuff concurrently, right? As in, reading two books on Python while following along in the MIT course.

And related to that, does it make sense to learn HTML/CSS before the database/programming stuff? Can I do that at the same time? Or is that a bad idea?
posted by Busoni at 3:38 AM on August 14, 2011

Response by poster: Or, I guess another question would be, do people who use Python read multiple books on Python throughout their learning process and careers? Or is it, just pick one, and then learn the rest through experience?
posted by Busoni at 4:09 AM on August 14, 2011

Best answer: A good question would be, assuming you're starting from scratch - what do you want to do first? Have an ugly website that does cool stuff? Have a pretty website that doesn't do much? Have an ugly website that doesn't do much, but on your own server? If you read everything concurrently, it'll be a reasonable amount of time before you can achieve any of these goals. Instead, I'd pick one, and really zoom in on doing that until you're satisfied you've achieved a particular goal - then you can branch out!
posted by piato at 4:47 AM on August 14, 2011 [3 favorites]

Best answer: The best approach is to learn by doing - come up with an idea for a small script, pick up enough python to get it working, then make a dozen more scripts or small apps in succession. Start by looking at the first few chapters of a few books to see which ones click with you. I studied with one single Python book but I didn't learn very much from it, I learned 95% of what I know from doing projects, using google when I run into issues, using excellent official python library reference at python.org/doc/, reviewing and modifying other people's code. You can memail me if you have more questions..
posted by rainy at 5:14 AM on August 14, 2011 [2 favorites]

If you are going to be writing a website that pulls some of its content from a database (almost a certainty) then I would recommend you learn about SQL. Here is a simple tutorial which lets you try out your queries directly on their system.
posted by rongorongo at 6:56 AM on August 14, 2011

Best answer: Well, here's one way to do it, and there are many I think:

First of all, make sure you understand HTTP as well as you can. This is the foundation of the web. I'm not saying you should understand all of this and need to read through the (rather boring and dry) protocol RFC before you do anything else, but at least realize that all this web stuff comes from HTTP. You'll keep coming back to it the more experience and skill you get, and you'll be like "oh, THAT'S why that is like that..." Keep that fact in the back of your head when you are learning all this other stuff, it's key.

(Very simply, HTTP works like this: you put a URL into your browser (FF, Safari, IE, etc.), so it sends a request to the web server (which it uses the domain info part of the URL to find) via HTTP: "GET me this page!" The server (software that is sitting on physical hardware waiting for requests, such as Apache, IIS, Nginx) then finds the file (using the part of the URL which gives the server path)—or passes execution off to something else, which eventually returns something it can send to the browser to it—and gives it back to the browser which renders it according to how the HTML and CSS specifies. This is a simplification which leaves out a lot of possibilities but it gives you a good place to start to understand the functions of the different software and systems involved.)

Second, you should be aware that there are some generally well-understood divisions of labor within the professional web-dev world. I'm not sure being a "pro" is your end goal, and I'm not saying it necessarily should be, but it may help you understand some ways people talk about things at least. And it's also worth noting that there are many skilled "jack of all trades" sort of folks who may be webmasters for a small organization's web site or non-profit or that sort of thing.

But, getting to my point, you should be aware that people tend to talk about the main division of labor as front-end and back-end. Front-end usually encompasses HTML, CSS and some JS coding, and back-end includes the more programming-heavy less-visually-oriented server stuff, which includes the Python coding you're looking into now, as well as technologies like PHP, Java, Perl, Ruby, <whatever the next in-vogue language will be>, etc. This split basically falls along the line straddled by the HTTP client-server interaction: one represents the browser (client) and the other the web server app (the aforementioned Apache, IIS, Nginx, etc.).

So, to get down to it: I would agree with wolfr that HTML is sort of the best place to start. It's easy to get into and more to the point, it is foundational for all web technology—if you are a server-side programmer you still have to use and understand HTML. Originally, the most common interaction on the web, the "one where it all started," was the browser sending a GET request to the server, the server responding with the static HTML page, and the browser rendering it. Probably it's still the most common HTTP interaction in existence, but I don't really know for sure. There's so much goddamn AJAX and other craziness running over HTTP these days that it's hard to say. *ahem*

So anyways, when you start playing with HTML, very quickly you start asking questions like, "how do I make all the h2s bigger across the board?" or "how do I make this section go over there?" And then you will (should) find yourself getting into CSS. (Regarding how to do it the "right way," I like this book a lot: Designing With Web Standards. wolfr, I think this one is not out of date—it's at the 3rd edition now and he mentions HTML 5 among other things, so it should be okay.) Very quickly, I think, you will figure if you like this part of web development; I sort of despise it, personally, because I hate dealing the quirks of constantly shifting CSS positioning browser differences and the internal logic of CSS—but I have a friend who LOVES that stuff and is always on top of what IE8 does differently than FF5 when you right float a div or whatnot...

From there, you may come to a point where you're like "I want to add more interesting interactivity to this interface" or you may say "I want to populate this page with data pulled from a database, and be able to change that information and send the info back to the database to be saved." Then you may start messing around with JavaScript (I recommend playing with jQuery as an easy-to-get-into way to add slick interactivity with a line or two of code...however, it should be noted that jQuery is more or less a DSL itself and is a pretty advanced chunk of JavaScript if you peer into the codebase. But that's for later...again, I think you'll know it if you want to learn more about this or not).

Or, if you start playing with the server stuff, you'll start digging into something like Python or Ruby or PHP. I will insert a bit of personal bias here: I suggest sticking with the Python or trying Ruby, and ignoring PHP for now. It's not hard to pick up later if you want to. I personally believe learning Python or Ruby (or Java, or JavaScript, or anything else) rather than PHP at first will help you build stronger development habits out of the gate. That said, you're more likely to find a dirt-cheap ISP account providing PHP and MySQL than anything else...and the infrastructure requirements involved in getting Ruby or Java (and Python? I don't really know...) working on a web server are a lot more significant than PHP in most cases. (*sigh*)

At this point you'll probably also want to start messing with a database, and even though alternatives are starting to be put into use, the most easily accessible open source databases for most of us starting out are relational databases like MySQL and PostgreSQL. If you've got a recent Mac, you probably already have one of these installed on your laptop. And as rongorongo says, you'll probably want to pick up a bit of SQL at this point. These days, most of us doing serious development use ORMs to interact with our databases—but if you don't have at least of a basic knowledge of SQL it makes it harder to debug things or handle edge cases during development. It's kind of foundational (for now at least) like HTML is...very roughly speaking.

At this point, it should be pretty clear what you like to do. I expect you'll have realized it before you get to this point, actually. And maybe you'll really enjoy tinkering with all the different aspects of web development—or maybe you'll go crazy with CSS and start getting more into Photoshop and Illustrator or even *gasp* Flash (serious question, are people still learning Flash for web stuff these days?) or whatnot and become more of a designer, who knows. But hopefully this gives you some help in thinking about your path, whether or not you decide to follow this path in particular.

All in all, if I could sum it up I would say 1) never forget about HTTP, and 2) do what you like at every point until you stop liking it. Don't pressure yourself into the idea that you "must" learn this or that before you can be a web developer—just start building stuff and having fun, and follow your nose.

Or, I guess another question would be, do people who use Python read multiple books on Python throughout their learning process and careers? Or is it, just pick one, and then learn the rest through experience?

I will just add, start with one book, and if you get bored, put that one down and try another one. Sort of the same advice I'm giving you with the general overview. Sensing a theme here?

Good luck and feel free to ping me via mefi-mail if you want more suggestions or have questions about anything.
posted by dubitable at 8:19 AM on August 14, 2011 [6 favorites]

Best answer: Or, I guess another question would be, do people who use Python read multiple books on Python throughout their learning process and careers? Or is it, just pick one, and then learn the rest through experience?

Sorry, I don't think I answered this as well as I could have—I will maintain my point that, for the most part, you should put down anything that is boring, but I will add that, in my experience, when I was starting out I tended to read a lot more "tutorial" type books. After a certain point, once I was a more experienced developer, I would immediately head towards the more reference-type books, as I already would have a good idea of what I wanted to know—especially when learning a new language, all I'd want to know was syntax, more or less: "how do I do <x> in Ruby? How does Ruby do enumerators and regexs?" Etc.

In general, as I've gotten more experience I read and purchase tech books less and less, and only pick up books basically about programming style (like Douglas Crockford's Javascript, The Good Parts, warning: not a beginner's book, but if you start getting seriously into JavaScript do pick it up right away) or software engineering in general (like Domain Driven Design).
posted by dubitable at 8:28 AM on August 14, 2011

You know enough to start putting together a website. Get some cheap hosting, and design a website for yourself. I recommend learning things as you need them, instead of learning a lot of things you may not use.
  • Write down two or three requirements for the way it should look or behave.
  • Use the vast resources of the internet to determine the best way to implement your first requirement.
  • Experiment until you are able to meet the requirement.
  • Repeat!

posted by kidbritish at 8:55 AM on August 14, 2011

Best answer: The best way to get better at programming is to program. There's just no way around it.

So, I would recommend finding one problem to solve: making a simple website, writing a task tracker, writing a text-based tic-tac-toe game, etc. Don't overdo it! Many people start out writing a "simple" game, and drown on the graphics engines and frameworks and toolsets and compilers and...

I would also recommend a beginner's book that covers the basics of the problem you're trying to solve. Despite an occasional tendency to adopt my primary school teacher's voice, the Head First books are pretty good here. If they don't suit you, keep looking around for one that does.

Make sure the book you choose covers setting up the tools that you need.

Read and do enough from the book to start getting a basic idea of what you're doing (about one week, max!). Then, start working on your problem. When you run into something you don't understand, refer to the book or the the internet. (I like the book method for starting programmers rather than the internet, because a good programming book is like a story, with a logical progression.)

As you work on your problem, take a mental step back and think how what you're doing can be applied elsewhere, or extended. Start stocking up on problems to solve. I keep a notebook for creative stuff: it helps keep me on track. Nothing fancy, just something to write reminders in. When you finish one problem, move on to the next.

Good luck! Programming can be so. incredibly. frustrating. But, all the problems you want to solve *are* solvable. Just keep trying.
posted by underflow at 9:07 AM on August 14, 2011

It's hard to know where to jump in. You should jump in for maximum fun. Otherwise you'll be frustrated by details you don't care about yet because you haven't yet experienced the problem that those details are supposed to solve.

I found this book (http://www.flexiblewebbook.com/) to be a good compromise for me because it takes a more holistic approach without dumbing things down. And the example files make a good starting point for something to play with. If you go this route you'll be doing a huge amount of googling because it assumes intermediate knowledge, but you'll have working examples to play with, and you won't be bored.

For the programming side, I like this book: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book

If you've never programmed before, the learning curve will be massive. But this book walks you through building a functioning website and leaves absolutely nothing out, from how to install and configure stuff to writing code.

My approach here ties many, many strands together at once, so you're not stuck reading five huge books. That can be fun, but in my experience motivation stalls pretty quick.
posted by zeek321 at 9:09 AM on August 14, 2011

I'm basically in the same position and want to get into web development or something related. I recently bought PHP and MySQL Web Development by Luke Welling and Laura Thompson and have found it to be one of the better books that actually goes through steps of doing things such as setting up a database or building a shopping cart, etc. It's useful for me because it illustrates various concepts and how they are put into practice. I've had one university course in Java(this was a couple of years ago) but otherwise have no programming experience.

I am aware that books go out of date relatively quickly but I think getting a few to start with is a good idea because if you're like me you will suddenly find yourself reading 30 blogs at the same time and not really absorbing any of them. The book I mentioned had really good reviews on amazon and that is why I bought it. I've also been going through some Lynda.com training modules - it's a $25/month subscription website.

Good luck!
posted by fromageball at 9:51 AM on August 14, 2011

Open your Browser. Go to View->Page Source

Then go google every line of code you see, do that for every web page you like.

posted by roboton666 at 10:57 AM on August 14, 2011

Response by poster: Thanks, everyone, for all your input. I marked a couple "best answers," but you all had something helpful to say.

I actually looked through the MIT course and it looks like it uses a couple sources (which all seem to be online, including the Think like a Computer Scientist book I mentioned), so that'll satisfy my need for diversification. I plan on doing that and looking into the front-end side of things at the same time, if it's too much I'll just do the HTML/CSS before doing Python. (I'm going to borrow this book (HTML, XHTML, and CSS by Castro) from my roommate, if it gets too tricky I plan on looking at HTML Dog and Google.

Thanks again.
posted by Busoni at 1:11 AM on August 15, 2011

Pick something that sounds fun that's slightly past your current abilities. Use friends and websites like stackoverflow.com to figure out things when you get stuck. Repeat as needed.

You might want to try Google App Engine, and work through the tutorials, which would teach you Python while working in a framework that can scale. You wouldn't need to run your own webserver or database, and you'd be getting that for free instead of paying for it monthly.
posted by talldean at 10:24 AM on August 15, 2011 [1 favorite]

W3schools.com is a good website teaching the basics of web development languages.
posted by Hi Dan at 1:28 PM on August 15, 2011

I started with Harvard's free CS50 course a couple of months ago. (www.cs50.tv)

It's a terrific course, taking you through languages and platforms on a very general level at first so you can have a good enough understanding of the concepts at hand that you can pick a language or platform from there and know what it should do and where it fits into all the other pieces.

Now that I've finished CS50, I'm learning C++ at LearnCPP.com.
posted by SlyBevel at 2:18 PM on August 15, 2011

« Older Help me identify this piece of classical music...   |   Forcing a refund via MasterCard rather then shop. Newer »
This thread is closed to new comments.