Using Atom For Your First HTML&CSS Coding
This is the how-to install, set up and use
the today’s foremost code editor
Why I’m Choosing Atom
Not so long ago most of us swapped their TextMate or whatever to SublimeText and it was really timely and cool. But when GitHub made their entry to the code editors industry, it became clear who will drive the IT.
Atom is a fast-moving code editor developed by GitHub. It’s open source and with a growing community around it. Completely free, hyper modern, easily tuned with human oriented UI, but a little bit slow as of today — this is what Atom is all about.
In my opinion for today, it’s the best code editor with a perspective to change the industry and stay in it for a long time.
Installation
To install Atom you’ll need to be using one of the following OSs:
OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux
Since I’m using Mac most of the instructions will be for OS X, sometimes with Windows hints.
Download Atom and install it as is required for your OS. Mac OS X users need to move Atom application to the Applications folder. On Windows you need to execute .exe file.
After the installation is complete open Atom and let’s start to tweaking it.
Set Up
For your convenience, I’ll tell you how to set up Atom itself, your OS, which packages to install, what they can give you, how to use them and what syntax highlighting theme to choose.
Atom Set Up
After Atom installation it’s ready to work and already set according to the latest trends. You need to tune just two things:
Show Indent Guide
Go to Atom → Preferences → Settings, scroll a bit and check the checkbox Show Indent Guide. It will turn on special lines we call guides to better see your code nesting.
Setup Autocomplete to Work Right
Autocomplete is a tool to automatically generate (complete) your code. Go to Atom → Open Your Keymap and add the following code at the end of the document:
Mac OS X Set Up
In modern code editors you can stretch the cursor for multiple lines. To have an opportunity to do it on a Mac you need to disable a few default shortcuts. Go to → System Preferences → Keyboard → Shortcuts → Mission Control and uncheck the following:
Mission Control
Uses the shortcut ^↑
Application windows
Uses the shortcut ^↓
Now when you’re playing with some code, try to stretch the cursor. Press Shift-Ctrl-↑ and Shift-Ctrl-↓ a few times. You can edit multiple lines at a time. You can also place the cursor at any place just keep your Cmd button pressed while clicking anywhere in the code.
Package Installation
Packages are tiny but very useful additions to Atom’s functionality.
To install packages go to Atom → Preferences → Install and use the search input to find and install the following packages:
Atom-color-highlight
Highlight color values in code.
Autocomplete-css
Make the process of writing CSS code easily.
Autocomplete-paths
Make the process of writing paths to project files easily.
Autocomplete-plus
Make the process of writing code easily.
Emmet
Indispensable package for Zen coders, make the process of writing HTML code way faster.
Choosing a Syntax Highlighting Theme
My favorite theme called Twilight isn’t shipped with Atom I think because it comes from an older code editor called TextMate. Despite the novelty of Atom, unfortunately, I couldn’t find a suitable theme for myself.
To install Twilight you need to go to Install again, but this time you need to switch the search input to Themes instead of Packages. Then search for Twilight and install it.
After all packages and themes are installed, you need to restart Atom to make everything work smoothly (completely quit Atom and reopen it).
How It Works
To test all new features let’s do a few exercises.
Emmet In Action
Create a new file and save it as “index.html” without quotes naturally. For Atom helpers (known as snippets) and syntax highlighting to work properly you need to explicitly specify the file extension (“.html” in this case).
So let’s type an exclamation mark and press Tab. Emmet will generate the basic HTML structure for us.
You can read the complete Emmet documentation on the official site.
Autocomplete Paths In Action
Put some images in the folder where your index.html is stored. For example, you can create an “images” folder and put some images inside it.
In your index.html file type “img” in between <body> and </body> tags and press Tab. You will see a little generated code and your cursor will be in between quotes in the src attribute value. The src attribute means source of the image. In the src attribute value you need to specify the path to the image you want to add. To do this, type “images” and then slash “/”. Autocomplete Paths will offer you to choose image from images folder to autocomplete the path.
Autocomplete CSS In Action
Create a new file and save it as “style.css” without quotes. To see Autocomplete CSS in action you need to write a CSS selector. Type html and an opening figure bracket “{“. The closing figure brackes will be created by Atom. Press Enter to break the line.
Now on the new line start typing “font”. You will see a select menu with suggestions you can use in this case. To move selection, press Up or Down and to choose an autocompletion press Enter.
Atom Color Highlight In Action
Type “color: red;” and you will see the “red” part will be highlighted with proper color. Type “background-color: #EEEEEE;” or “white” and you will see the value will be highlighted in white color.
Conclusion
You can surely find features I’ve shown you in other code editors. Some experts might say all of this doesn’t make any sense. But I disagree.
All the novelty of Atom is a topic for another post. But for now I hope you’ve got the basic knowledge and supercharged setup to learn HTML&CSS.
This post is a translation of the original post in Russian where I’ve invited readers to come to my HTML&CSS class at the Moscow Coding School. I’m not sure that I need to invite foreign people to come to Russia to learn coding ☺. Feel free to contact me online if you need anything.
Update
Today’s code editors absolutely not personalized. What I mean saying it?
Let’s look at the Google Chrome for example. When you open your new laptop and install Chrome on it and log in with your Google account you’ll get all your bookmarks, extensions and all your other stuff. It’s very pleasing and undeniably convenient.
When you install any code editor you need to set up everything from scratch. Manage settings, install packages, install themes, etc., if you didn’t save few config files and didn’t make any more geeky things.
It will be much more convenient to have an account (that most of us already have it’s GitHub account) with all Atom settings in it. I’ve started the discussion on Atom Discuss and got an answer with a geeky solution that actually works. But it’s absolutely not looking as a good UX.
Atom Settings Synchronisation
The same way as I’ve written above go and install sync-settings package.
Sign Up or Sign In on GitHub. Go and create a new personal access token. Go to the link and start with token description, for example, type “Atom Configuration”. Uncheck all checkboxes except the gist and hit Generate Token.
You will see long hash created with characters and digits. And also notice saying:
Make sure to copy your new personal access token now. You won’t be able to see it again!
So do not close this page before you will finish everything. Copy this generated token and go back to Atom → Preferences Packages → sync-settings → Settings and paste the token to the input labeled Personal Access Token.
Now go to the service called GitHub Gist. You’ll need to log in if you haven’t to. Then create a new gist (it’s like code notes). All you need to create an empty gist is to type any symbol in the large text field, for example a space symbol. You will enabled Create Secret Gist and Create Public Gist buttons. Hit any you want. I store my Atom Configuration Gist in public.
After you created gist you will find this Gist Id in the URL. In my case the URL looks like this:
gist.github.com/ZakharDay/10250d74c35cd9fcc630
And the Gist Id here is “10250d74c35cd9fcc630” you need to copy and paste into the Gist Id input field in the sync-settings package settings.
Restart Atom. Press Ctrl-Alt-U. You will see a notice:
sync-settings: Your settings were successfully uploaded
If you don’t see one then try to go to Packages → Synchronize Settings → Upload. Should work.
When you will need to set up a new Atom, just install the sync-settings package, copy and paste your Gist Id and Personal Access Token to the new Atom and go to Packages → Synchronize Settings → Download or just hit the Ctrl-Alt-D.
Thanks for your time!
