HTML and CSS
Start off by following the HTML, HTML5, CSS and CSS3 courses available at: http://www.w3schools.com/default.asp. This will give you a basic understanding of how a web page is constructed and laid out for display. At this stage you may want to have a look at some simple existing websites as they are essentially just HTML and CSS.
Pay particular attention to the CSS that is used for page layout e.g. positioning and floating. It is vital to get a good understanding of this before embarking on designing a site as getting it wrong will cause a lot of work later. There is actually a whole website dedicated to teaching people about floats which you may like to work your way through: http://css.maxdesign.com.au/floatutorial/.
You should make sure you have the Apache HTTP web server installed on your machine which will allow your to create a simple site for learning HTML and CSS. Just create a folder called “learning” under the “htdocs” directory and in that folder create a file called index.html. Point your browser at http://localhost/learning/index.html and you’re ready to go.
Check out your site in several different browsers. In particular IE6, IE7, IE8, IE9, Chrome (latest), Firefox (latest), Opera (latest), Safari (whichever is popular). Notice that different browsers render things slightly differently. In particular notice how badly IE6 often renders things. Note, you’ll need a fresh non-updated install of Windows XP to get IE6 now, a virtual machine is useful for this.
Have a look at CSS Zen Garden: http://www.csszengarden.com/. This will give you a good idea of what can be done with just HTML and CSS.
At this point you should be able to do some basic animations of DOM elements (using JQuery) and produce a reasonable looking web page. Don’t expect to be able to produce anything as flashy as the at this stage. For example the people who wrote Google Zeitgeist have probably been working in the field for a decade or more.
Become more familiar with Joomla. Make sure you have an understanding of how a site is laid out and the separation between the content and the display. Learn about the difference between components, modules and plugins and what they do on the site and how they are added to a site (don’t try writing a module / plugin / template just yet).
Start building a basic website and adding a little content so you have a basis to work with. Make sure you are familiar with the process of backing up and restoring a Joomla site – I suggest installing everything on a separate machine and making sure your backups can be transferred to this other machine. This is a bit of a chore but it’s very good practice for learning how to deploy and run the site. Note you will need to learn a little bit about MySQL as well since you will have to backup and restore a database and create a new user etc.
Add some different templates to the site and get a feel for what you like and don’t like with them and start formulating some ideas about what you would like the S4P site to look like. Once you are happy that you are familiar with how Joomla works from the management side of things it’s time to go under the bonnet and maybe write your own template.
It’s worth pointing out that if you can build a good looking website without writing a custom template and that may be the best option. There is little point in re-inventing the wheel so if, for example, JSN-Epic does everything we want it’s probably best to just buy it and be done with it.
Templates and PHP
Writing a Joomla template is not a trivial task and unfortunately there aren’t many good tutorials out there. This tutorial http://www.lbsaud.com.np/joomla-template-tutorial/ seems fairly up to date so it’s probably worth checking out. A template will be a mixture of some PHP and some HTML. For the most part you can probably ignore the PHP elements and work with the HTML while you are starting out. I, for example, don’t know PHP but I was able to produce a basic working template just by moving some bits of PHP around writing a little HTML (knowing several other programming languages helped though).
If you want to get properly into manipulating Joomla and developing templates you’ll need to learn at least a little PHP so it’s back to W3Schools: http://www.w3schools.com/php/default.asp. This should teach you enough that you can identify PHP statements and look up what they do.
Modern programming is all about knowing libraries of functions (for example JQuery is basically just a library of functions) and learning those libraries takes a long time. Unfortunately until you know the libraries programming is slow and tedious – it’s a bit like writing an essay but having to stop and look up every word in the dictionary. Once you know a few thousand though you’ll find you can breeze through most application development. Good luck