Code Editor – ATOM

After downloading Zurb Foundation 6 I needed a code editor to allow me to develop and create the static version of the website.  Previously I have always used Brackets.io but wanted to look at learning ATOM.IO which is an open source code editor created and developed by GITHUB.

To do this I downloaded ATOM from the ATOM.IO website and moved it into my Applications folder.

screen-shot-2017-03-01-at-10-34-59

 

 

 

 

 

 

 

 

 

 

 

 

 

 

To access the ATOM editor double click on the icon in the Applications folder:

screen-shot-2017-03-01-at-10-51-04

 

 

 

 

 

 

This is the welcome screen below:

screen-shot-2017-03-01-at-10-40-58

 

 

 

 

 

 

 

 

 

 

 

 

I customised the settings to how I wanted the display to look by increasing the font size from the default 14 to 16.

screen-shot-2017-03-01-at-10-55-18

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I also selected the ‘Show Indent Guide’ this will give me line guide for the indented areas of my code.

screen-shot-2017-03-01-at-10-57-51

 

 

 

This is a sample of the HTML code (the index.html) for the website I have started developing in ATOM it shows how the code is colour code and indented with the indent guide lines below:

screen-shot-2017-03-01-at-12-16-59

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

and how this looks when I run the index.html file:

screen-shot-2017-03-01-at-12-17-13

 

 

 

 

 

 

Advertisements