Lesson contents
Atomizing a page
Atom is the editor you'll use to make pages. Let's 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.
Right-clicky
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...
... and name it goats. Then I'd like to be able to right-click on it, and open it in Atom:
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:
Yay!
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:
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.
To activate it, use an option in the Packages menu:
(The menu item might be at the bottom of the list, until you restart Atom.)
Yay!
Beautify
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 Beautify.
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.
Right-click on the folder, and open in Atom:
Ray
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.
(You might have a Welcome pane and other stuff. Close them.)
Now make a new file. Use the File menu, or right-click.
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:
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!
W00f!
Autocompletion
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 Atom will put in the closing tag for you.
Besides saving time typing tags, how will autocomplete help you?
Adela
You'll make fewer mistakes.
Right! Autocomplete is a Good Thing.
Type in the rest of the h1 tag.
Exercise
Beautify
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.