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...
... 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
Go to the Systems settings. Turn on the two context menu things:
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
(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.
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:
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">
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <p>Doggos rule!</p>
Save the file.
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!
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
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.
Besides saving time typing tags, how will autocomplete help you?
You'll make fewer mistakes.
Right! Autocomplete is a Good Thing.
Type in the rest of the
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.
Let's start making your pages look mahvelous.