Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how you can easily create, find, open, save and arrange files with a text editor.
Documentation: Atom Basics
Documentation: Using panes in Atom
Open a file or folder in Atom:
- Choose File > Open or File > Add a Project Folder in Atom
- From Atom, use keyboard commands CMD+O (Mac) or CTRL+O (Windows)
- On a Mac, drag the folder you wish to open to the Atom icon on your toolbar
Create a new file or folder:
Right-click in the tree view on the folder where you want to create a new file/folder, then choose the New File or New Folder menu items and name the new file or folder.
Save a File:
Save current active tab: CTRL+S (Windows) or CMD+S on a Mac Save all tabs (Mac): CMD+Option+S
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
All of your coding projects will begin
with the single main project folders
0:00
stored on your computer.
0:03
That main project file will contain all of
the following folders your project needs
0:05
to run.
0:09
Let's create that folder now.
0:10
As I said in the last video, there's
nothing special or magical about the files
0:12
you create with a text editor,
they're just files on your computer.
0:15
I'll create a folder on my computer
called My Awesome Website.
0:19
You'll choose where to save
this on your computer.
0:28
To stay organized,
0:30
you may wanna create a special folder
to store all of your coding projects.
0:31
No that I've created a project folder,
0:36
there are a couple of ways I
can open it in a text editor.
0:37
I can open Atom first,
and choose File > Open.
0:40
I find the folder I just
made on my computer.
0:46
Or on a Mac, I can drag the folder
onto Atom in my toolbar.
0:49
And you can see that my project is open.
0:58
If you already have an existing project
with some files in it that you want to
1:00
open in Atom, you do the exact same thing,
File > Open, or
1:05
drag it to Atom on the toolbar.
1:08
When you open a project in Atom,
1:15
your project's folder structure
will display here on the left side.
1:16
This is a file tree that
will allow you to view and
1:20
interact with the structure
of your project.
1:23
We'll talk more about that in a minute.
1:25
Now that I've opened my main
project folder in Atom,
1:28
I'm ready to create additional files and
folders.
1:30
There are a few ways to add files but my
preferred way, because it's the easiest to
1:33
remember, is to right click or
Ctrl + click on a Mac on the main or
1:38
topmost project folder,
and choose New File.
1:41
Now Atom will ask me for a file name,
we'll name this file index.html, and
1:46
as you can see in the file
tree on the left,
1:51
that file has been created
in my project folder.
1:54
See how it's indented a little
bit from the topmost folder?
1:58
That indicates that this file
is inside of the main folder.
2:02
If I created another file,
Like a styles.css, you'll be
2:06
able to tell by how they're indented that
both of these files are on the same level.
2:11
Say, I wanted to create a folder to hold
images I'll be using for my project.
2:18
I can do that by right clicking
my project's main folder and
2:23
selecting New Folder.
2:25
Again, it will ask me for a name,
and I will name it images.
2:28
And then a new folder is created
in my main project folder.
2:33
So how do I add images to this folder?
2:37
As I have said, were working with
the folder on your computer, so
2:39
I could add an image simply by
finding that folder on my computer and
2:42
putting images inside of it.
2:46
Atom does give you a shortcut for this.
2:51
You can right-click on the folder and
choose Show in Finder,
2:55
to find that folder on your computer.
3:00
Now I can drag an image into the folder.
3:04
And as you can see,
it shows up in the file tree.
3:14
I can also drag an image
directly to the folder in Adam.
3:18
To open and work on a file, click on the
file name and it will open on the right.
3:28
You can have as many
files open as you'd like.
3:32
And you can switch back and
forth between them using these tabs.
3:35
Here's a great trick that Atom will do for
you.
3:39
In an HTML file,
type html with no brackets,
3:42
then tab, and you'll get all of the HTML
you'll need to start a basic website.
3:45
Notice that when I make a change,
3:52
a blue dot shows up next to
the file name on the tab.
3:53
That means that there are changes
to this file that need to be saved.
3:57
I can save by typing
Ctrl + S on Windows or
4:00
Command + S on the Mac on the active tab.
4:03
Or on a Mac, I can type Command +
Option + S to save all open tabs.
4:05
These options are also
available on the file menu.
4:10
If I want to view two tabs at the same
time, I can click on a tab and
4:15
chose split left or right.
4:20
And that allows me to view
two files at the same time.
4:30
Tabs can also be ordered, and
moved around, simply by dragging them.
4:34
That's how you can create, open, save,
and arrange files in a text editor.
4:41
So what if I have a project,
like a simple web page, and
4:47
I want to preview that project
like I can in workspaces?
4:49
We'll talk about that in the next video.
4:53
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up