All of your coding projects will begin with the single main project folders

stored on your computer.

That main project file will contain all of the following folders your project needs

to run.

Let's create that folder now.

As I said in the last video, there's nothing special or magical about the files

you create with a text editor, they're just files on your computer.

I'll create a folder on my computer called My Awesome Website.

You'll choose where to save this on your computer.

To stay organized,

you may wanna create a special folder to store all of your coding projects.

No that I've created a project folder,

there are a couple of ways I can open it in a text editor.

I can open Atom first, and choose File > Open.

I find the folder I just made on my computer.

Or on a Mac, I can drag the folder onto Atom in my toolbar.

And you can see that my project is open.

If you already have an existing project with some files in it that you want to

open in Atom, you do the exact same thing, File > Open, or

drag it to Atom on the toolbar.

When you open a project in Atom,

your project's folder structure will display here on the left side.

This is a file tree that will allow you to view and

interact with the structure of your project.

We'll talk more about that in a minute.

Now that I've opened my main project folder in Atom,

I'm ready to create additional files and folders.

There are a few ways to add files but my preferred way, because it's the easiest to

remember, is to right click or Ctrl + click on a Mac on the main or

topmost project folder, and choose New File.

Now Atom will ask me for a file name, we'll name this file index.html, and

as you can see in the file tree on the left,

that file has been created in my project folder.

See how it's indented a little bit from the topmost folder?

That indicates that this file is inside of the main folder.

If I created another file, Like a styles.css, you'll be

able to tell by how they're indented that both of these files are on the same level.

Say, I wanted to create a folder to hold images I'll be using for my project.

I can do that by right clicking my project's main folder and

selecting New Folder.

Again, it will ask me for a name, and I will name it images.

And then a new folder is created in my main project folder.

So how do I add images to this folder?

As I have said, were working with the folder on your computer, so

I could add an image simply by finding that folder on my computer and

putting images inside of it.

Atom does give you a shortcut for this.

You can right-click on the folder and choose Show in Finder,

to find that folder on your computer.

Now I can drag an image into the folder.

And as you can see, it shows up in the file tree.

I can also drag an image directly to the folder in Adam.

To open and work on a file, click on the file name and it will open on the right.

You can have as many files open as you'd like.

And you can switch back and forth between them using these tabs.

Here's a great trick that Atom will do for you.

In an HTML file, type html with no brackets,

then tab, and you'll get all of the HTML you'll need to start a basic website.

Notice that when I make a change,

a blue dot shows up next to the file name on the tab.

That means that there are changes to this file that need to be saved.

I can save by typing Ctrl + S on Windows or

Command + S on the Mac on the active tab.

Or on a Mac, I can type Command + Option + S to save all open tabs.

These options are also available on the file menu.

If I want to view two tabs at the same time, I can click on a tab and

chose split left or right.

And that allows me to view two files at the same time.

Tabs can also be ordered, and moved around, simply by dragging them.

That's how you can create, open, save, and arrange files in a text editor.

So what if I have a project, like a simple web page, and

I want to preview that project like I can in workspaces?

We'll talk about that in the next video.