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 the result in preview and almost in real time. These are real applications with the screen divided in two, where on the one hand you write the code which 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 simple 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 also many alternatives.
READ ALSO: Main programming languages used for apps and websites
1) CodePen
CodePen is the most popular site and used by programmers because it is free, intuitive and easy to use. Having become a standard in the world of programmers, just search on Google to find pages already compiled by Codepen and see immediately if that's what you were looking for. The flexible viewing windows and the immediate execution of the written code make it perfect enough to try javascript and CSS animations, moreover it can easily connect to external scripts (React, Vue and anything else available via CDN).
CodePen deserves first place in this category, however some features are paid, such as collaborative coding and full page live views (partial live views are free).
2) JSFiddle
In second place (although chronologically it is one of the oldest) in the world of sites for writing and trying programming code is JSFiddle, oriented above all to the creation and testing of JavaScript. It can also be used for HTML and CSS and since it supports code completion tips and may also be preferable to CodePen for the less experienced.
A big point in favor of JSFiddle is that it offers free collaboration mode (including voice and text chat), so you can work on the code simultaneously with other people.
3) Glitch
Many code sites allow you to encode HTML / CSS / JS and generate static Web pages, while Glitch offers a small free storage space to save projects and makes it fairly easy to run Node.js. server-side code. You can collaboratively program on Glitch,
It also comes with a number of other fantastic features: collaborative coding, version control, many learning resources, good integration with GitHub, easy embedding, a community to ask for advice, projects already made that you can freely modify or use and the Visual Studio integration. It is a great, quick and easy way to start a web app (or learn how to do it).
4) CodeSandbox
CodeSandbox 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 a space to save files and does most of the basic work, leaving the programmer only the task of writing.
5) Repl.it
Repl.it is a development environment for testing different types of programming languages such as Python with the support of front-end and back-end code, it allows you to distribute sites and apps, it has integration with GitHub and an intuitive interface. It may be a little too difficult for anyone who is just trying to design web pages, but for already experienced programmers it is a resource to consider. if you are only planning front-end or if you are new in the code, but if you plan everything regularly, it is worth exploring.
6) Liveweave is a web editor very similar to JSFiddle, with which to write and try code to use on websites, with live preview functionality, code hints for HTML5, CSS3, JavaScript and jQuery and that allows you to download the project as a file zip. You can also add external libraries like jQuery, AndgularJS, Bootstrap quite easily.
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 various frameworks such as Vue and React.
9) Flems, minimalist site, perfect for making quick tests.
10) JSBin, a more minimalist version of JSFiddle, to write web page code and see how it looks.
11) CSSDeck is a simple site for testing 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 the 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 and code editor which 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 nice graphics and automatic corrector for CSS code.
17) PlayCode is also an environment for real-time testing of basic HTML / CSS / JS code.
19) JSItor is another alternative to Codepen and JSFiddle, where you can write code by combining HTML, CSS and Javascript and immediately see the result.
READ ALSO: Sites to learn programming by playing with interactive courses and challenges
These are not simple 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 also many alternatives.
READ ALSO: Main programming languages used for apps and websites
Sites to test online code
1) CodePen
CodePen is the most popular site and used by programmers because it is free, intuitive and easy to use. Having become a standard in the world of programmers, just search on Google to find pages already compiled by Codepen and see immediately if that's what you were looking for. The flexible viewing windows and the immediate execution of the written code make it perfect enough to try javascript and CSS animations, moreover it can easily connect to external scripts (React, Vue and anything else available via CDN).
CodePen deserves first place in this category, however some features are paid, such as collaborative coding and full page live views (partial live views are free).
2) JSFiddle
In second place (although chronologically it is one of the oldest) in the world of sites for writing and trying programming code is JSFiddle, oriented above all to the creation and testing of JavaScript. It can also be used for HTML and CSS and since it supports code completion tips and may also be preferable to CodePen for the less experienced.
A big point in favor of JSFiddle is that it offers free collaboration mode (including voice and text chat), so you can work on the code simultaneously with other people.
3) Glitch
Many code sites allow you to encode HTML / CSS / JS and generate static Web pages, while Glitch offers a small free storage space to save projects and makes it fairly easy to run Node.js. server-side code. You can collaboratively program on Glitch,
It also comes with a number of other fantastic features: collaborative coding, version control, many learning resources, good integration with GitHub, easy embedding, a community to ask for advice, projects already made that you can freely modify or use and the Visual Studio integration. It is a great, quick and easy way to start a web app (or learn how to do it).
4) CodeSandbox
CodeSandbox 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 a space to save files and does most of the basic work, leaving the programmer only the task of writing.
5) Repl.it
Repl.it is a development environment for testing different types of programming languages such as Python with the support of front-end and back-end code, it allows you to distribute sites and apps, it has integration with GitHub and an intuitive interface. It may be a little too difficult for anyone who is just trying to design web pages, but for already experienced programmers it is a resource to consider. if you are only planning front-end or if you are new in the code, but if you plan everything regularly, it is worth exploring.
6) Liveweave is a web editor very similar to JSFiddle, with which to write and try code to use on websites, with live preview functionality, code hints for HTML5, CSS3, JavaScript and jQuery and that allows you to download the project as a file zip. You can also add external libraries like jQuery, AndgularJS, Bootstrap quite easily.
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 various frameworks such as Vue and React.
9) Flems, minimalist site, perfect for making quick tests.
10) JSBin, a more minimalist version of JSFiddle, to write web page code and see how it looks.
11) CSSDeck is a simple site for testing 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 the 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 and code editor which 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 nice graphics and automatic corrector for CSS code.
17) PlayCode is also an environment for real-time testing of basic HTML / CSS / JS code.
19) JSItor is another alternative to Codepen and JSFiddle, where you can write code by combining HTML, CSS and Javascript and immediately see the result.
READ ALSO: Sites to learn programming by playing with interactive courses and challenges
