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 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
- Open new file.
- Right click mouse.
- Click ‘generate HTML template’.
- Click the generate table, to bring up the options box. Don’t enter any details and click ‘generate’. (See below).
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
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.
Once installed make sure that the following ‘welcome’ page is opened.