For both beginners who want to learn, and for experienced professionals, there are some websites that allow you to try lines of code and see, in preview and almost in real time, the result. These are real applications with the screen split in two, where on the one hand you write the code that can be HTML, CSS, PHP, Javascript or other, while on the other hand, after pressing a key to execute , you actually see what it looks like if that code was inside a website.These are not just code editors, but places where you can test your programming without worrying about making mistakes and quickly find out where the errors are. Codepen and JSFiddle are the two most popular sites in this category, but there are plenty of alternatives too.
Sites to test code online
1) CodePen
CodePen is the most popular site used by programmers because it is free, intuitive and easy to use. Having become a standard in the world of programmers, just do a Google search to find pages already compiled by Codepen and immediately see if that's what you were looking for. The flexible viewing windows and immediate execution of the written code make it perfect enough for trying out javascript and CSS animations, plus it can easily connect to external scripts (React, Vue and anything else available via CDN).
CodePen deserves the top spot in this category, however some features are paid for, such as collaborative coding and full page live views (partial live views are free).
2) JSFiddle
In second place (even if chronologically it is one of the oldest) in the world of sites for writing and testing programming code there is JSFiddle, mainly oriented to the creation and testing of JavaScript. It can also be used for HTML and CSS code and since it supports code completion hints it might even be preferable over CodePen for the less experienced.
A big point in JSFiddle's favor is that it offers the collaboration mode (including voice and text chat) for free, so you can work on the code at the same time as other people.
3) Glitch
Many code sites allow you to code HTML / CSS / JS and generate static web pages while Glitch offers a small free storage space to save projects and makes it quite easy to run Node.js server-side code. It can be programmed on Glitch in a collaborative way,
It also comes with a host of other great features: collaborative coding, version control, lots of learning resources, good integration with GitHub, easy embeds, a community to ask for advice, pre-made projects that you can freely edit or use and the Visual Studio integration. This is a great, quick and easy way to launch a web app (or learn how to do it).
4) CodeSandbox
CodeSandbox it is similar to Glitch but a little more complex and complete. CodeSandbox has a more flexible and customizable interface, allows you to distribute complete web apps, has space to save files and does most of the basic work leaving the programmer alone to write.
5) Repl.com
Repl.com is a development environment to try out different types of programming languages such as Python with front-end and back-end code support, allows you to deploy sites and apps, has integration with GitHub and an intuitive interface. It might be a little too difficult for someone just trying to design web pages, but for experienced programmers it's a resource to consider. if you're just designing front-ends or if you're new to code, but if you schedule everything regularly, it's worth exploring.
6) liveweave is a web editor very similar to JSFiddle, with which to write and test code for use on websites, with live preview features, code hints for HTML5, CSS3, JavaScript and jQuery and which allows you to download the project as a zip file. You can also add external libraries quite easily like jQuery, AndgularJS, Bootstrap.
7) CodeSandbox is a free online space where you can start web app projects using different frameworks, such as React, Vue, Angular and much more.
8) StackBlitz is an excellent javascript application editor, which supports different frameworks such as Vue and React.
9) Flems, minimalist site, perfect for doing quick tests.
10 ) JSBin, a more minimalist version of JSFiddle, to code web pages and see what it looks like.
11 ) CSSDeck is a simple site to test some basic HTML / CSS and JS ideas.
12 ) ICECoder, another online environment for testing code, which requires you to download a program that runs in your browser and can also be used offline.
13 ) Plunker, a front-end tool that allows you to write code, files and web pages and save them on Github.
14 ) Scrimba is an innovative combination of video editor and code that is a perfect learning environment for students and those who want to learn.
15 ) WebMaker, a web application creator with offline functionality and integration with CodePen.
16 ) Dabblet, to try and write HTML / CSS / JS code with beautiful graphics and autocorrect for CSS code.
17 ) PlayCode it is also an environment for testing basic HTML / CSS / JS code in real time.
19 ) JSItor is another alternative to Codepen and JSFiddle, where you can write code combining HTML, CSS and Javascript and see the result immediately.
Best sites to write and test code with real-time preview
