Introduction


If you're just starting out in your coding journey, we recommend you use the SuperHi Editor as it's easy to learn with. Currently, it's mainly for coding with HTML, CSS & JavaScript, and it lets you concentrate on just that: coding! You don't have to worry about working on the command line, setting up a local server, hosting, etc.

However, as you start to incorporate other tools into your coding workflow, you may need to switch to a different code editor, such as Visual Studio Code. In this guide, we'll discuss everything you need to know when transitioning from the SuperHi Editor to a different code editor.

Why should I use the SuperHi Editor?

We recommend that you use the SuperHi Editor because it provides easy-to-understand feedback and error messages when things go wrong, and automatically saves your work online so you can visit it at a live URL. When you get stuck, the SuperHi team can easily help you troubleshoot if your code is written inside of the SuperHi Editor, since all of your SuperHi projects come with a live URL that's hosted on our server. It also automatically links your CSS files, conveniently includes Google Fonts, and includes multi-browser mode, server hosting, auto-refreshing previews and dozens of other features that other editors don't have.

I still want to use a different code editor. Which one should I use?

Beyond the SuperHi Editor, there are many other options. We prefer Visual Studio Code here at SuperHi, and our teaching team uses this in our advanced coding courses such as WordPress, Ruby on Rails and React.js. However, you can use whatever you'd like.

Once you choose a code editor and decide to start a new project, check out the tips below!

First steps for starting a new project


Starting out with an HTML template

All HTML files need to start with some basic code, including three general HTML tags: <html>, <head>, and <body> . Each HTML file will always have only one of each of these tags.

The SuperHi Editor will automatically include the below HTML template in all of your projects, even though you don't actually see it in the Editor. This also means that it will automatically link your CSS files to your HTML for you.

When you switch to a different code editor, you'll need to add this starter HTML and link your CSS files yourself. Feel free to use the SuperHi template to start off any of your web projects: