# Getting started

## New fiddle or a Boilerplate

Opening an empty fiddle will give you the option to start fresh or create a fiddle from our boilerplates:

![](https://2867931111-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jXGYtvV0gDWqyZIc-%2F-LNu_TN1FjMCmA_viUv1%2F-LNub2Y_k9L1Abt11dxs%2FScreen%20Shot%202018-10-03%20at%2017.45.55.png?alt=media\&token=f90eac6c-515a-4443-b448-5831bd90ce01)

## Entering and running code

JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result.

* **HTML** - structure code, no need to add `body` `doctype` `head`, that's added automatically
* **CSS** - styles. You can switch pre-pocessor to SCSS
* **JavaScript** - behavior. There are many frameworks and code pre-processors you can use

Once you enter code, just hit **Run** in the top actions bar, and the fourth panel with results will appear. 

## Saving and Forking code

* **Save** / **Update** will do what you think, it'll save a new fiddle or update an existing one (and add a version number to it)
* **Fork** will split out an existing fiddle into a new one, starting with version 0 

## Setting fiddle as Base Version

{% hint style="info" %}
This action is available for **logged in users only**.
{% endhint %}

If you're working a fiddle and updating it, the version number will increase, sometimes if you're satisfied with the code you have it's good to save it so that the version numbers are hidden, and the version you've set as base is the default one.

For example if you have a fiddle `jsfiddle.net/oskar/aba321/23` setting as base will make the 23 version accessible at `jsfiddle.net/oskar/aba321`

{% hint style="info" %}
When you save a **new title or description** for the fiddle, saving it will not result in any change on your dashboard, **you need to set the fiddle as Base for the new title and description to appear**.  
{% endhint %}