Lesson contents

Atomizing a page

Let's make a page with Atom. We'll make a page that looks like this:


They do. Doggos rule.

Setting up Atom

Download Atom. Free, of course. Free is good!

Run the setup program, and let it do its thing.

I prefer a light rather than a dark look, but it's up to you. All of the screenshots here are with a light theme.

Here's what I did to change the theme. First, File | Settings:


Notice the shortcut key. Learning a few shortcut keys will make your life easier.

In Settings, go to the Theme section, and try different options. Use whatever you like.



It's best to make a separate folder for each exercise, or you risk losing files. It would be convenient to be able to right-click on a folder in Explorer, and open it in Atom. For example, suppose I was doing an exercise about goats. I would make a new folder somewhere...

Make a folder

... and name it goats. Then I'd like to be able to right-click on it, and open it in Atom:

Right-click, Open

That would be dreamy! BTW, the menu you see when you right-click is called a context menu in Geekland.

Open Settings again, with File | Settings, or use the shortcut Ctrl+Comma.

Go to the Systems settings. Turn on the two context menu things:

Context menu


HTML preview

When you're learning, it'd be Pretty Hot and Tasty to be able see what HTML code does, as you type it. Maybe the HTML code you're working on on the left side of the screen, and how it displays on the right, like this:

HTML preview

We can do that PHAT thing!

Go to settings again, and down to Install. Type "HTML preview" into the search field. You'll see the package atom-html-preview. Clicky click the Install button.

Install HTML preview

To activate it, use an option in the Packages menu:

Turn on preview

(The menu item might be at the bottom of the list, until you restart Atom.)



Another package I like is atom-beautify. It can automatically format your code, fixing indentation and stuff. It can turn this ugly code...


... into this pretty code...


Not perfect, but good. Install it, if you want.

BTW, there are a bazillion packages to extend Atom. Some are doggish.

A dog page

Make a new folder somewhere on your computer. Maybe in a folder where you keep all the stuff for this course.

Dogs folder

Right-click on the folder, and open in Atom:

Open in Atom


I don't have all those options.

That's OK. I've installed lots of stuff on my PC that you haven't.

Atom will open, showing you the contents of the folder. It's MT right now.

MT folder

(You might have a Welcome pane and other stuff. Close them.)

Now make a new file. Use the File menu, or right-click.

Making a file

I called the file true-dat.html, but you can call it something else. Remember, all lowercase, and dashes for spaces.

Paste this HTML into Atom:

  • <!doctype html>
  • <html lang="en">
  •     <head>
  •         <title>Title</title>
  •         <meta charset="utf-8">
  •         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  •     </head>
  •     <body>
  •         <p>Doggos rule!</p>
  •     </body>
  • </html>

Save the file.

Live preview

Remember that live preview package we added? Let's try it:

Live preview

The screen splits, and you see what the file will look like in a browser.

Now for something cooler. Change the file. As you type, the preview updates automagically!

Preview updates



Let's add a header to the page. Put a blank line before the <p> tab, and type h. Atom will show the tags that start with h.


Use the arrow keys to move up and down, and hit Enter when the one you want is highlighted. Then type the closing >, and Brackets will put in the closing tag for you.

Tag complete


Besides saving time typing tags, how will autocomplete help you?

If you were logged in as a student, the lesson would pause here, and you'd be asked to type in a response. If you want to try that out, ask for an account on this site.

You'll make fewer mistakes.

Right! Autocomplete is a Good Thing.

Type in the rest of the h1 tag.

Finishing the h1




What does the Atom extension do? Explain in less than 30 words.

Install the Beautify extension in Atom. To show that you have, submit a screen shot of the Package menu, showing the Atom Beautify item.

Atom has lots of other goodies. Search the internet for tutorials. Try things out. You'll be glad you did.

Up next

Let's start making your pages look mahvelous.