Atom.IO IDE

Atom.IO IDE

26/04/2020 0 By Laurence

Let’s learn how to install an IDE.  In this IDE we can do web development and coding.

Atom is an integrated development environment (IDE).  You can use Atom to do web development.  It is user-friendly and comes with a good range of packages that can be downloaded and installed to provide additional functionality. You can tailor the working environment to suit your needs.

Download Atom here.

Install These Packages To Get Started

When developing a web page you will want to see the results of the changes that you make to the code as quickly as possible.  Install the html-preview package to allow you to do this. Click the  ‘Install a Package’ link on the welcome page, and click ‘Open Installer’.

Type the name of the package that you want to install and hit ‘Enter’.

You can enter in key words such as ‘preview’, or if you know the package name enter that name.  In our case we will search for html preview.

This search will produce a list of packages with names similar to the key word entered for the search. The image below shows the results returned from a search for html templates, for example.

Click the ‘install’ button to install the package.  Always check the number on the right side next to the cloud image.  This shows the number of times a package has been downloaded.  Good packages will have higher numbers.  Not all packages are equally good!

To get started I recommend you download these packages:

  • atom html preview.
  • html-template-generator. (see install instructions above)

 Install: html-template-generator

Install the following package: html-template-generator.

This package will get you up and running quickly with a HTML Template.

Use the same steps as outline below, but enter the name of the package above.

How to Create A Page With A HTML Template

  1. Open new file.
  2. Right click mouse.
  3. Click ‘generate HTML template’.
  4. Click the generate table, to bring up the options box.  Don’t enter any details and click ‘generate’. (See below).

The Result

You will now have a blank page with some HTML code on it as as follows:

Always save the new file as a .html file.  When you have done that, the color of the text in your web page file will change from white to that below.

Don’t worry about all of this funny looking code.  In fact we really only need a few of these ‘tags’ to get started.  You can visit the HTML lessons (1-11)  to learn more on writing HTML code. Click the link to the first lesson at the bottom of this page.

You may wish to also install browser-plus which also allows you to view your code changes in a browser inside Atom.

Viewing Your Page in Atom or In a Web Browser

While these packages are convenient, you can always view your code in a real web browser, by right clicking on your coding page and selecting ‘view in browser’, as opposed to either Preview html or Open Browser-Plus.

What Do These Do

Html preview allows you to see the outcome of the changes to your HTML, CSS and JavaScript in real-time, while html template provides a convenient template for writing HTM, CSS, JavaScript so you don’t need to write the ‘basics’ every time you want to create a new html file.

Atom’s Color

In the settings (see welcome page above), you can adjust the color for the code area that you will work in, and the overall user interface color.  Simply change the themes.  Some people like to code on a white background and others like a black one. You can always install different themes.

Learn How to Create Simple Web pages You can access a series of lessons on how to build simple web pages. Simply click the JavaScript and HTML tab on this website and scroll through to find the first HTML

Once installed make sure that the following ‘welcome’ page is opened.