How to make your first game (or website)

Probably the question I get asked most frequently is "how did you get started in this business" and "how can I learn to do the same thing" (in reference to making games and websites)?

How did I learn to do this?

To give a brief answer to the first question, I was bored one summer and decided to learn.  Unlike what most people think, you don't need to go spend money on some class or even on a book (unless that is how you learn best).  The way I learned was simply to look at tutorials and example code on the internet and teach myself by doing.  Today, it is even easier to learn how to make websites and browser based games with many new resources that I would have loved to have had available to me around 2002 when I first got started.

In my opinion, the best way to learn is to go out and do it.  My own experience (which is quite fresh considering I still have a semester left in college) is that sitting in class or reading for the most part boring books isn't going to get you to where you need to go unless you make the effort to put what you learn to practice.  A class like that might be great for learning something like history, but when it comes to programming, design, and putting it together for websites and games, you need to actually get out there and try it for yourself.

Below I will list some various sources that you can use as a starting point, but don't think that if you simply read over a few tutorials you will be ready to go.  They will be a gateway and what lies beyond that gateway is up to you.

How you can learn to do the same thing.

There are many different ways to make a website and even more ways to make a game.  Since I make browser based games which are basically the same as any other dynamic website, I'll be using the terms interchangeably.  I'm going to take a pretty high level view at this to keep this post short, but if you have more specific questions, feel free to leave them in the comments and I'll try to answer anything that anyone posts.

See the site - HTML/CSS

HTML is comprised of the basic building blocks of any website (whether dynamic or static).  Don't get this confused with the recent buzz around "HTML5," which is indeed HTML, but simply an updated version with new features that you don't need to worry about (that can be an entire blog post in of itself).  Basically, if you want anyone to be able to see anything on your website, HTML is required.

There are many, many sites on the internet that you can use to learn HTML, but the site that I wish I had known about when I was learning is w3schools.com.  They have a wonderful guide to teach you HTML as well as many other topics.

CSS goes in the same category as HTML because it is used to style the HTML and make it look good.  You should learn about these topics in the order listed here, as CSS isn't much good without a foundation of hTML.

Like I said, w3schools.com is great for more than just learning HTML.  They also have a great css tutorial, and you can get I will be referencing this site later (no, they didn't pay me to mention their site so much).

Make the site dynamic - PHP

HTML & CSS are fairly basic topics that should take no longer than a weekend to at least get a hang of.  Once you have read over the tutorials and then done some tinkering yourself (remembering, reading isn't enough, you need to actually get your hands dirty to really learn how to do these things), you are ready to move onto more advanced topics.

There are many different scripting languages that can be used to create browser based games -- PHP, ASP, Ruby, etc.  Since my experience lies in PHP and this tends to be the easiest for beginners to learn, this is what I will be talking about in this post.  If you are interested in any of the other languages, a simple Google search will yield many results.

PHP is vastly different than HTML or CSS and will take more time and commitment in order to get to the point where the language works for you rather than against your nerves.  Luckily, PHP is the most widely used scripting language for the web, so there is literally a limitless supply of information on the topic.  A few places to go to get a taste of the language are:

Once again, simply reading any of these sources won't be enough.  You need to actually get your feet wet before you will be able to break out and make something on your own.  A great site for this is Snipplr, which is a large database of code snippets.  After going over the tutorials and/or documentation, I would go to Snipplr (or search Google for sample PHP code) and just try to work through the code to see in your mind how it is working.

The way I first learned was to download code that appeared to be subpar, and then try to improve the code and fix any bugs.  This forces you to really think through the syntax as well as the logic behind the code and gets you in the right frame of mind to always create quality code.  This approach may work best for some and not as well for others, but you need to find an approach that works for you in order to get into that frame of mind and really be able to "read" the code and not just look at it.

Store the data - MySQL

Once you have made your game dynamic with PHP, you will need to store the data about your users in a database.  From my experience, the best database for the web is MySQL (best of all, it is free!).

PHP does a great job of taking an ordinary HTML page and making it something unique for the user, but without a database, this uniqueness can't persist.  An easy example is a turn-based RPG.  Each turn you take will be recorded in a database so that your move and position can be saved, and all other associated users can see the same updates that you do.

Because of this, having a database is just as important a topic as the scripting language (PHP).  Again, MySQL will be your database of choice in this scenario, and w3schools.com will again be your tutorial of choice.  Extensive, official documentation can also be found at mysql.com.

Further interaction - JavaScript/Flash/Other

So the main components of your first game have now been covered, but what if you want to make your browser based game or website a little more interactive and exciting.  JavaScript, AJAX, and Adobe Flash are great and common examples of ways to achieve this.  I personally prefer JavaScript/AJAX for my own projects, but Flash is generally the most common for online games (it'll cost you).

I'm not going to cover these topics very thoroughly since they can get quite a bit more complex and it is important to focus on the above building blocks before trying to jump into JavaScript or Flash.  However, if you have gotten past the above steps and feel comfortable, you can do some really great things with both.  There is a tutorial for JavaScript on w3schools.com and there is also a Flash tutorial on the same site.

What software should I use?

This really comes down to personal choice, but I'll lay out some of the more popular options for various platforms and let you know which of those options I prefer.

Programming (Windows):

Programming (Mac):

  • Coda - this is what I use

Design (Windows/Mac):

What next?

If you have gotten this far, great!  You have successfully made it further than 99% of the people that will attempt this and are ready to start making your own game.  An idea and a little bit of creativity is all that you need.  Use your new skills as a tool, they can solve any problem and can make anything that you think of a possibility.  Making games and websites is so much fun because the possibilities are endless and a little problem solving goes a long way.

Have fun developing and let me know if you make something off of my advice!