Have a Macbook and a burning desire to learn web development. Tell me where to begin.

May 27, 2009 12:47 PM

I have a Macbook and a burning desire to learn web development. Tell me where to begin.

Apart from being very comfortable in OS X, I know very little about web development. What are some helpful books or websites for the beginner. There's just so much, I don't know where to start. Thanks.

posted by capitalist.pig to computers & internet (17 comments total)

This may help you.
posted by biochemist at 12:55 PM on May 27 [3 favorites has favorites]

Your timing is good; you can get a really nicely integrated client called Coda for half-price ($50 instead of $100) if you buy it this week. It's a good text editor (look out for holy wars on this topic) specializing in HTML & CSS, with a built in SFTP (etc) client so you can transfer files to and from your site. Plus it has really good integrated preview which takes advantage of whatever server-side technology you're using (unlike most other editors) and built-in reference materials.
posted by bcwinters at 1:00 PM on May 27 [1 favorite has favorites]

Probably HTML and CSS? I bought the book Headfirst HTML and CSS - and it's great, really engaging and not dry at all. But since I suck at self learning, I ended up signing up for a class.
posted by delladlux at 1:03 PM on May 27

here's a good place to start for free tutorials.

What kind of web development are you looking at? And what do you mean by development? Depending on who you ask, this could mean anything from graphic design to code-intensive interactive applications. If you can narrow that down, you might get better responses; don't forget that there are multi-year educational programs dedicated to each aspect of this field, so don't expect to master anything in a couple of months.
posted by Chris4d at 1:13 PM on May 27

If I may be permitted a self-link, my site is all about beginning web development.
posted by netbros at 1:36 PM on May 27 [1 favorite has favorites]

I learned HTML by using an eiditing program. On windows, notepad. On macintosh, textedit. On unix (or mac shell) vi or pico. There are plenty of tutorials on doing things this way, Chris4d's link looks like it would have plenty to get you started.

I think starting from the very basics like that you will have a much better knowledge of what goes into a webpage as opposed to using a fancy tool as a first go at it.

That being said, I never personally went past a fairly basic phase of learning, but I do know well regarded professional web developers that also use nothing but a text editing program to do their work.
posted by Antidisestablishmentarianist at 1:40 PM on May 27

Coda's pretty good, especially at half price, and at some point you might want to get MAMP Pro. As well as MAMP's nicely self-contained Apache/PHP/MySQL/etc., Pro also gets you a utility for tweaking settings and setting up multiple sites (e.g. I've got malevolent.dev pointing at a ~/Sites/malevolent.dev/ folder, along with a dozen other dev sites with their own local domains and folders).

Learn (X)HTML first and basic CSS (text formatting etc.), then move on to layout. Try to find a small, simple project that you can gradually improve, e.g. a CV/resume page. You can get a domain and hosting cheaply nowadays to put your experiment live and revel in its awesomeness.
posted by malevolent at 1:46 PM on May 27

@Chris4d

I'm afraid I don't know enough to answer your question. I'm just looking for a good place to get started, and for advice on what to learn first, and where to learn it at. I'm really clueless about all this.
posted by capitalist.pig at 2:03 PM on May 27

Lynda is a perennial Metafilter favorite for teaching all kinds of subjects, including web development (just search by subject).

And, though it doesn't bother me, some around these parts REALLY don't like the @username convention. Generally, quoting the person you are referring to and then responding is the accepted method of address here.
posted by misha at 2:31 PM on May 27

Sorry! Link for Lynda.
posted by misha at 2:31 PM on May 27

I'm a big fan of the screencasts over at css-tricks.com. You're best bet is The Very Basics which covers, you got it, the very basics. The others might be a little too advanced, but keep the site bookmarked for when you start requiring some intermediate learning.
posted by backwards guitar at 2:42 PM on May 27

OK then, no problem. Prepare to be overwhelmed by acronyms.

A very basic website can be composed entirely in HTML. Start there to learn the basics. HTML is what you see when you "view source" in a brower.

A more proper website involves the use of CSS to separate content from presentation. That would probably be next.

There are many ways to generate HTML pages automatically, say, from a back-end database or using variables. For example, blogging software does this (transforming your text input into valid HTML for display on the web). Some client-side scripting languages and server-interpreted languages for this purpose include DHTML, javascript, ruby, PHP, perl, python and SSI.

HTML is basically content plus context: the text you want to display, plus tags that tell a browser what it is or how to display it. A more generic form of this is called XML, which is a language that can be used to mark up any content with context (RSS feeds are an example of XML). AJAX (asynchronous javascript and XML) is one example of a programming paradigm that leverages XML data to create HTML pages. Other languages such as XSLT exist to transform XML into other kinds of XML, or to provide presentation information for XML.

There are many interfaces on the server side that you can bring together to display your web content, each with their own programming language or interface. SQL databases are a common example of this. You would also need to be familiar with the program that sends (serves) your web pages from the server computer to the user on the other end. There are a variety of ways to get the stuff you create from your computer to the server (FTP, SSH) and from the server to the end user (Apache, IIS, streaming protocols)

Last but not least, it is possible to embed other objects into an HTML page which browser plugins then download and render on the user's computer. Flash and Java are examples of this type of web content.

Now, in my mind, a "web developer" is someone who can read and write (at minimum) HTML, CSS, and javascript. Most also know a server-side scripting language like perl or PHP and some flavor of SQL. Good developers know everything I listed above and more.

In addition to web developers, there is an ecosystem of other professionals who contribute to the creation and distribution of web content. Depending on the size of the project, this may include graphic designers, interface designers, marketers, network architects, database administrators, and so on. The more hats a web developer tries to wear, the more likely the output will be mediocre or worse (most web devs are not also designers, for example).

I'm just a hobbyist myself and I have graphic design friends who do web design work. I'm sure there are professionals out there with more depth, but since I'm sort of a beginner, too, I hope that was a helpful introduction.
posted by Chris4d at 3:11 PM on May 27

I only do web development occasionally at the moment, but the following, in addition to the above, should (hoepfully) be somewhat helpful.

• Some Useful Websites
  • A List Apart: A website dedicated to web development. A lot of the stuff that gets posted here is somewhat specialized, but there is a lot of stuff in their archives. Worth looking at.
  • Stack Overflow: A website for asking programming/development questions. There is a lot of knowledge here already and you can get answers to your questions really fast. Most of the time when I ask a question here it is answered in minutes.
    • A question similar to yours on SO. Lot's of good links here.
  
  
  • WebMonkey: A decent collection of tutorials and resources.
  
  
  • Mozilla Web Developers Reference Page: Another good reference.
  
  


• Tools
  
  
  • A good text editor. I recommend MacVim, a great Cocoa port of vim. If you haven't used vim, you should give it a shot. Just open up Terminal.app and type "vimtutor" (without the quotes) and you can start to learn vim. The basics only take a few minutes to learn. The key is just to keep learning new things about vim and using them. Other people also like Textmate (not free) and Emacs (ugh).
  • Firebug and WebDeveloper plugins for firefox. I don't know how anyone ever did web development without these 2 plugins, especially the first.
  • MAMP is super useful, even the free version, for PHP development.


• Where to start: HTML and CSS are a must. Probably some basic javascript (and maybe jQuery), although if you have programmed before that is pretty easy. From there, pick a serverside language/framework (PHP, ruby+rails, python+django) and try to build something. There are a ton of tutorials and references for all of these. You don't have to learn everything all at once. Just try to figure out how to build what you want and go from there.

Hope that helps. I had a couple of other good links that I couldn't find right away, but if I find them later I'll drop a message here.
posted by pwicks at 5:12 PM on May 27 [2 favorites has favorites]

Don't buy anything yet.

Ignore what software you'll use and all that. Why do you want to do web development? What does that term mean to you? Do you like how web sites look and want to understand how people conceive of that, or do you find the way they are organized and structured fascinating and want to understand that, or what?

Sure, take a look at HTML and see if you like working with it; I won't add any more links as plenty of people have posted good ones. But I'm confused as to what you're actually trying to do within the world of web development. There is a LOT of ground to cover here and a little bit more information about what your burning desire actually consists of would be helpful.
posted by dubitable at 7:02 PM on May 27

I was in exactly your position a few years ago, and I started with Jeffrey Zeldman's Designing with Web Standards. It's not really a technical reference, but instead teaches you how to think (and why you're thinking it) in a nice, conversational way. The problem with online tutorials and no-name "learn HTML" books when you're new is that there's a lot of obsolete garbage out there. If you unknowingly roll with one of those, you'll wind up building a website that would be better suited to 1996. Zeldman's book will (mostly) catch you up with what all the cool kids are doing nowadays, and should get you to the point where you can really put a straight technical reference to good use.

Also, as far as your development environment goes, a few good choices have been mentioned so far. You'll want something with a live preview. When I started, there were a lot of freebies, but they seem to have all matured into shareware now for better or worse. Coda, mentioned above, is a great tool but perhaps a bit overwhelming. Other good shareware choices include SubEthaEdit and TextMate. I started with SEE but use TextMate now. Your best free option is probably Smultron. Good place to start and gauge your interest.
posted by Garak at 7:27 PM on May 27

Grids seems to be a big help with web page layouts these days. There is a tool for Mac users that helps create customizable grid overlays. Check out Slammer.
posted by netbros at 8:07 PM on May 27

Just wanted to say my personal favorite text editor for the Mac is TextWrangler, which has the SFTP features mentioned above, but is free.

Also, check whether your local library offers the Safari tech library. At my local library, I can access all those tech books (including the Head First series mentioned above), completely free, just by typing in my library card number.
posted by kristi at 2:02 PM on May 30