Development environment

A development environment in software and web development is a workspace for developers to make changes without breaking anything in a live environment.
The development environment is often seen as a developer's “everything-goes” workspace.


"CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration."
- Codepen

A video about CodePen


"It is an online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'."
- JSFiddle

A video about JSFiddle

JS Bin

"JS Bin is a tool for experimenting with web languages. In particular HTML, CSS and JavaScript, but JS Bin also supports other languages too (like Markdown, Jade and Sass)."
- JS Bin

A video about JSFiddle

Your turn

Find out

  • How does CodePen/JSFiddle/JS Bin work?
  • Is there a live output? (Can you see the output of the code you have made?)
  • Can you write HTML, CSS and JS?
  • Do you need to make an account?
  • Can you like, comment or follow the pen/fiddles/bins?
  • Can you make private pens/fiddles/bins?
  • Can you collaborate on your work?
  • Do you get error and/or warnings if you write the code wrong?
  • Is there line numbers?
  • Does it write the code automatic (just like Visuel Studio Code)
  • Can you download the pens/fiddles/bins?