Nero JSFiddled while Rome burned

By: Susan Ibach, January 9, 2012

If you haven’t found it yet and you are doing HTML, javaScript or CSS development, check out jsfiddle!

Sometimes you hear about a cool new HTML5 feature and you want to explore it, but you don’t want to go through the hassle of building and deploying a web page to do it. This is when I love JSFiddle. It’s a sandbox for web development!

Let’s start with something really simple.

Go to jsfiddle and in the HTML pane type

<h1>Hello World</h1>

Then hit the Run button

image

 

 

 

Now you can see how your web page would look with that HTML in the Result pane!

image

Then maybe you want to try out some CSS3 features, so you add a little CSS to the CSS pane, maybe the border radius for creating rounded rectangles

image

If you want to try a little javaScript you can add that to the javaScript pane so you can even try out HTML5 features like Canvas!

image

When you are done you can  share your code with others! Cool tools make it easier to explore!

Tagged with: , , , ,
Posted in Training & Webcasts

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Avatar of Susan Ibach

Susan Ibach

What people are saying about #webnotwar

Look! Its @fharper and @jollfr talking about open source and the cloud at #S2LQ! #webnotwar pic.twitter.com/iWqdcYRaHF

Retweeted by Jonathan Le Lous

Microsoft & Savoir Faire Linux en grande discussion au #s2lq #webnotwar @ Espace Dalhousie instagram.com/p/tDVTP2itka/

Microsoft & Savoir Faire Linux en grande discussion au #s2lq #webnotwar
Retweeted by Laurent Bounin

Look! Its @fharper and @jollfr talking about open source and the cloud at #S2LQ! #webnotwar pic.twitter.com/iWqdcYRaHF

Retweeted by Laurent Bounin

Look! Its @fharper and @jollfr talking about open source and the cloud at #S2LQ! #webnotwar pic.twitter.com/iWqdcYRaHF

Microsoft & Savoir Faire Linux en grande discussion au #s2lq #webnotwar @ Espace Dalhousie instagram.com/p/tDVTP2itka/

Microsoft & Savoir Faire Linux en grande discussion au #s2lq #webnotwar

Bonjour Québec! Tellement excité à propos de #S2LQ! Je vous demande d'excuser mon français; ce n'est pas ma langue maternelle :) #webnotwar Retweeted by Laurent Bounin

Bonjour Québec! Tellement excité à propos de #S2LQ! Je vous demande d'excuser mon français; ce n'est pas ma langue maternelle :) #webnotwar

@mgifford likewise! Good to meet. Look forward to making #webnotwar together!

Hellllllo Montreal! Spreading #opengov and #opensource goodness makes me "Feel So Good"! #webnotwar @… instagram.com/p/tCIfVmOJIP/

Hellllllo Montreal! Spreading #opengov and #opensource goodness makes me "Feel So Good"! #webnotwar

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Retweeted by Jacques Mailloux

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep @… instagram.com/p/tCADH_uJP9/

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep
Retweeted by Jacques Mailloux

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep @… instagram.com/p/tCADH_uJP9/

Thank you Ottawa for rocking #OGT14! Now we are off to Quebec for #S2LQ! #webnotwar #opendoesntsleep
Retweeted by Make Web Not War

Join the conversation about empowering young women in politics with @headstartottawa #ogt14 #webnotwar pic.twitter.com/Z1kJrrTPAW

Retweeted by Craig Carter-Edwards