Let's take a closer look at the workspace's interface and

learn how to work with files.

Here I have a workspace already open with a simple HTML and

CSS website and on the left side we have what's called the file tree.

And in the file tree we have a list of files like this HTML file or

this text file, and we also have folders.

So we can click the triangle on the left side of any of these folders

to open a folder and see its contents.

And in fact, you can even have folders nested inside of folders just

like in the macro S10 finder or in the Windows file explorer.

When you click on one of the files like this HTML file

it will open it on the right side, which is the text editing area.

At the top you can see the name of the file and

by clicking the x you can close the file when you're done working with it.

You can also have multiple files open at once.

So here you can switch between these two tabs and have multiple files open.

At the top of the workspace, is what's called the menu bar.

Here, you'll find the familiar File, Edit, View, and

Help menus, as you might see in other applications.

Where you can do things like create new files, close all of the open files,

save the currently open file, and so forth.

On the right side, we have a few additional tools where you can create

a workspace snapshot, fork a workspace, or preview a workspace.

We'll talk more about these features in upcoming videos.

Next let's learn how to create a new file.

You could go to the File menu and choose New File.

And then you'll have the opportunity to name the file,

such as about.html if you wanted to create a new HTML page.

But if you wanted to create something like a CSS file,

you could simply change the file extension.

So I could call this something like style.css, so that it's a CSS file.

And then, when I hit Enter, workspaces will automatically open the new file, and

down at the bottom you'll notice that it recognizes that it is indeed a CSS file.

This is important because in the text editing area you have syntax highlighting.

So if we go back to this index.html file you can see that

the syntax is all different colors to highlight different parts of the code.

In addition to creating files, you can also create folders.

Another way to create files and folders besides using the File menu

is to right click, or alternate click, on the file tree

in any blank area and then choose New File or New folder.

So let's say we wanted to create a folder to store some iconography.

I could type icons.

And now, my new folder is created.

Even though it's expanded, there's nothing inside of it.

But we can move files by simply dragging and

dropping them, and then they'll appear inside of the folders.

This is a convenient way to not only organize your projects, but also make sure

you have the appropriate file paths in your HTML files, as well as other files.

In addition to creating files inside of workspaces,

you can also upload your own files.

There are two ways to do this.

I could right click and choose Upload File, and

then I could choose one of the files I have on my computer.

Perhaps this normalize.css file and choose Open.

And now it's appeared in the file tree and it's been uploaded to this workspace.

In addition to right clicking and choosing Upload File, you can also drag and

drop files from the Finder on Mac OS X or

the File Explorer on Windows, directly into the file tree.

So I'm gonna come out of full screen mode, and

then I have a Finder window here, and let me try to upload a different file,

such as the minimized version of normalize.css.

And when I drag and drop this into the file tree,

a box appears at the bottom that says, Drop Files to Upload.

So when I drop this file, you can see that it's now been uploaded to my workspace.

If you want to rename a file or a folder, you can right-click on the file or

folder and then choose Rename.

Perhaps instead of icons, I just wanted to call this icon.

And now it's been renamed.

And finally, you can right click to delete files and

folders by right clicking and choosing Delete.