Creating a website using HTML, CSS and other languages "from scratch" requires an HTML editor (also known as a text editor). While there are software programs you can purchase for this, there are many excellent options online that are free to use.
There are several templates available including wikis, Bootstrap, single scrolling pages and an infinite scroll gallery. Save time with code generators for design elements such as tables, forms, iframes and link anchors. There are similar generators for common CSS styles and jQuery code. Another nice feature is a code clean review that reviews your code for issues before you complete your site. This tool can also be used to import Word documents and translate them to HTML format.
You can use HTML Online for free, but you must link your site to it in return. There is a paid version but with all the features you receive for free, you may not find a need for the pro version unless you are an experienced coder.
When you create a project, it is known as a "pen." One of the nice features of Codepen is the focus on sharing code with other developers. You can post your pens publicly so anyone can access them. This is a terrific tool for coders who are doing an online search for a specific type of design issue to solve. Active participants can curate their pens into collections where you can see all of their work. This is very helpful if you find an example you like and want to view more of the person's work. You can even "fork" someone's code to work on it on your own, similar to GitHub.
The one drawback that people might not enjoy is that all of your pens are available for anyone to view. They are not private. Codepen's default workspace is black with colored text. If this doesn't work for you, there are a few different themes you can choose instead. You also need to create an account to use Codepen. Codepen gets high marks in reviews.
Using Codepen is free, although there is a paid version if you want to increase the number of features you can access, such as private pens and team projects. The free version is very robust, however, and is probably the most popular version due to the coding community built around building and sharing work.
You have the option of using a code validator and there is a box with tips that will pop up along the left side of the screen. The tips area gives fairly simple advice on writing code; there are no tutorials or help articles on the site. However, there are "codecasts" where your code is recorded on screen as you type and others can watch the videos to see how you put your project together. CSS Deck also supports working in teams on labs and has a sharing section similar to Codepen.
CSS Deck is a much more "no frills" site compared to other editors, but if you are looking for something clean and distraction-free, it's a good choice. Beginning coders may find it harder to use and prefer a more extensive option with more tutorials and resources. CSS Desk received a review of three out of five stars on Crozdesk with a code editor combined rating of 74 out of 100.
The editor is free through revenue gained by advertising. You do need to create an account in order to save your "labs." Another benefit to creating an account is the ads will be removed.
Best Online HTML Editor
Despite the name, this is probably one of the simplest and most feature-free online HTML editors. The user interface consists solely of a single box for entering your content. You can choose to write in source view, which is pure HTML, or you can use the WYSIWYG option where you type in the text as you would like it to appear on your site. Then, you can use the source code at the end to copy to your webpage.
The editor is free and does not require, or have, any type of registration or account. You cannot save your work in the editor itself; you will need to copy and paste the source code to a plain text editor on your computer, like Notepad. The site is ad-supported, so you will see ads along the left and right sides of the screen. This could be distracting depending on how clean a workspace you need to focus on your code.
Despite the simple interface, JS Fiddle is very popular with developers and like Codepen, your work will be public and users regularly share their projects with others. You can also collaborate with other developers in real time with a chat box where each user can view the code and chat or use audio to give comments and suggestions.
Another issue is that the WYSIWYG version does not automatically appear as you type. You need to hit the "run" button to get the revised versions to show up each time, which is more time consuming. There are also no tutorials or help options, so JS Fiddle is likely not a first choice for beginners who need more help learning how to code. On the plus side, it has code completion and syntax coloring, and there is a "tidy" feature to help clean up your code.
JS Fiddle is 100% free and ad-supported. If you dislike advertising on your workspace, though, the ads on JS Fiddle are on the bottom left of the screen and smaller than other ad-supported sites, so it's not as intrusive to your workflow.
Unlike the other editors listed here, Sublime Text is not an online editor but can be downloaded onto your PC or Mac. The reason for using it over an online editor is the rich feature set that makes it a favorite of many developers.
An important shortcoming, however, is that you cannot see the WYSIWYG version of what you are creating. You need to save all your files and then click "View in Browser" to see your site online. While there are no tutorials or help within the software itself, there is an active online support forum. This may not be the best choice for beginners and the interface may feel more challenging and daunting than the online editors that are limited to only a few languages.
Sublime Text can be downloaded and used for free. You will occasionally have a pop-up asking you to purchase a license for $70, which removes the pop-up. You are free to use the software as long as you like without purchasing the license so long as you are willing to tolerate the occasional pop-up.
Choosing an HTML Editor
When choosing an editor, you should decide on which features are most important to you before you do your research. Whether you need a simple interface with no additional help, or a more involved workspace and feature-set that includes tutorials, blog posts and more, there are a wide variety of options, and most importantly, 100% free ones. There's no need to buy expensive software to learn and write code. All you need is an online connection and you're ready to start developing!