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

.@trishgarner thanks! How can one thing be so awesome and stupid at the same time? Lol #OGT14 #webnotwar

It's official. I've bought my new bike for the Open Government Tour! I pick it up next week :-) 3.bp.blogspot.com/-LiV9zIcK4wk/U… #OGT14 #webnotwar

The Genesis of the Open Government Tour: webnotwar.ca/genesis-open-g… - An introspective look at how @richardpietro is making #webnotwar Retweeted by Make Web Not War

The Genesis of the Open Government Tour: webnotwar.ca/genesis-open-g… - An introspective look at how @richardpietro is making #webnotwar

I submitted my @GTEC speaker application yesterday and in the spirit of being Open, here it is myeinsteinjob.blogspot.ca/2014/04/my-gte… #OGT14 #WebNotWar Retweeted by GTEC

I submitted my @GTEC speaker application yesterday and in the spirit of being Open, here it is myeinsteinjob.blogspot.ca/2014/04/my-gte… #OGT14 #WebNotWar

As part of #OGT14, I will be hosting 2-3 "practice events" in June in Southwestern Ontario...here is why: youtube.com/watch?v=OT4y2N… #webnotwar

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar Retweeted by Susan Holt

RT @richardpietro: Here's a scary #OGT14 reality check: for a period of 3 months, I will be "Richard Pietro of no-fixed address" #webnotwar

Here's a scary #OGT14 reality check: for a period of three months, I will be "Richard Pietro of no-fixed address" #webnotwar

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar Retweeted by Nick Scott

The Open Government Tour has one more City Champion! @thefaketree through @RRPSNBSPRN will help in Moncton (and NB)! #OGT14 #WebNotWar

The new #webnotwar community camera has arrived. I had no idea gopro was that small... It's like a pygmy camera lol pic.twitter.com/ecYz6CH48X

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Alexis Smirnov

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Victor Stinner

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If

Retweeted by Montréal-Python

Wow packed house @mtlpy meeting #45 #pycon2014 effect? Looking forward to the talks #webnotwar pic.twitter.com/C9hILAd7If