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, open, and arrange files with a text editor.
This video doesn't have any notes.
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
In this video, we'll see how to manage our
coding project files using a text editor.
0:00
All of your projects will begin
with a single main project folder
0:06
stored on your computer.
0:08
That main project folder will
contain all of the files and
0:10
folders your coding
project will need to run.
0:13
Let's create one now.
0:16
Remember that there's nothing special or
0:18
magical about the files you
create with the text editor.
0:20
They're just files on our computer.
0:23
To get started creating
a new coding project,
0:26
I'll create a folder on my computer
called My Awesome Website.
0:28
You'll choose where to save
this folder in your computer.
0:35
To stay organized,
0:38
you may want to create a special folder
to store all of your coding projects.
0:39
I'm saving mine to a folder that
I've made called Coding Projects.
0:44
Now that I've created a project folder,
0:48
there are a couple of ways I
can open it in a text editor.
0:50
On a Mac,
0:54
I can simply drag the folder I just
created to the VS Code icon on my toolbar.
0:54
Close these release notes.
1:02
And as you can see, here is my
folder open here on the left side.
1:05
Alternatively, I could open VS Code first
and choose File > Open from this top menu.
1:10
When you open a folder in VS Code,
1:18
the folder structure will
display here on the left side.
1:20
This area is known as the file explorer,
and
1:24
it works in a very similar way to
the file explorer on your computer.
1:26
It's a file tree that will
allow you to view and
1:30
interact with the structure
of your project.
1:32
Now that I've opened my main
project folder in VS Code,
1:35
I'm ready to create additional files and
folders.
1:38
There are few ways to add new files.
1:40
Here in the file tree,
you can see the folder I just created, and
1:43
if I hover over it,
you'll see some options pop up here.
1:46
The first one is a button
to add a new file, and
1:51
the second one is a button
to add a new folder.
1:53
Click on the button to add a new file and
1:55
an input field appears allowing
us to name the new file.
1:58
I'll name this file index.html,
don't forget your file extension, and
2:01
I'll hit Enter, and my new file is
created and I can view it over here.
2:06
We just created it, so
of course, it's blank.
2:11
Notice how over here, my file is
indented a bit from the top-most folder,
2:14
that indicates that this file
is inside of the main folder.
2:19
If I created another file, let's create
a styles.css file for example, you're
2:23
able to tell by how they're indented that
both of these files are on the same level.
2:30
I can also click this arrow to open and
close the parent folder.
2:35
Say I want to create a new folder to
hold some images that I'll be using for
2:40
my project.
2:44
I can do that by hovering the folder
where I want to create the new folder,
2:45
in this case, my main folder,
and click on the new folder icon.
2:50
I will call it images, and
2:55
my new folder is created inside
of my main project folder.
2:57
Oops, notice that when I made the image
folder, I forgot the s at the end.
3:02
To change the name of a file you've
created, you can right-click on
3:06
the filename, and here in the menu,
we have the option to rename it.
3:09
Notice that right-clicking on a folder
will also give me the option of creating
3:15
a new file or a new folder within it.
3:19
What if I wanted to add
existing files to this folder?
3:23
Maybe I have images already on my computer
that I want to add to my project.
3:26
I could pull up my computer's finder or
file explorer to locate my project,
3:31
then put images inside, but
I can also right-click on any file or
3:36
folder I have open in VS Code and
choose Reveal in Finder.
3:40
Now, I've got my coding project
open on my computer, so
3:47
I can simply locate the images on my
computer that I wanna put in this folder,
3:50
and move it over.
4:00
I could also drag an image directly
into VS Code, and it will move it.
4:04
Now, I have both of those
images inside of my project.
4:12
Finally, notice that I can move files and
4:17
folders around in VS Code using the file
explorer by clicking and dragging.
4:19
For example, I can move an image out of
the image folder simply by dragging it,
4:24
and VS Code will ask me to
confirm that move, and now,
4:29
you can see it's no longer
in the images folder.
4:33
Then I can move it back by clicking and
dragging.
4:37
Great, so I've got a basic file
structure setup for my project.
4:41
How can I edit and save these files?
4:45
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