(Note: Images in this page have been updated to reflect the new layout design of jsFiddle.)
Please visit the website and create an account. For those who wish to check out the thorough documentation, please refer to http://doc.jsfiddle.net/.
This is the initial view of your first "fiddle." Note that the layout is largely split into three parts:
You may notice a gear icon in the right top corner of each quadrant. Upon click, a small popover window opens up and allows the user to connect and initialize jQuery libraries.
Now that this prototype has been setup, let us insert some testing code to make sure that this fiddle works well. Insert a random text in HTML pane, and some basic CSS rules in CSS pane. Upon pressing "Run," you will notice the page renders as you have written:
If you would like to share this particular fiddle with others, you can "save" your progress and share the resultant permalink. Once the page loads, you will notice that the URL in the address bar will contain a new text (ex. http://jsfiddle.net/riskun/64eCh/) -- and the header bar would have changed:
jsFiddle allows you to save your progress in an incremental fashion, by saving different "versions" of your fiddle every time you press "Update." Upon pressing "Update," you will notice that a number is appended to your URL, and the button labelled "Set as base" will show up.
Until you set a particular version of your fiddle as "base," anybody accessing your fiddle permalink will see the version that has been originally saved -- no matter how many updates you make. Please make sure that you set the desired version as "base" when you share your code with others.
This statement opens a pop up window that displays the text "Hello world!". This content will change based on the value you place between the two parentheses.