This is a super useful tool that lets you try out and edit code and see the changes "live" in the Output pane.
You are in that pane now, but there are five tabs up top. They give you the equivalent of having separate .html, .css and .js files all in one place in the cloud!
Follow these instructions to play around:
Click on HTML to see the source code.
Type some text in that pane and see the changes magically take place here in the output
Add an "a" tag around THIS ALL CAPS TEXT to link to the google home page
Okay, now click the CSS tab
This is where you can test out new styles
Try out your CSS fu and see if you can change the color of the text in this list item by targeting the class with a new style declaration
Still with us? Great! Now click the JavaScript tab.
This is where we can trigger dynamic interactions with the user and do all sorts of fun, fancy stuff.
Read through the comments and code, and then Click the buttons below to see what happens.
After you click the buttons, use your DevTools to inspect the elements you changed in the rendered Output and compare the HTML and CSS to the source code in the jsBin panels. They should be different! JavaScript actions change the page without reloading —powerful code magic
Finally, slick the Console tab
This is where we can write debugging output to see what our code has captured, and troubleshoot while developing.
If you got through all that, play around, try to break stuff and figure out why.