Where do I start to make a website?

August 5, 2007 5:58 AM

What should a web site programming noob know to get started on her very first website?

I have what I think is a pretty good idea for a website that could possibly become fairly popular in for a certain population of people.

I know absolutely nothing about programming websites, and I'd like to teach myself to do this. I'd like to see if I could get a website started on my own and maintain it. I don't really have the financial means to take any sort of classes at my local university, unfortunately, so this will be an independent study sort of thing.

My website might be something like Flickr by not nearly as involved and more specific and definitely not user-uploadable at first. I'd like to host some images, tag & categorize those images, and make the database of images searchable by a variety of tags and categories. If there are links related to those images (outside of the tags and categories, obviously) I'd like to incorporate the ability to link to the outside source. And I'd like to leave myself open for the ability to have some advertisements as well in the future.

Somebody tell me where to start! What should I read? What should I know? What websites offer good guides for absolutely unexperienced programmers? If you teach web programming, what books would you recommend to your 101 level students?

I love you all dearly (in advance) for any help you can offer.

posted by santojulieta to computers & internet (17 comments total)

If you want to learn enough to do this stuff yourself, one of the books on PHP and MySQL will have enough info to get you up and running. They will all cover the same ground, so browse a few in Borders and pick one that appeals. FWIW I have read the dummies guide, one published by Wiley and Sons and one that was originally published by IBM (I read as a PDF, so is probably downloadable free somewhere) but these were all 5+ years ago.
If you want to be a bit cutting edge, go check out Ruby on Rails. From what I can see it offers a bunch of benefits in fast prototyping (it automagically fills in the blanks for a lot of database editing forms etc.) and programmers I know say the code is a breath of fresh air.
But if you want to go with the crowd, PHP or PERL are ubiquitous.
I just posted a question on outsourcing web development, so you might want to read the answers there too, for another option.
posted by bystander at 6:25 AM on August 5, 2007

W3Schools has decent tutorials and a nifty preview editors. One thing about PHP/MySQL-type apps - it's easy to build something, but building it securely is a whole different story.
posted by djb at 7:18 AM on August 5, 2007

I always found it difficult to get into the Dummies and Visual Quickpro Guides books, and others like them, because their examples never seemed very useful for what I wanted to do. What I have had some success with, however, is just going to documentation sites and browsing through them to get an idea of what tools like PHP and MySQL are capable of. You can look at examples of what people have done, especially at php.net to get some more ideas and help you flesh things out.

Of course, the best way to start is to draw out a diagram of everything you want to do, what you think needs to be done to do it, and then go from there. It would be helpful to read through most, if not all, of the tutorials at W3Schools linked above. They're very short.

Having a good grasp of how to use the box model (divs!) in CSS will save you a lot of design trouble in the future. It takes a lot of experimenting to get things right, but you should learn quickly and the knowledge will pay off.

Oh yeah, make sure you have a decent web host with PHP and MySQL access. 1and1 has affordable packages for only a few bucks a month, and they come with a domain name or two, I believe. Or depending on how much you value your time you could try to install Apache on a local machine.

Good luck!
posted by erpava at 8:00 AM on August 5, 2007

If you're interested in setting up something like what you describe but you don't actually want to learn programming just yet, you can re-purpose Wordpress for all kinds of things. It already has a built-in search, categories, image upload, and you can always re-purpose the blog Post function to store your images, thus displaying all your posts by category would give you a thumbnail gallery. It'd be a good flexible framework to start with if you're also learning PHP and MySQL.
posted by deern the headlice at 8:01 AM on August 5, 2007 [1 favorite has favorites]

Learn CSS and HTML as a first step so you know how to create a basic site. I'd recommend Dummies Guides books for this, they break it down for the layperson.
posted by JJ86 at 9:21 AM on August 5, 2007

There are scads of open-source content-management systems that can more or less do what you want, so getting your site up and running would be more a matter of learning how to configure the CMS than learning to program. Opensource CMS lists a bunch of them, but only those using PHP+MySQL (there are others based on perl, python ruby, etc). Wordpress is one example, but may not be appropriate for your needs as it doesn't really offer the community-oriented features of many other CMSs.

Even assuming you can get something functional out of the box with an existing CMS, you'd be well-served by learning HTML, CSS, and at least a smattering of whatever scripting language that CMS uses. That'll let you customize the look, feel, and (maybe) functionality of your site.

You should also learn basic Unix commands so you can navigate your hosting service from the shell.
posted by adamrice at 9:27 AM on August 5, 2007

Well, firstly you need to learn HTML & CSS, and preferably with a slant towards web standards. I would recommend this book - the previous edition was fantastic, so I'd imagine this will be just as good but updated.

Then you're looking at a server-side language. Easiest way by far (as in most books, available on most webhosts, most stuff on the internet for it) is, as has been mentioned, PHP and MySQL. The first is the programming language, the second is the database, and whilst you can use PHP with other databases it's most common to pair it with MySQL.

As has been said, you can just pick up a book on this. Try and get a recently published edition, and as bystander said, just go and browse around in B&N. My personal leaning would be towards something published by O'Reilly or Wrox, although I know that the Sam's one is quite popular. I would avoid the Visual Quickstart/Quickpro one - I was majorly unimpressed by it when I was at your stage, and I don't believe there's been a new edition since.

As has been said above, it's easy to get a basic database-driven application going with the PHP/MySQL combo, which I guess is part of what makes it so popular. However, it's a lot more difficult to write something that's secure. Short of giving you specific examples, remember: never trust your users, and validate everything you can (form input, uploads, calls to included pages etc. etc.). Plan for your users being both malicious and incompetent. One big thing that you'll want to Google on how to prevent is cross-site scripting.

There's tons of stuff on the internet that will help you should you run into any specific problems. Good luck!
posted by djgh at 9:34 AM on August 5, 2007

Practical PHP is one of my favorite books on the subject. It's very easy to read and covers more ground than the 'php for dummies' style books I hate so much. The entire book is in the wiki, but if you prefer paper, it's available on amazon.
posted by IronLizard at 10:15 AM on August 5, 2007

HTML + CSS. Then, PHP+MySQL or Ruby + Rails or Python + Turbogears.
posted by signal at 10:36 AM on August 5, 2007

santojulieta, there's some great advice in this thread, but I'm going to take a more back-to-basics approach. Forgive me if I'm covering stuff you already know.

A web site generally involves many many files working together. Some of these files are image files, sounds or videos. Others are programs (that generally explain to the computer how to display the images/videos/text or control database interactions).

All these files start out on a server, which is a publicly-accessible computer (many people can hook up to it and download files from it). So the images, text files, programs, etc. all start out on the server. If you're a web developer, you may create these files on your own machine, but you'll eventually have to upload them to a server so that other people can see and use them.

Okay, when I visit your website, SOME of the files on the server will download to my computer and be displayed in my web browser; some will stay on the server. Web browsers are complex applications, and they can display all sorts of images and run all sorts of programs -- but they can't do everything. Servers can run the programs that the browsers can't. So most websites are co-run by both the users browser (after he downloads some of the files from the server) and the server. We call the browser the "client side" and the server the ... uh ... "server side."

Though browsers get more abilities each year, there are five main things they can do:

1. display image, video, sound and text files.

2. understand HTML code (more about this soon).

3. understand CSS code (more about this soon).

4. understand Javascript code (more about this soon).

5. understand Flash flies (more about this soon).

So, in order to learn how to create the CLIENT side of a website, you need to master the above technologies: you need to know how to create images for the web (e.g. in Photoshop); you need to know how to code HTML; you need to know CSS; you need to know Javascript. Most, but not all, sites use those three languages (HTML, CSS and Javascript). Flash is a bit more optional and controversial. Some people love it; others hate it and don't think it should be a part of websites.

About those languages:

HTML (Hypertext Markup Language) explains to the browser how a web page is structured. For instance, in HTML, each paragraph is surrounded by paragraph "tags," like this.

<p>this is a paragraph<\>

The browser doesn't display the text inside the angle bracket. Instead, it uses that text in order to understand the meaning of the content inside the angle brackets. So if a browser has some special way of displaying paragraphs -- as opposed to, say, titles or bulleted list -- it will understand which parts of the document ARE paragraphs from the tags.

CSS (Cascading Style Sheets) explains to the browser how, specifically, to display the HTML content. So, as I explained, the HTML tells the browser that specific content is a paragraph or a title or whatever, but how should a paragraph be displayed? What font should be used? Should it be indented in at the start? Should titles be red? blue? In a larger font than paragraphs? This is the job of CSS. And one CSS file can be applied to dozens (hundreds) of HTML files. So if you want to make all paragraphs on all of your web pages have the same look, you can apply to same CSS file to all of them. Make a tiny change to that CSS file and all of the associated web pages will change their look.

Javascript is generally used for interactivity. For instance, if you go to google maps, you can drag the map around with your mouse. Javascript allows that to happen. In general, HTML and CSS explain to the browser how the page should look at first, when it first downloads. But if the page changes AFTER it's downloaded (e.g. because the user did something with his mouse), Javascript describes how that change should happen.

NOTE: Javascript alone isn't good at downloading additional content. In other words, all Javascript can do is to manipulate the original content that downloaded when the page first loaded. So imagine a Javascript-based page that displays a button. You click the button and a new image appears. That image was always there -- it downloaded with everything else -- but the CSS told it to be invisible. All Javascript did was make it visible.

This is so often misunderstood that I'll give one more example: when I was first learning Javascript, I made a little word-guessing game (hangman). When you were done guessing a secret word, you could press a PLAY AGAIN button to try to guess a new word. Each time you pressed the button, the Javascript code would pick a new secret word from the dictionary.

But because Javascript CAN'T download new information after the page loads (and because, at the time, Javascript was the only language I knew), I had make the ENTIRE dictionary download to the users browser (and also make it invisible). A better solution would be to leave the dictionary on the server and just download one word. When the user presses the button, the page would then request another word from the server. But I didn't know how to do that. And I couldn't do it using just Javascript.

Flash -- in addition to displaying (animated) images, sounds anc videos -- can do interactivity just like Javascript. Flash and Javascript can do SO many of the same things that people get confused and have fights over which of these two technologies to use. Compare maps.google.com to flashearth.com. maps uses Javasctipt; Flashearth uses Flash. Both sides do pretty much the same thing.

The snazzy word for Javascript-based, interactive sites is AJAX. Purists will tell you that AJAX means more than just Javascript, but in casual conversation, an AJAX site is a site like google maps -- one that uses Javascript for interactivity. The big debate, when a company wants an interactive site, is Flash vs. AJAX. There are some good arguments (and bad ones) on both sides, but ultimately you can get the job done either way. Like Javascript, Flash alone can't download new info to the browser after the page has finished its initial load.*

* this isn't 100% accurate. Both Flash and Javascript have LIMITED capability to download certain types of new info, such as new images. But they can't do much. They can't, for instance, look up info in a database and display it. The database is on the server, and neither Flash nor Javascript can reach it.

Let's pause here for a minute and talk about learning. If I were a budding web developer, the first thing I'd learn is HTML. It's a very simple language and you can learn it in a couple of days.

Then I'd learn CSS. CSS is also simple, but it's much more nuanced. It's one of those learn-in-a-day, lifetime-to-master thing. But I'm betting you could become pretty good with those two technologies given a month of intense study.

After you learn just these two languages (and graphics), you'll be able to make usable sites. They'll just be able to display stuff with not much interactivity, but they WILL be real sites.

Next up is Javascript (and Flash if you choose). This is a MUCH more complex language than CSS or HTML. It's a full-fledged computer programming language -- the sort of thing people study in Computer Science courses. It's probably a six-months-to-learn, lifetime-to-master thing.

We've only covered the client side so far, and, as you can see, there's already a ton of stuff to learn. The GOOD news is that at each stage of learning, you can make useful things. So you don't have to learn it all at once. But it is a lot of stuff. Different people deal with this in different ways. Some people hunker down and learn it all, bit by bit. Others specialize in one technology and team up when they need to use other technologies. (At my job, one guy does the graphics, another does the Javascript, etc.)

Okay, the server-side: if the browser needs to communicate with the server AFTER the page loads (e.g. to get more information based on a user request), you'll need to learn some more technologies.

For instance, if the user buys something, he needs to type in his credit card number and that number has to get sent to the server for processing. Or, if the user posts something on a message board, his text needs to be send to the server. Or if the user looks something up and search-results need to be returned to him, a database on the server will have to be queried. For all of these tasks, you'll need to learn a server scripting langauge.

There are a gazillion such languages: PHP, Ruby, Java, Perl, Python, ASP, ColdFusion (Metafilter's scripting language!), etc.
All of these languages do the same thing -- control any data processing that needs to happen on the server (database interaction, credit-card lookup, etc.) -- and though people get into big cats vs. dogs arguments about which language is best, most people only learn one. PHP is, I believe, the most popular one at the moment.

If you've learned Javascript already, these languages should be pretty easy for you to master. For instance, PHP is very similar to Javascript. If Javascript is Spanish, PHP is Portuguese.

IF you're going to use a database on your site, you'll also have to learn SQL, which is the special language used to set up and query databases.

There are other technologies involved, but I'd say that if you learn graphics, HTML, CSS, Javascript (maybe Flash), PHP and SQL, you can proudly call yourself a web developer. And there are plenty of developers who don't learn all these things. Many focus on either the client or the server. I know some PHP, but I'm mostly a client-side developer. I team up with other people when I need server stuff done.

And, as many have mentioned here, there are some "canned" solutions, such as CMS systems. These are programs (generally using all the technologies I mentioned) that are already written. They do general-purpose things that many people want, such as blogs, message boards, shopping carts, etc. And they're usually configurable via a control panel. Of course, if you're not content with what they do out-of-the-box or via changes you can make on the control panel, you're stuck. That's when it's great to know how to do it yourself.

How do you learn all this stuff? Well, you're lucky. You live in a time where there's a whole industry waiting to teach you this stuff. Books, websites, videos, etc. I won't give suggestions, because many people here have done so already. Just go to a bookstore, buy a book on HTML, and start reading!

Good luck.
posted by grumblebee at 11:57 AM on August 5, 2007 [18 favorites has favorites]

Definitely start with a firm understanding of (x)html and css. Then go learn a programming language and some SQL and you can start making something.

This is going to take a while though. Starting from scratch, learning how to make a dynamic web site is really a big undertaking. So here is what I think would be an effective way of doing this: See if there is any kind of open source software that does what you want. There might not be, so then try to find one that does almost what you want. Look hard, it probably exists. Then play around with that code and see if you can make it do what you want.

This way you can get more immediate results, and it has the side effect of teaching you a lot on how to make a website. Google when you're stuck.

I don't know how much time you're willing to commit to this, and I might be wrong, but it sort of sounds like a project that would be to big for a beginner to build from scratch. But then, don't let me discourage you. Knowing how to make stuff for the web is highly rewarding and I haven't ever regretted investing the time it took to get there. Good luck!
posted by cheerleaders_to_your_funeral at 12:09 PM on August 5, 2007

Also: What grumblebee said.
posted by cheerleaders_to_your_funeral at 12:13 PM on August 5, 2007

What gumblebee said is as good a high level explanation as you're going to get on this topic!

I will quibble slightly about Javascript, though. Grumblebee said: "NOTE: Javascript alone isn't good at downloading additional content ... " This is not really true at all.

Javascript can do basically anything you need in terms of manipulating HTML pages, so there's really no need to worry about that when you're mapping out what parts of the system will do what jobs, you can basically assume Javascript can do whatever you want in terms of manipulating the page.

Other than that, though, good luck! Web application programming is challenging and requires lots of interconnected systems that you need to know at least a little about. That said, it's also a really well documented space, and it is most definitely accessible for a newbie. Just take it one piece at a time and don't get daunted by all the pieces.

Oh, also, it's worth trying to find someone who can answer questions for you while you're going through this process. There's lots of stuff that's really easy to bogged down on that an expert can quickly get you unstuck on. I don't know where you find people like that, though. I went to an engineering school so it was easier for me to find mentors, I imagine.
posted by heresiarch at 2:29 PM on August 5, 2007

PHP + MySQL is the Civic with a ridiculous fin bolted on the back of web development. Seriously consider Ruby on Rails or one of the Python frameworks after you've absorbed enough about HTML and CSS to make it work for you.
posted by moift at 2:39 PM on August 5, 2007

To clarify, Javascript CAN download additional files from the server -- images, text, etc.

What it can't do is to store information on the server or manipulate information/files on the server. So if you have a form on your web page, there's no way, using Javascript alone, that whatever the user types can be sent to the server and used to make a change to something on the server. Javascript can't store the user's text in a database or use it as instructions to, say, alter the colors in an image that's on the server.

For those sorts of things, you could use Javasctipt/HTML to SEND the info to the server. But you need some sort of "catcher" on the server to grab that information and so something with it. That catcher should be a server script, such as a PHP or Python script.
posted by grumblebee at 2:42 PM on August 5, 2007

To see the awesome power of Javascript, check out http://www.tiddlywiki.com/. It's an entire wiki, contained on one web page. And if you choose View - Source in your browser, you can check out the whole Javascript program.

The one thing this page can't do is save your changes. THAT would mean altering it on the server, and Javascript can't do that.

To be fair, it's not intended for that. It's intended for offline use. But if the creator wanted to allow you to post to the wiki, save the changes, and they view them online next time you visited the site, he'd have to use a server script in addition to Javascript.
posted by grumblebee at 2:46 PM on August 5, 2007

Holy Moly, Grumblebee! Thanks for all the help everyone! As I said before, I love you all dearly.
posted by santojulieta at 3:49 PM on August 5, 2007