Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Welcome to JS Bin</title>
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
  
<body>
  
  <div class="wrapper">
    
    <img id="dave" src="http://static.jsbin.com/images/logo.png" alt="Dave, the JS Bin bot">
    
    <div id="welcome">
      <h1>Welcome to JS Bin!</h1>
      <p class="bubble"><strong>Hello</strong>, I'm <em><strong>Dave</strong> the <strong>JS Bin</strong> bot</em>. <br/>JS Bin is a JavaScript, HTML and CSS playground. If you want to experiment, learn or help your friends with a problem, then JS Bin is for you.<br/>Have a play and build something <strong>cool</strong>!<small id="message">Oh, and please don't press me, I get dizzy...</small></p>
      <h2>But what can I do?</h2>
    </div>
    
    <div id="features">
      <ol>
        <li>As you type, HTML and CSS is automagically rendered <em>live</em> in this window. I'll save a new bin for you too.</li>
        <li>If you're <a class="open" href="#register">registered</a> and logged in, I'll remember all your bins and give you a nice complete list with quick previews.</li>
        <li>You can even use keyboard shortcuts to help you get around faster - just <a class="open" href="#keyboardHelp">hit ctrl+?</a> for the full list.</li>
      </ol>
    </div>
    
    <div id="next">
      <div>
        <h2>Get meddling!</h2>
        <p>Open the <a class="open" href="#css">CSS</a> panel and try changing things about! You'll see this window update <em>live</em> (and get your own unique copy of this <em>bin</em> right away).</p>
        <p>You won't see this message again by default, but if you do want a reminder, you can either use the <a class="open" href="#helpmenu">help</a> or visit <a href="http://jsbin.com/welcome">jsbin.com/welcome</a>.</p>
      </div>
      <div>
        <h2>Help out</h2>
        <p>JS Bin is an open source project available on <a href="http://github.com/remy/jsbin">github</a> with instructions on how to host it yourself.</p>
        <p>If you're in the running workshops (or teaching to a much wider audience), you can get a custom skin and starting templates &ndash; like <a target="_blank" href="http://sebly.jsbin.com">this</a> one. Just <a target="_blank" href="http://leftlogic.com/contact">get in touch</a> and ask for Rem.</p>
      </div>
    </div>
    
  </div>
  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers