Without further ado head over here to grab the crankSlider Jquery Div and Image Slider.

To be honest, web development is all about practice and understanding, of course creativity as well (I'll get to this later). Here's a little scope about how I picked up on web development. I started making websites through FrontPage when I was 13, using only a bit of HTML and mainly the WYSIWYG (what you see is what you get) editor. It wasn't until I was 15 that I started developing with HTML and using CSS. When I was 18 I felt the need for more power in my websites which is when I picked up PHP and MySQL. About a year ago was finally when I started picking up on Javascript.

Basically, I learned everything through every resource except taking classes. I would search through the web, read books from the library or just pure trial and error. It wasn't insanely hard to gather all the information but the only times when I really learn was through projects and experiments. Web development is definitely a hands-on type of thing. Point is, if you want to learn web development you'll have to spend 30% reading and 70% doing.

The Program/Software

Web development can be accomplished through a few languages and most of them don't require any special software to write. The basic notepad that came with your Windows is capable of completing the task. I prefer to use a software that color codes coding to mitigate headaches. Here's a list of software that you could choose from.

• Notepad++ (Free)
• KompoZer (Free)
• Amaya (Free)
• SeaMonkey (Free)
• Microsoft Expression Studio ($149)
• Adobe Dreamweaver ($399)

I personally use Dreamweaver on my computer as I have been using it since I was young so I have a nostalgic feeling to it. When I'm on the go I have notepad++ on my USB.

Learning HTML

Before you learn anything else, you have to be really good at HTML (hyper text markup language). The basic of websites all boils down to this language. HTML is the markup language containing markup tags that creates the webpage document. Every website requires HTML to make it work, yes even Flash websites.

Your basic website is wrapped in an opening and closing HTML tag. Opening tags are surrounded by arrow brackets while closing tags are the same but there's a front slash immediately after the first arrow bracket like such

Within the HTML tags there will be a HEAD and BODY tag. The head tags will describe items related to the website but will not be produced in the content. Items such as site title, meta tags, CSS, and Javascripts can be defined in the HEAD tag. The BODY tag will describe content that will be outputted to the user. A code like this:

Will output "Hello world!" on the browser with the title Test Page in the browser title bar. Once you get this down you're ready to start building the website. The goal following this is to output the content you wish to show, it could be paragraphed text, images or tables. Everything you wished to use requires a markup tag to make it work. It'll be redundant for me to give you a tutorial on all the tags but here are two resources that are great.

• w3school – HTML
• HTML.net

w3school is great, as they are short writeups but concise so you can digest all of the content quickly. HTML.net is more detailed and a great read too but they incorporate a bit of CSS so its better to read it after w3school to cross-reference some of the ideas and undestanding. Once you've got this down you're ready for some CSS.

Learning CSS

CSS (Cascading Style Sheet) is a language that focuses on the style and layout of your markup language. Its a common standard now generate the accurate aesthetic results of many websites. There are a few ways to include CSS in your website.

Once you have your website linked with some CSS you can start controlling your website. Here are some example of CSS controlling a webpage.

Here are the resources to read to learn all about CSS.

• w3school – CSS
• HTML.net

Again its good to go over the basics with w3school first then head to HTML.net.

At this point you should practice making a few websites with HTML and CSS. Try to envision something and then build it. The best practice is to try to design something in Photoshop then try to build a web site from it. As I always tell developers, just design it and I'll make it into a template, because I don't believe there's many design limitations that can't be built with HTML and CSS. By doing this exercise it'll help you learn different methods of building different elements.

Notes and Reminders

There are some things you should keep in mind when building with HTML and CSS though.

Using tables for design

This is a no and not recommended. A lot of people argue over this topic. Some believe that tables are good for design because its easier to control and it holds the shape of the original design better. The problem is tables are clunky, heavy in coding and not very flexible. Tables have specific standards to them so if you have two rows and two columns, the columns have to be equal width while rows have to be equal height. In order to work around that you'll have to nest your tables, imagine dealing with that. Its also less flexible for future expansions. You should use a table for tabular data though. Extreme non-table believers will argue that you don't, they can produce the same effect with other elements. They sure can but when it comes down to the user extracting your data (copying to word or excel), copying for a table is much easier than anything else. It just makes sense.

Avoid absolute positioning of everything

Many developers when they start will notice the amount of control with absolute positioning. It is not until their design gets more complicated that it all falls apart. Absolute position provides more flexibility but will sometimes diminish your control, use wisely.

Test in multiple browsers

There are various browsers on the web. It sometimes depends on who your website caters to but mind as well cover the major users. Test on desktop machines with Internet Explorer 6, 7, 8, 9, Chrome, Firefox, Safari. On mobile devices with Android, Opera Mini, iOS. Just make sure everything's consistent. This is a good chance to test how good your skills are too.

See what I'm mumbling on about right here:
Demonstration of Marquee Tool

Once again I'd like to clarify that I did not make the Rectangular Marquee Tool, it was written by Sergey Koksharov using certain functions of the Prototype/Scriptaculous framework. I'm merely just doing some tweaks to make it work better in my circumstance. So all credits goes to Sergey and the Scriptaculous team.

My modification will allow you to do certain things such as:

• Define a input image dynamically
• Define the output image dynamically
• Generate a final output image

I believe the PHP included in the original script was a bit dated so it wasn't working on my machine and servers that's why I made my own version.

So to start off you need to download the required files from: here. Then you need to extract the files into a scripts folder or whichever you prefer just remember to rename the source path after. The real files you need are:

• marker.css
• prototype_reduced.js
• rectmarquee.js

Once you've got the files extract them to the proper folders and create fresh PHP file to work with. This is the file your script will run from. I'll break down my code into chunks for you to understand, but I'll go in order so if you copy each chunk and paste them in the same order it should work. That is if you're reading this instruction right ;)

Before the HTML

So this piece of code starts off your whole document even before the HTML code. There's only two codes you need to modify which is the $img_src (original file) and $img_dst (final thumbnail file).

The HTML and HEAD Tags

This is the code to begin your HTML tag and your chunk of HEAD tag. Note that if you didn't place your files in the same location you have to change the source path.

Your BODY and Closing HTML Tag

So all that's left is the BODY tag. There's really no modification you need to do here except for the (don't paste this in your code in order):

This line defines where the crop box starts and how big it should be. You can play around with it if you want. Anyways here's the coding (do paste this in).

Now we're just about complete here. All this tool does right now is let you select an area to crop. To actually make the thumbnail you need the assistant of PHP (you can do it in JS but I prefer PHP). You need to have the GD library enabled in order for this to work.

At this point you need to create your last file which is named crop.php. All you need in crop.php is this:

That's it, and everything should work like planed. I've tested this script out a few times but if anything doesn't work just let me know.

Javascript

Include this script either as a separate file or in between the head tags.

CSS

This is your CSS code that needs to also go between the HEAD tags or you can have a separate file once again.

HTML

This is your HTML code for the tabs, obviously you can customize this all you want to fit your content.

The final tweak, lastly to ensure a default tab is selected from the beginning change your opening BODY tag to the following.

Adding Tabs and Content

Ensure that you add the same amount of tabs as content or else there won't be enough tabs per content or vice-versa.

Adding Tabs

To add tabs just keep copying and pasting the following lines. Ensure the number of the id counts in order from 1, 2, 3… etc. You must have tab_ in front of the number.

Adding Contents

Same thing with the content just keep on duplicating and name the id in sequence in terms of numbers.

If you have any questions or trouble with this script just let me know.