Getting Began with Atom

On this article, we’ll go over the steps essential to obtain a well-liked textual content editor known as Atom. By the tip of the article it is possible for you to to create a folder in Atom that incorporates an html doc which you could open in your net browser.


Textual content editors, additionally known as code editors, are purposes utilized by builders to put in writing code. They spotlight and format your code in order that it’s simpler to learn and perceive. In the event you’ve used Codecademy, you’re already conversant in a textual content editor! It’s the world you write your code in.

Textual content editors present an a variety of benefits to net builders:

  • Language-specific syntax highlighting
  • Computerized code indentation
  • Colour schemes to fit your preferences and optimize code readability
  • Plug-ins to catch errors within the code
  • A tree view of your undertaking’s folders and information, so you may conveniently navigate your undertaking
  • Key shortcuts for sooner growth


There are a variety of textual content editors to select from. Atom and Chic Textual content are two of the preferred textual content editors utilized by builders.

Chic Textual content has been the textual content editor of alternative for a few years. It’s secure and dependable.

Atom was launched by GitHub after Chic Textual content. It’s a totally customizable textual content editor. Since Atom is written in HTML, CSS, and JavaScript, you may customise it your self when you’ve realized these languages.

Both textual content editor is nice for growth, so you may’t make a foul resolution right here. When you’re additional alongside in your coding profession, attempt one other code editor to see what options work effectively together with your workflow.

Train I: Obtain Atom

This video particulars obtain and set up Atom.

On this train, we advocate you comply with these steps to obtain Atom.

See also  ≫【 Megadownloader, comment le télécharger, linstaller et lutiliser 】≫


Atom works on Macs working OS X 10.8 or later.
Go to the Atom homepage and click on Obtain For Mac. In a number of moments, Atom will seem in your Downloads folder as a .zip file:

Click on on to extract the applying, then drag the brand new icon into your Purposes folder.
Double-click the applying icon to load Atom and get began.

Home windows

Atom helps Home windows 7 or later.
Go to this webpage and obtain In a number of moments, Atom will seem in your Downloads folder as a .zip file.

Comply with the directions within the Home windows Installer to get began. You possibly can go to Atom’s Home windows set up web page for extra detailed directions.

2. Growth Folders

Earlier than utilizing your textual content editor, it’s essential to determine an organized file system. Because the quantity and dimension of your tasks develop, it turns into more and more essential to know the place to avoid wasting new tasks and discover previous tasks.

Most builders retailer their tasks in an easy-to-find listing (what you may be used to calling a folder). Right here at Codecademy, we advocate naming this listing tasks. It can retailer all your coding tasks. Everytime you create a brand new undertaking, irrespective of how small, it’s best to all the time make a brand new folder inside your tasks listing. One can find that single-file tasks can rapidly flip into giant, multi-folder tasks.

Train II: Create a dev folder

Beneath are the steps that you must comply with to create a brand new folder for all your programming tasks. Additionally, you will discover ways to load a brand new undertaking folder into Atom. For steps 1 and a pair of, navigate to a folder utilizing Finder (Mac customers) or My Pc (PC customers).

  1. Navigate to a folder you go to commonly and create a brand new folder known as tasks. On Mac, this can be your Consumer account. On PC, it’s possible you’ll wish to save this in your C drive.

  2. Contained in the tasks listing, create a brand new folder known as HelloWorld. Every part you add to this folder will probably be a part of your HelloWorld undertaking.

  3. Open Atom in your pc.

  4. Atom supplies a tree view of your undertaking, so you may conveniently navigate to totally different folders and information. Within the Atom menu bar, select File > Add Undertaking Folder. It will launch your file supervisor. Navigate to the HelloWorld folder and choose Open. The folder will open in Atom’s aspect pane. At this level, there shouldn’t be any contents within the folder. We’ll add a file within the subsequent train.

See also  The Complete GTA V Graphics Optimization Guide & Performance Benchmarks

3. Including a File

Whenever you open Atom, the Welcome Information will seem. For now, we’ll skip attending to know Atom and begin writing some code.

Earlier than you discover ways to add information to a undertaking folder, it is very important perceive the aim of file extensions.

A file extension is the suffix of a filename and describes the kind of content material the file incorporates. The file extension is all the time the final 3 or 4 characters in a filename, preceded by a interval. For instance, the HTML file extension is .html, and it tells the browser (and different purposes) to interpret the contents of the file as an online web page.

As soon as Atom hundreds a undertaking folder, you may add information. The steps under describe add information. Don’t fear about doing this by yourself pc. We’ll get to that in Train III.

  1. In Atom’s prime bar, choose File > New File. An untitled, clean file will seem.
  2. In Atom’s prime bar, select File > Save or Save As. Identify the file with its applicable file extension (.html, .css, .csv). It’s important that you simply embody the right file extension, so applications know interpret its contents.
  3. Start coding! Save your file typically. It will lower the possibilities of dropping unsaved work.

Train III: Add a file

On this train, you’ll create an index.html file in your Hi there World undertaking.

  1. In Atom’s prime bar, select File > New File. An untitled, clean file will seem.
  2. Earlier than you save the file, copy and paste the next boilerplate HTML code:

<!DOCTYPE html> <html> <head> <title>Hi there World</title> </head> <physique> <h1>Hi there World</h1> </physique> </html>

Discover: The entire textual content in your file is identical coloration. It will change after you save the file as .html.

3. In Atom’s prime bar, select File > Save or Save As.

4. Identify the file index.html. It’s essential that you simply use the file extension .html so the textual content editor and net browser know interpret your code.

4. File Extensions and Syntax Highlighting

Atom and different textual content editors are capable of interpret file extensions and supply language-specific syntax highlighting. Syntax highlighting is a software for making code simpler to learn. Check out your index.html file. The textual content and tags are totally different colours. That is how Atom highlights .html syntax. With every new language you be taught, Atom will spotlight textual content in a means that makes your code straightforward to learn. This can be totally different than different textual content editors and likewise totally different than the way in which your code is highlighted on Codecademy.

Train IV: Open your HTML File in an online browser

At this level, your file is able to be seen in an online browser. The next steps must be taken exterior of Atom:

  1. Again in your file system, navigate to the index.html file in your Hi there World folder.

  2. Double click on index.html. the web page ought to open in your default net browser.

Congratulations! You possibly can create net pages by yourself pc!

Leave a Reply

Your email address will not be published.